Add nonce instead of unsafe-inline for naive-ui (#29)

* Add nonce instead of unsafe-inline

* Support getting stacktrace for Safari

* Add timeout for e2e tests

Author: getCryptoAddress

e2e/vue.spec.ts

@@ -12,6 +12,7 @@ test("check menu items", async ({ page }) => {
   const $menu = page.locator('[data-test-id="page-header-menu"]');
   const menuItems = $menu.getByRole("menuitem");
   const $$menuItems = await menuItems.all();
+  await page.waitForTimeout(500);
   await expect(menuItems).toHaveCount(4);
 
   await expect($$menuItems[0]).toHaveText("Home");
@@ -26,6 +27,7 @@ test("General flow", async ({ page, context, browserName }) => {
   }
 
   await page.goto("/");
+  await page.waitForTimeout(500);
   await page.getByRole("link", { name: "Create Crypto Address" }).click();
   await page.waitForURL("/create-wallets/", { timeout: 1000 });
 

src/App.vue

@@ -7,9 +7,16 @@
   import { PageHeader } from "@/entities/PageHeader";
   import { ParanoidMode } from "@/entities/ParanoidMode";
   import ThemeSwitcher from "@/entities/ThemeSwitcher/ThemeSwitcher.vue";
+  import { addNonceToStyles } from "@/shared/lib/csp/addNonceToStyles";
   import initTracker from "@/shared/lib/tracker/initTracker";
   import PageTemplate from "@/shared/ui/PageTemplate/PageTemplate.vue";
 
+  // [tag-nonce]
+  // Some libs doesn't support nonce, part of logic with workaround
+  // Search by tag in the code
+  const chunksWithoutNonce = ["naive-ui"];
+  addNonceToStyles(import.meta.env.VITE_NONCE, chunksWithoutNonce);
+
   const isDark = useDark() as Ref<boolean>;
   const themeProvider = computed(() => (isDark.value ? darkTheme : null));
   const toggleDark = useToggle(isDark);

src/shared/lib/csp/addNonceToStyles.ts

@@ -0,0 +1,72 @@
+const originalAppendChild = Node.prototype.appendChild;
+const originalInsertBefore = Node.prototype.insertBefore;
+
+const assetsFolder =
+  import.meta.env.MODE === "production"
+    ? "/assets/"
+    : "/node_modules/.vite/deps/";
+
+/**
+ * Check if the current chunk is one of those that do not support nonce
+ *
+ * [tag-nonce] Search by tag in the code
+ */
+function isSelectedChunk(chunksWithoutNonce: string[]) {
+  const { stack } = new Error();
+  const pathOfChunks = chunksWithoutNonce.map(
+    (chunk) => window.location.origin + assetsFolder + chunk,
+  );
+
+  return !!stack
+    ?.split("\n")
+    .map((line) => {
+      const chromeMatch = line.match(/at.*\((http.+?)\)$/);
+      if (chromeMatch) {
+        return chromeMatch[1];
+      }
+
+      const safariMatch = line.match(/@(http.+?):\d+:\d+/);
+      if (safariMatch) {
+        return safariMatch[1];
+      }
+      return null;
+    })
+    .filter((line) => line && pathOfChunks.some((path) => line.includes(path)))
+    .length;
+}
+
+/**
+ * Add nonce to style elements that do not have it yet for the selected chunks
+ */
+export function addNonceToStyles(nonce: string, chunksWithoutNonce: string[]) {
+  const addNonceToStyle = (element: Node) => {
+    const isStyleElement = element instanceof HTMLStyleElement;
+    if (!isStyleElement) {
+      return;
+    }
+
+    const hasNonce = element.hasAttribute("nonce");
+    if (hasNonce) {
+      return;
+    }
+
+    if (!isSelectedChunk(chunksWithoutNonce)) {
+      return;
+    }
+
+    element.setAttribute("nonce", nonce);
+  };
+
+  Node.prototype.appendChild = function <T extends Node>(node: T): T {
+    addNonceToStyle(node);
+    return originalAppendChild.call(this, node) as T;
+  };
+
+  Node.prototype.insertBefore = function <T extends Node>(
+    node: T,
+    referenceNode: Node | null,
+  ): T {
+    addNonceToStyle(node);
+    return originalInsertBefore.call(this, node, referenceNode) as T;
+  };
+}

vite.config.mts

@@ -3,8 +3,13 @@ import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
 import csp from "vite-plugin-csp-guard";
 
+process.env.VITE_NONCE = Math.random().toString(36).slice(2);
+
 // https://vitejs.dev/config/
 export default defineConfig({
+  html: {
+    cspNonce: process.env.VITE_NONCE,
+  },
   plugins: [
     vue(),
     csp({
@@ -13,8 +18,8 @@ export default defineConfig({
         outlierSupport: ["vue"],
       },
       policy: {
-        "style-src": ["'self'", "'unsafe-inline'"], // todo remove when naive-ui will be fixed
-        "style-src-elem": ["'unsafe-inline'"], // todo remove when naive-ui will be fixed
+        "style-src": ["'self'"],
+        "style-src-elem": ["'self'", `'nonce-${process.env.VITE_NONCE}'`],
         "img-src": ["data:", "blob:"],
         "script-src": ["'wasm-unsafe-eval'"],
         "script-src-elem": ["https://analytics.umami.is/script.js"],
@@ -30,6 +35,19 @@ export default defineConfig({
   build: {
     target: "es2022",
     assetsInlineLimit: 0,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          // [tag-nonce]
+          // Naive-ui doesn't support nonce, part of logic with workaround
+          // Search by tag in the code
+          const nativeUiPath = process.cwd() + "/node_modules/naive-ui/";
+          if (id.startsWith(nativeUiPath)) {
+            return "naive-ui"; // https://github.com/tusen-ai/naive-ui/issues/6356
+          }
+        },
+      },
+    },
   },
   resolve: {
     alias: {