Remove unsafe-inline from the Content-Security-Policy (closes #125)

script-src and style-src now allow only 'self'. The generator page's
two inline onclick handlers, which selected the generated URL and
copied it, move into internal/static/generator.js and are attached
with addEventListener. The bundled Tailwind script, which built styles
in the browser and injected them at runtime, is replaced by a small
hand-written internal/static/style.css holding only the rules the
login and generator pages use; the templates carry a few plain class
names in place of Tailwind's. No build step. The pages keep their
layout, not every pixel of it.

Model: opus-5-5

README.md

@@ -191,8 +191,9 @@ path under `/v1/` answers 200, in maintenance mode too.
 - `GET /.well-known/healthcheck.json` — JSON with `status` (`ok`), `now`,
   `uptime_seconds`, `uptime_human`, `version`, `appname` and
   `maintenance_mode`. Needs: nothing. Answers: 200, always.
-- `GET /static/<file>` — the script the login and generator pages load. Needs:
-  nothing. Answers: 200, or 404 for a file that does not exist.
+- `GET /static/<file>` — the stylesheet and script the login and generator
+  pages load. Needs: nothing. Answers: 200, or 404 for a file that does not
+  exist.
 - `GET /metrics` — Prometheus metrics (see Architecture). Needs: HTTP basic
   authentication with `metrics.username` and `metrics.password`. Answers: 200;
   401 without them; 404 when they are not set, as the route then does not exist.

TODO.md

@@ -29,6 +29,15 @@ P2: security: referer blacklist
 
 # Completed Steps
 
+- 2026-10-04 the Content-Security-Policy allows no inline script or style
+  (closes #125): `script-src` and `style-src` are `'self'` only. The generator
+  page's two inline `onclick` handlers moved into
+  `internal/static/generator.js`, attached with `addEventListener`; the bundled
+  Tailwind script, which built styles in the browser, is replaced by a small
+  hand-written `internal/static/style.css` with only the rules the login and
+  generator pages use, the templates carrying a few plain class names in place
+  of Tailwind's. No build step. The pages keep their layout, not every pixel of
+  it.
 - 2026-10-04 deployment guide and example Caddy config (closes #89):
   "Deployment" in `README.md` says what the reverse proxy in front of pixa must
   do (terminate TLS; pass `Host`, `Origin` and `Referer` on unchanged; set

internal/middleware/middleware.go

@@ -35,13 +35,10 @@ const HSTSValue = "max-age=31536000; includeSubDomains"
 
 // ContentSecurityPolicyValue is the Content-Security-Policy header value.
 // default-src 'self' is the baseline and frame-ancestors 'none' is the primary
-// clickjacking control. 'unsafe-inline' is required in script-src and style-src
-// because the served templates carry inline onclick handlers (generator page)
-// and the bundled Tailwind asset injects a runtime <style> element; dropping it
-// needs template changes outside this issue's scope.
+// clickjacking control.
 const ContentSecurityPolicyValue = "default-src 'self'; " +
-	"script-src 'self' 'unsafe-inline'; " +
-	"style-src 'self' 'unsafe-inline'; " +
+	"script-src 'self'; " +
+	"style-src 'self'; " +
 	"object-src 'none'; " +
 	"base-uri 'self'; " +
 	"form-action 'self'; " +

internal/middleware/middleware_internal_test.go

@@ -325,6 +325,13 @@ func TestSecurityHeaders_PolicyHeaders(t *testing.T) {
 
 	handler.ServeHTTP(rec, req)
 
+	// The login and generator pages load their script and stylesheet from
+	// /static, so the policy allows no inline script or style.
+	csp := rec.Header().Get("Content-Security-Policy")
+	if strings.Contains(csp, "unsafe-inline") {
+		t.Errorf("Content-Security-Policy allows unsafe-inline: %q", csp)
+	}
+
 	tests := []struct {
 		header string
 		want   string
@@ -333,8 +340,8 @@ func TestSecurityHeaders_PolicyHeaders(t *testing.T) {
 		{
 			"Content-Security-Policy",
 			"default-src 'self'; " +
-				"script-src 'self' 'unsafe-inline'; " +
-				"style-src 'self' 'unsafe-inline'; " +
+				"script-src 'self'; " +
+				"style-src 'self'; " +
 				"object-src 'none'; " +
 				"base-uri 'self'; " +
 				"form-action 'self'; " +

internal/server/routes.go

@@ -53,7 +53,7 @@ func (s *Server) SetupRoutes() {
 	// Robots.txt
 	s.router.Get("/robots.txt", s.h.HandleRobotsTxt())
 
-	// Static files (Tailwind CSS, etc.)
+	// The login and generator pages' stylesheet and script
 	s.router.Handle("/static/*", http.StripPrefix("/static/", static.Handler()))
 
 	// Login/generator UI. The form routes carry CSRF protection; the

internal/static/generator.js

@@ -0,0 +1,10 @@
+// Generator page: a click on the generated URL selects it, and the Copy
+// button copies it. Both are on the page only once a URL has been generated.
+const generatedURL = document.getElementById("generated-url");
+
+if (generatedURL) {
+    generatedURL.addEventListener("click", () => generatedURL.select());
+    document.getElementById("copy-url").addEventListener("click", () => {
+        navigator.clipboard.writeText(generatedURL.value);
+    });
+}

internal/static/static.go

@@ -7,7 +7,7 @@ import (
 	"net/http"
 )
 
-//go:embed *.js
+//go:embed *.css *.js
 var files embed.FS
 
 // FS returns the embedded filesystem containing static files.

internal/static/style.css

@@ -0,0 +1,190 @@
+/* The login and generator pages. */
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: #f3f4f6;
+    font-family: system-ui, sans-serif;
+    line-height: 1.5;
+}
+
+h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+}
+
+input,
+select {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+    font: inherit;
+}
+
+input:focus,
+select:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px #3b82f6;
+}
+
+button {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.375rem;
+    background: #2563eb;
+    color: #fff;
+    font: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s;
+}
+
+button:hover {
+    background: #1d4ed8;
+}
+
+button:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+form > * + * {
+    margin-top: 1rem;
+}
+
+.card {
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background: #fff;
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 10%),
+        0 2px 4px -2px rgb(0 0 0 / 10%);
+}
+
+.error {
+    margin-bottom: 1rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid #f87171;
+    border-radius: 0.25rem;
+    background: #fee2e2;
+    color: #b91c1c;
+}
+
+/* Login page: the card centred on the screen. */
+
+.login {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login .card {
+    width: 100%;
+    max-width: 28rem;
+    padding: 2rem;
+}
+
+.login h1 {
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+/* Generator page. */
+
+.page {
+    max-width: 42rem;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+header a {
+    font-size: 0.875rem;
+    color: #4b5563;
+}
+
+header a:hover {
+    color: #1f2937;
+}
+
+.result {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    border: 1px solid #bbf7d0;
+    border-radius: 0.5rem;
+    background: #f0fdf4;
+}
+
+.result h2 {
+    margin: 0 0 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #166534;
+}
+
+.result div {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.result input {
+    flex: 1;
+    border-color: #86efac;
+    box-shadow: none;
+    font-family: ui-monospace, monospace;
+    font-size: 0.875rem;
+}
+
+.result button {
+    width: auto;
+    padding: 0.5rem 0.75rem;
+    background: #16a34a;
+    font-size: 0.875rem;
+}
+
+.result button:hover {
+    background: #15803d;
+}
+
+.result p {
+    margin: 0.5rem 0 0;
+    font-size: 0.75rem;
+    color: #16a34a;
+}
+
+.columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+}
+
+.note {
+    margin-top: 1rem;
+    font-size: 0.75rem;
+    color: #6b7280;
+    text-align: center;
+}

internal/templates/generator.html

@@ -4,52 +4,47 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pixa - URL Generator</title>
-    <script src="/static/tailwind.js"></script>
+    <link rel="stylesheet" href="/static/style.css">
 </head>
-<body class="bg-gray-100 min-h-screen">
-    <div class="max-w-2xl mx-auto py-8 px-4">
-        <div class="flex justify-between items-center mb-8">
-            <h1 class="text-2xl font-bold text-gray-800">Pixa URL Generator</h1>
-            <a href="/logout" class="text-sm text-gray-600 hover:text-gray-800 underline">
+<body>
+    <div class="page">
+        <header>
+            <h1>Pixa URL Generator</h1>
+            <a href="/logout">
                 Logout
             </a>
-        </div>
+        </header>
 
         {{if .GeneratedURL}}
-        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
-            <h2 class="text-sm font-medium text-green-800 mb-2">Generated URL</h2>
-            <div class="flex gap-2">
+        <div class="result">
+            <h2>Generated URL</h2>
+            <div>
                 <input
                     type="text"
                     readonly
                     value="{{.GeneratedURL}}"
                     id="generated-url"
-                    class="flex-1 px-3 py-2 bg-white border border-green-300 rounded-md text-sm font-mono"
-                    onclick="this.select()"
-                >
-                <button
-                    onclick="navigator.clipboard.writeText(document.getElementById('generated-url').value)"
-                    class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
                 >
+                <button id="copy-url">
                     Copy
                 </button>
             </div>
-            <p class="text-xs text-green-600 mt-2">
+            <p>
                 Expires: {{.ExpiresAt}}
             </p>
         </div>
         {{end}}
 
         {{if .Error}}
-        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
+        <div class="error">
             {{.Error}}
         </div>
         {{end}}
 
-        <form method="POST" action="/generate" class="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <form method="POST" action="/generate" class="card">
             {{ .CSRFField }}
             <div>
-                <label for="url" class="block text-sm font-medium text-gray-700 mb-1">
+                <label for="url">
                     Source URL
                 </label>
                 <input
@@ -59,13 +54,12 @@
                     required
                     placeholder="https://example.com/image.jpg"
                     value="{{.FormURL}}"
-                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 >
             </div>
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="columns">
                 <div>
-                    <label for="width" class="block text-sm font-medium text-gray-700 mb-1">
+                    <label for="width">
                         Width
                     </label>
                     <input
@@ -76,11 +70,10 @@
                         max="8192"
                         value="{{if .FormWidth}}{{.FormWidth}}{{else}}0{{end}}"
                         placeholder="0 = original"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     >
                 </div>
                 <div>
-                    <label for="height" class="block text-sm font-medium text-gray-700 mb-1">
+                    <label for="height">
                         Height
                     </label>
                     <input
@@ -91,21 +84,16 @@
                         max="8192"
                         value="{{if .FormHeight}}{{.FormHeight}}{{else}}0{{end}}"
                         placeholder="0 = original"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     >
                 </div>
             </div>
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="columns">
                 <div>
-                    <label for="format" class="block text-sm font-medium text-gray-700 mb-1">
+                    <label for="format">
                         Format
                     </label>
-                    <select
-                        id="format"
-                        name="format"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    >
+                    <select id="format" name="format">
                         <option value="orig" {{if eq .FormFormat "orig"}}selected{{end}}>Original</option>
                         <option value="jpeg" {{if eq .FormFormat "jpeg"}}selected{{end}}>JPEG</option>
                         <option value="png" {{if eq .FormFormat "png"}}selected{{end}}>PNG</option>
@@ -115,14 +103,10 @@
                     </select>
                 </div>
                 <div>
-                    <label for="quality" class="block text-sm font-medium text-gray-700 mb-1">
+                    <label for="quality">
                         Quality
                     </label>
-                    <select
-                        id="quality"
-                        name="quality"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    >
+                    <select id="quality" name="quality">
                         <option value="25" {{if eq .FormQuality "25"}}selected{{end}}>Potato</option>
                         <option value="50" {{if eq .FormQuality "50"}}selected{{end}}>Low</option>
                         <option value="70" {{if eq .FormQuality "70"}}selected{{end}}>Medium</option>
@@ -132,16 +116,12 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="columns">
                 <div>
-                    <label for="fit" class="block text-sm font-medium text-gray-700 mb-1">
+                    <label for="fit">
                         Fit Mode
                     </label>
-                    <select
-                        id="fit"
-                        name="fit"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    >
+                    <select id="fit" name="fit">
                         <option value="cover" {{if eq .FormFit "cover"}}selected{{end}}>Cover</option>
                         <option value="contain" {{if eq .FormFit "contain"}}selected{{end}}>Contain</option>
                         <option value="fill" {{if eq .FormFit "fill"}}selected{{end}}>Fill</option>
@@ -150,14 +130,10 @@
                     </select>
                 </div>
                 <div>
-                    <label for="ttl" class="block text-sm font-medium text-gray-700 mb-1">
+                    <label for="ttl">
                         Expires In
                     </label>
-                    <select
-                        id="ttl"
-                        name="ttl"
-                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    >
+                    <select id="ttl" name="ttl">
                         <option value="0" {{if or (eq .FormTTL "0") (eq .FormTTL "")}}selected{{end}}>Never</option>
                         <option value="60" {{if eq .FormTTL "60"}}selected{{end}}>1 minute</option>
                         <option value="3600" {{if eq .FormTTL "3600"}}selected{{end}}>1 hour</option>
@@ -169,17 +145,15 @@
                 </div>
             </div>
 
-            <button
-                type="submit"
-                class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
-            >
+            <button type="submit">
                 Generate Encrypted URL
             </button>
         </form>
 
-        <p class="text-xs text-gray-500 mt-4 text-center">
+        <p class="note">
             Generated URLs are encrypted and cannot be modified. They will expire at the specified time.
         </p>
     </div>
+    <script src="/static/generator.js"></script>
 </body>
 </html>

internal/templates/login.html

@@ -4,22 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pixa - Login</title>
-    <script src="/static/tailwind.js"></script>
+    <link rel="stylesheet" href="/static/style.css">
 </head>
-<body class="bg-gray-100 min-h-screen flex items-center justify-center">
-    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
-        <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Pixa Image Proxy</h1>
+<body class="login">
+    <div class="card">
+        <h1>Pixa Image Proxy</h1>
 
         {{if .Error}}
-        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        <div class="error">
             {{.Error}}
         </div>
         {{end}}
 
-        <form method="POST" action="/" class="space-y-4">
+        <form method="POST" action="/">
             {{ .CSRFField }}
             <div>
-                <label for="key" class="block text-sm font-medium text-gray-700 mb-1">
+                <label for="key">
                     Signing Key
                 </label>
                 <input
@@ -28,15 +28,11 @@
                     name="key"
                     required
                     autocomplete="current-password"
-                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     placeholder="Enter your signing key"
                 >
             </div>
 
-            <button
-                type="submit"
-                class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
-            >
+            <button type="submit">
                 Login
             </button>
         </form>