Add Legacy Support for Lico

soun059 · soun059 · commit 53c8625fe45a · 2024-11-06T15:27:27.000+05:30
Added Legacy Support for Lico via legacy plugin and added csp headers dynamically in build html. Related: #143
diff --git a/identifier/api.go b/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))
 
 	// Write index with random nonce to response.
-	index := bytes.Replace(i.webappIndexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 1)
+	index := bytes.Replace(i.webappIndexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 5)
 	rw.Write(index)
 }
 
diff --git a/identifier/package.json b/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": "^5.3.2",
     "@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",
diff --git a/identifier/vite.config.js b/identifier/vite.config.js
@@ -1,6 +1,41 @@
-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";
+import { readFileSync, writeFileSync } from "fs";
+import path from "path";
+
+function cspPlugin() {
+  return {
+    name: "csp-plugin",
+    closeBundle() {
+      // Path to the generated HTML file after build
+      const htmlFilePath = path.resolve(__dirname, "build/index.html");
+
+      // Read the HTML file content
+      let htmlContent = readFileSync(htmlFilePath, "utf-8");
+
+      // Insert the CSP meta tag in the HTML <head> section
+      htmlContent = htmlContent.replaceAll(
+        /<script nomodule>/gi,
+        `<script nomodule content="__CSP_NONCE__">`
+      );
+
+      htmlContent = htmlContent.replaceAll(
+        /<script type="module">/gi,
+        `<script type="module" content="__CSP_NONCE__">`
+      );
+
+      htmlContent = htmlContent.replaceAll(
+        /<script nomodule crossorigin id="vite-legacy-entry"/gi,
+        `<script nomodule crossorigin id="vite-legacy-entry" content="__CSP_NONCE__"`
+      );
+
+      // Write the updated HTML back to the file
+      writeFileSync(htmlFilePath, htmlContent);
+    },
+  };
+}
 
 export default defineConfig((env) => {
   return {
@@ -23,12 +58,17 @@ export default defineConfig((env) => {
     },
     plugins: [
       react(),
-      env.mode !== 'test' && checker({
-        typescript: true,
-        eslint: {
-          lintCommand: 'eslint --max-warnings=0 src',
-        },
+      legacy({
+        targets: ['edge 18'],
       }),
+      cspPlugin(),
+      env.mode !== 'test' &&
+        checker({
+          typescript: true,
+          eslint: {
+            lintCommand: 'eslint --max-warnings=0 src',
+          },
+        }),
       splitVendorChunkPlugin(),
     ],
     test: {
diff --git a/identifier/yarn.lock b/identifier/yarn.lock
