Add Legacy Support for Lico

Added Legacy Support for Lico via legacy plugin and added csp headers dynamically in build html. Related: #143
libregraph · Nov 6, 2024 · 8b12308 · 8b12308
1 parent d829bd9
commit 8b12308
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 8 deletions.
diff --git a/identifier/index.html b/identifier/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head data-kopano-build="%VITE_KOPANO_BUILD%">
     <meta charset="utf-8">
+    <meta http-equiv="Content-Security-Policy">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#ffffff">
     <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">

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,44 @@
-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, { cspHashes } 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");
+
+      const scriptHashes = cspHashes
+        ? cspHashes.map((id) => {
+            return `'sha256-${id}'`;
+          })
+        : [];
+
+      // Create the CSP header
+      const cspHeader = `default-src 'self'; script-src 'self' ${scriptHashes.join(
+        " "
+      )}`;
+
+      // Insert the CSP meta tag in the HTML <head> section
+      htmlContent = htmlContent.replace(
+        /<meta http-equiv="Content-Security-Policy">/,
+        `<meta http-equiv="Content-Security-Policy" content="${cspHeader}">`
+      );
+
+      // Write the updated HTML back to the file
+      writeFileSync(htmlFilePath, htmlContent);
+
+      console.log("CSP header added to HTML:", cspHeader);
+    },
+  };
+}
 
 export default defineConfig((env) => {
   return {
@@ -23,12 +61,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: {