Test (report-only) a CSP for stricter XSS protection

Author: pimterry

.github/workflows/ci.yml

@@ -35,10 +35,11 @@ jobs:
         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         env:
           POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          SENTRY_DSN: ${{ env.SENTRY_DSN }}
           SENTRY_ORG: http-toolkit
           SENTRY_PROJECT: httptoolkit-ui
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          REPORT_URI: ${{ env.REPORT_URI }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # To pull server without rate limit issues in CI
 
       - uses: actions/upload-artifact@v4

Caddyfile

@@ -14,8 +14,8 @@
     @get method GET
     header @get Cache-Control "public, max-age=60, s-maxage=3600, stale-while-revalidate=600, stale-if-error=86400"
 
-    header Content-Security-Policy "frame-ancestors 'none'"
     header Referrer-Policy "strict-origin"
-
     header X-Clacks-Overhead "GNU Terry Pratchett" # https://xclacksoverhead.org
+
+    import /site/csp.caddyfile # Generated by webpack
 }

automation/webpack.prod.ts

@@ -1,11 +1,12 @@
 import * as path from 'path';
 import merge from "webpack-merge";
+import { RawSource } from 'webpack-sources';
 import * as SentryPlugin from '@sentry/webpack-plugin';
 
 import { InjectManifest } from 'workbox-webpack-plugin';
 import * as ssri from "ssri";
-
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin';
 
 import common from "./webpack.common";
 
@@ -16,6 +17,14 @@ console.log(shouldPublishSentryRelease
     : "Sentry source map upload disabled - no token set"
 );
 
+const CSP_REPORT_URL = process.env.REPORT_URI && process.env.UI_VERSION
+    ? `${process.env.REPORT_URI}&sentry_release=${process.env.UI_VERSION}`
+    : false;
+console.log(CSP_REPORT_URL
+    ? "CSP reporting enabled"
+    : `CSP reporting skipped (uri: ${process.env.REPORT_URI}. version: ${process.env.UI_VERSION})`
+);
+
 export default merge(common, {
     mode: "production",
 
@@ -68,7 +77,13 @@ export default merge(common, {
                 'services',
                 'ui-update-worker.ts'
             ),
-            exclude: ['google-fonts', /^api\//, 'ui-update-worker.js', /.map$/],
+            exclude: [
+                'google-fonts',
+                /^api\//,
+                'ui-update-worker.js',
+                /\.map$/,
+                /\.caddyfile$/
+            ],
             maximumFileSizeToCacheInBytes: 100 * 1024 * 1024,
             manifestTransforms: [
                 (originalManifest: any, compilation: any) => {
@@ -111,6 +126,52 @@ export default merge(common, {
             analyzerMode: 'static',
             openAnalyzer: false,
             excludeAssets: /api\/.*\.json/
-        })
+        }),
+        ...(CSP_REPORT_URL
+            ? [
+                new CspHtmlWebpackPlugin({
+                    'base-uri': "'self'",
+                    'default-src': "'none'",
+                    'object-src': "'none'",
+                    'frame-ancestors': "'none'",
+                    'img-src': ["'self'", 'https://httptoolkit.com', 'data:'],
+                    'font-src': ["'self'"],
+                    'style-src': ["'report-sample'", "'self'", "'unsafe-inline'"],
+                    'script-src': [
+                        "'report-sample'",
+                        "'unsafe-eval'", // For both wasm & real eval() uses
+                        "'self'", 'https://cdn.auth0.com/', 'https://cdn.eu.auth0.com/'
+                    ],
+                    'connect-src': [
+                        "'self'", 'http://127.0.0.1:45456', 'http://127.0.0.1:45457', 'ws://127.0.0.1:45456', 'https://*.httptoolkit.tech', 'https://sentry.io', 'data:'
+                    ],
+                    'report-uri': CSP_REPORT_URL,
+                    'report-to': 'csp-endpoint'
+                }, {
+                    enabled: true,
+                    hashEnabled: {
+                        'script-src': true,
+                        'style-src': false
+                    },
+                    nonceEnabled: {
+                        'script-src': false,
+                        'style-src': false
+                    },
+                    // Output CSP into a Caddy config file, that's imported by Caddyfile
+                    processFn: (
+                        builtPolicy: any,
+                        _htmlPluginData: any,
+                        _obj: any,
+                        compilation: any
+                    ) => {
+                        const header = `
+                            header Content-Security-Policy-Report-Only "${builtPolicy}"
+                            header Reporting-Endpoints \`csp-endpoint="${CSP_REPORT_URL}"\`
+                        `;
+                        compilation.emitAsset('csp.caddyfile', new RawSource(header));
+                    }
+                } as any)
+            ]
+        : [])
     ]
-});
+});