Add legacy support via plugin

Add legacy support via plugin and add nonce headers to inline scripts.

Related: #143

Author: soun059

identifier/api.go

@@ -35,10 +35,10 @@ func (i *Identifier) writeWebappIndexHTML(rw http.ResponseWriter, req *http.Requ
 	// FIXME(longsleep): Set a secure CSP. Right now we need `data:` for images
 	// since it is used. Since `data:` URLs possibly could allow xss, a better
 	// way should be found for our early loading inline SVG stuff.
-	rw.Header().Set("Content-Security-Policy", fmt.Sprintf("default-src 'self'; img-src 'self' data:; font-src 'self' data:; script-src 'self'; style-src 'self' 'nonce-%s'; base-uri 'none'; frame-ancestors 'none';", nonce))
+	rw.Header().Set("Content-Security-Policy", fmt.Sprintf("default-src 'self'; img-src 'self' data:; font-src 'self' data:; script-src 'self' 'nonce-%s'; style-src 'self' 'nonce-%s'; base-uri 'none'; frame-ancestors 'none';", nonce, nonce))
 
 	// Write index with random nonce to response.
-	index := bytes.Replace(i.webappIndexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 1)
+	index := bytes.ReplaceAll(i.webappIndexHTML, []byte("__CSP_NONCE__"), []byte(nonce))
 	rw.Write(index)
 }
 

identifier/package.json

@@ -50,6 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.9.0",
     "@typescript-eslint/typescript-estree": "^6.11.0",
+    "@vitejs/plugin-legacy": "^4.0.0",
     "@vitejs/plugin-react": "^4.1.1",
     "cldr": "^7.4.0",
     "eslint": "^8.53.0",
@@ -60,6 +61,7 @@
     "if-node-version": "^1.1.1",
     "jsdom": "^22.1.0",
     "source-map-explorer": "^2.5.3",
+    "terser": "^5.30.4",
     "typescript": "^5.2.2",
     "vite": "^4.5.2",
     "vite-plugin-checker": "^0.6.2",

identifier/vite.config.js

@@ -1,6 +1,31 @@
-import { defineConfig, splitVendorChunkPlugin } from 'vite';
-import react from '@vitejs/plugin-react';
-import checker from 'vite-plugin-checker';
+import { defineConfig, splitVendorChunkPlugin } from "vite";
+import react from "@vitejs/plugin-react";
+import checker from "vite-plugin-checker";
+import legacy from "@vitejs/plugin-legacy";
+
+
+const addScriptCSPNoncePlaceholderPlugin = () => {
+  return {
+    name: "add-script-nonce-placeholderP-plugin",
+    apply: "build",
+    transformIndexHtml: {
+      order: "post",
+      handler(htmlData) {
+
+        return htmlData.replaceAll(
+          /<script nomodule>/gi,
+          `<script nomodule nonce="__CSP_NONCE__">`
+        ).replaceAll(
+          /<script type="module">/gi,
+          `<script type="module" nonce="__CSP_NONCE__">`
+        ).replaceAll(
+          /<script nomodule crossorigin id="vite-legacy-entry"/gi,
+          `<script nomodule crossorigin id="vite-legacy-entry" nonce="__CSP_NONCE__"`
+        );
+      },
+    },
+  };
+};
 
 export default defineConfig((env) => {
   return {
@@ -23,13 +48,18 @@ export default defineConfig((env) => {
     },
     plugins: [
       react(),
-      env.mode !== 'test' && checker({
-        typescript: true,
-        eslint: {
-          lintCommand: 'eslint --max-warnings=0 src',
-        },
+      legacy({
+        targets: ['edge 18'],
       }),
+      env.mode !== "test" &&
+        checker({
+          typescript: true,
+          eslint: {
+            lintCommand: 'eslint --max-warnings=0 src',
+          },
+        }),
       splitVendorChunkPlugin(),
+      addScriptCSPNoncePlaceholderPlugin(),
     ],
     test: {
       globals: true,