Drop 'unsafe-inline' from the Content-Security-Policy (closes #530)

The delete prompts on the webhook page were inline onsubmit handlers.
Each delete form now carries its question in a data-confirm attribute,
which one submit listener in static/js/app.js asks. The three style
attributes became Tailwind classes, with tailwind.css regenerated, and
the x-cloak rule moved to style.css. The policy now sends
script-src 'self' and style-src 'self'.

The browser test now answers a target's delete prompt no and then yes,
and loads the webhook list, settings and profile pages under the
policy. The README states the policy as sent.

Model: opus-5-5

templates/event_body.html

@@ -5,7 +5,7 @@
 {{if .Binary}}
 <p class="text-xs text-gray-500">This body is binary ({{.Size}} bytes) and is not shown. <a href="{{.EventURL}}/body" class="btn-small">Download the body</a></p>
 {{else if .Text}}
-<pre class="rounded-md border border-gray-200 bg-white p-2 text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap break-all"{{if .Scroll}} style="max-height: 32rem; overflow-y: auto"{{end}}>{{.Text}}</pre>
+<pre class="rounded-md border border-gray-200 bg-white p-2 text-xs text-gray-700 overflow-x-auto whitespace-pre-wrap break-all{{if .Scroll}} max-h-[32rem] overflow-y-auto{{end}}">{{.Text}}</pre>
 {{if .Cut}}
 <p class="mt-2 text-xs text-gray-500">Showing the first {{.ShownBytes}} of {{.Size}} bytes, unformatted. <a href="{{.EventURL}}" class="btn-small">Show the whole body</a> <a href="{{.EventURL}}/body" class="btn-small">Download the body</a></p>
 {{end}}

templates/htmlheader.html

@@ -4,6 +4,5 @@
 <title>{{block "title" .}}Webhooker{{end}}</title>
 <link rel="stylesheet" href="/s/css/tailwind.css">
 <link rel="stylesheet" href="/s/css/style.css">
-<style>[x-cloak] { display: none !important; }</style>
 {{block "head" .}}{{end}}
 {{end}}

templates/settings.html

@@ -13,13 +13,11 @@
             <div class="p-4">
                 <!-- A value too wide to sit beside its name moves to the
                      next line, where a list breaks only at the spaces
-                     between its entries. overflow-wrap: anywhere breaks
-                     inside a value only when it alone is wider than the
-                     line; an inline style, because the committed
-                     tailwind.css has no class for it. -->
+                     between its entries. wrap-anywhere breaks inside a
+                     value only when it alone is wider than the line. -->
                 <div class="flex flex-wrap justify-between items-start gap-4">
                     <code class="text-sm font-medium text-gray-900">{{.Name}}</code>
-                    <code class="text-sm text-gray-900" style="overflow-wrap: anywhere">{{.Value}}</code>
+                    <code class="text-sm text-gray-900 wrap-anywhere">{{.Value}}</code>
                 </div>
                 <p class="text-sm text-gray-500 mt-1">{{.Description}}</p>
             </div>

templates/source_detail.html

@@ -5,12 +5,10 @@
 {{define "content"}}
 <!-- 108rem, half again the 72rem (max-w-6xl) of the webhook list, the
      event log, the navbar and the footer, so an entrypoint URL fits on
-     one line. An inline style, because the committed tailwind.css has
-     no class this wide. wrap-anywhere goes only on names and
-     descriptions: a row too wide for a phone must still run past the
-     edge, where the browser test sees it, rather than break its
-     controls mid-word. -->
-<div class="mx-auto px-6 py-8" style="max-width: 108rem">
+     one line. wrap-anywhere goes only on names and descriptions: a
+     row too wide for a phone must still run past the edge, where the
+     browser test sees it, rather than break its controls mid-word. -->
+<div class="max-w-[108rem] mx-auto px-6 py-8">
     <div class="mb-6">
         <a href="/hooks" class="btn-small">&larr; Back to webhooks</a>
         <div class="flex flex-wrap justify-between items-center gap-2 mt-2">
@@ -23,11 +21,12 @@
             <div class="flex gap-2">
                 <a href="/hook/{{.Webhook.ID}}/events" class="btn-secondary">Full Event Log</a>
                 <a href="/hook/{{.Webhook.ID}}/edit" class="btn-secondary">Edit</a>
-                <!-- The delete prompts are the browser's own, so they
-                     work without the page's scripts. The template
-                     escapes each name for the script, so a quote or a
-                     backslash in it shows as typed. -->
-                <form method="POST" action="/hook/{{.Webhook.ID}}/delete" onsubmit="return confirm('Delete webhook &quot;{{.Webhook.Name}}&quot;?\n\nThis deletes its stored events{{with .Stats}} ({{.WithinRetention.Events}}){{end}} and their deliveries. Any archive files it wrote are kept.')">
+                <!-- Before a delete form is sent, static/js/app.js
+                     asks in the browser's own prompt, with the form's
+                     data-confirm text; &#10; is a line break. The
+                     template escapes each name for the attribute, so a
+                     quote in it shows as typed. -->
+                <form method="POST" action="/hook/{{.Webhook.ID}}/delete" data-confirm="Delete webhook &quot;{{.Webhook.Name}}&quot;?&#10;&#10;This deletes its stored events{{with .Stats}} ({{.WithinRetention.Events}}){{end}} and their deliveries. Any archive files it wrote are kept.">
                     <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                     <button type="submit" class="btn-danger">Delete</button>
                 </form>
@@ -90,7 +89,7 @@
                                     {{if .Active}}Deactivate{{else}}Activate{{end}}
                                 </button>
                             </form>
-                            <form method="POST" action="/hook/{{$.Webhook.ID}}/entrypoints/{{.ID}}/delete" onsubmit="return confirm('Delete entrypoint &quot;{{if .Description}}{{.Description}}{{else}}{{$.BaseURL}}/h/{{.Path}}{{end}}&quot;?\n\nSenders using its URL get an error from now on, and the URL cannot be restored.')" class="inline">
+                            <form method="POST" action="/hook/{{$.Webhook.ID}}/entrypoints/{{.ID}}/delete" data-confirm="Delete entrypoint &quot;{{if .Description}}{{.Description}}{{else}}{{$.BaseURL}}/h/{{.Path}}{{end}}&quot;?&#10;&#10;Senders using its URL get an error from now on, and the URL cannot be restored." class="inline">
                                 <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                                 <button type="submit" class="btn-small text-red-600" title="Delete">Delete</button>
                             </form>
@@ -278,7 +277,7 @@
                                     {{if .Active}}Deactivate{{else}}Activate{{end}}
                                 </button>
                             </form>
-                            <form method="POST" action="/hook/{{$.Webhook.ID}}/targets/{{.ID}}/delete" onsubmit="return confirm('Delete target &quot;{{.Name}}&quot;?\n\nNothing more is delivered to it. Its past deliveries stay in the event log.')" class="inline">
+                            <form method="POST" action="/hook/{{$.Webhook.ID}}/targets/{{.ID}}/delete" data-confirm="Delete target &quot;{{.Name}}&quot;?&#10;&#10;Nothing more is delivered to it. Its past deliveries stay in the event log." class="inline">
                                 <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                                 <button type="submit" class="btn-small text-red-600" title="Delete">Delete</button>
                             </form>