From 432b6d15d2b58cfd147719e43406cbe749d81117 Mon Sep 17 00:00:00 2001 From: getCryptoAddress <125769450+getCryptoAddress@users.noreply.github.com> Date: Fri, 8 Nov 2024 03:39:09 +0200 Subject: [PATCH] Fix multiline styles for CSP and fix add to ignore @vueuse (#34) --- e2e/vue.spec.ts | 76 ++++++++++++++++--- .../robots-firefox-darwin.txt | 4 - .../robots-firefox-linux.txt | 4 - .../robots-webkit-darwin.txt | 4 - .../robots-webkit-linux.txt | 4 - .../sitemap-firefox-darwin.txt | 4 - .../sitemap-firefox-linux.txt | 4 - .../sitemap-webkit-darwin.txt | 4 - .../sitemap-webkit-linux.txt | 4 - node/csp/getInlineStylesHashes.mjs | 2 +- src/App.vue | 2 +- vite.config.mts | 4 + 12 files changed, 72 insertions(+), 44 deletions(-) delete mode 100644 e2e/vue.spec.ts-snapshots/robots-firefox-darwin.txt delete mode 100644 e2e/vue.spec.ts-snapshots/robots-firefox-linux.txt delete mode 100644 e2e/vue.spec.ts-snapshots/robots-webkit-darwin.txt delete mode 100644 e2e/vue.spec.ts-snapshots/robots-webkit-linux.txt delete mode 100644 e2e/vue.spec.ts-snapshots/sitemap-firefox-darwin.txt delete mode 100644 e2e/vue.spec.ts-snapshots/sitemap-firefox-linux.txt delete mode 100644 e2e/vue.spec.ts-snapshots/sitemap-webkit-darwin.txt delete mode 100644 e2e/vue.spec.ts-snapshots/sitemap-webkit-linux.txt diff --git a/e2e/vue.spec.ts b/e2e/vue.spec.ts index a85e9d3..0277445 100644 --- a/e2e/vue.spec.ts +++ b/e2e/vue.spec.ts @@ -6,22 +6,56 @@ let errorMessagesCount = 0; const ignoreErrors = [ "ResizeObserver loop completed with undelivered notifications.", + // Blocked by AdBlocker + "api-gateway.umami.dev", +]; +const ignoreConsoleErrors = [ + // Blocked by AdBlocker + "api-gateway.umami.dev", + "Failed to load resource: net::ERR_FAILED", ]; // Register a global error listener -test.beforeEach(async ({ page }) => { +test.beforeEach(async ({ page, browserName }) => { errorMessagesCount = 0; - page.on("pageerror", (error) => { - if (ignoreErrors.includes(error.message)) { + page.on("console", (consoleMessage) => { + if (consoleMessage.type() !== "error") { + return; + } + + // Webkit again have strange behavior. + // It doesn't provide location for CSP error. + // And not reproducible in Safari browser. + if (browserName === "webkit") { return; } - console.log(">> Console error: ", error); + + for (const ignoreError of ignoreConsoleErrors) { + if (consoleMessage.text().includes(ignoreError)) { + return; + } + } + console.log( + ">> Console log (error): ", + consoleMessage.text(), + consoleMessage.location(), + ); + ++errorMessagesCount; + }); + + page.on("pageerror", (error) => { + for (const ignoreError of ignoreErrors) { + if (error.message.includes(ignoreError)) { + return; + } + } + console.log(">> Console error: ", error, error.stack); ++errorMessagesCount; }); }); -test.afterEach(() => { +test.afterEach(async () => { expect(errorMessagesCount).toBe(0); }); @@ -51,7 +85,7 @@ test("visits the app root url, sitemap.txt and robots.txt", async ({ expect(await page.locator("pre").innerText()).toMatchSnapshot("robots.txt"); }); -test("check menu items", async ({ page }) => { +test("check menu items and each page", async ({ page }) => { await page.goto("/"); const $menu = page.locator('[data-test-id="page-header-menu"]'); const menuItems = $menu.getByRole("menuitem"); @@ -59,10 +93,32 @@ test("check menu items", async ({ page }) => { await page.waitForTimeout(500); await expect(menuItems).toHaveCount(4); - await expect($$menuItems[0]).toHaveText("Home"); - await expect($$menuItems[1]).toHaveText("Create Crypto Address"); - await expect($$menuItems[2]).toHaveText("Create Paper Wallet"); - await expect($$menuItems[3]).toHaveText("Paper Wallet Editor"); + const pages = [ + { index: 0, url: "/", title: "Home" }, + { index: 1, url: "/create-wallets/", title: "Create Crypto Address" }, + { index: 2, url: "/paper-wallets/", title: "Create Paper Wallet" }, + { index: 3, url: "/paper-wallet-editor/", title: "Paper Wallet Editor" }, + ]; + + for (const { index, title } of pages) { + await expect($$menuItems[index]).toHaveText(title); + } + + // Check Content-Security-Policy. + // Need to refresh the page to check the CSP for each page separately. + if (process.env.PLAYWRIGHT_USE_BUILD) { + for (const { index, url } of pages) { + if (index === 0) { + continue; + } + const $item = $$menuItems[index]; + await $item.click(); + await page.waitForURL(url, { timeout: 5000 }); + await page.waitForTimeout(500); + await page.reload(); + await page.waitForTimeout(1000); + } + } }); test("General flow", async ({ page, context, browserName }) => { diff --git a/e2e/vue.spec.ts-snapshots/robots-firefox-darwin.txt b/e2e/vue.spec.ts-snapshots/robots-firefox-darwin.txt deleted file mode 100644 index 5904462..0000000 --- a/e2e/vue.spec.ts-snapshots/robots-firefox-darwin.txt +++ /dev/null @@ -1,4 +0,0 @@ -User-agent: * -Disallow: - -Sitemap: https://getCryptoAddress.github.io/sitemap.txt diff --git a/e2e/vue.spec.ts-snapshots/robots-firefox-linux.txt b/e2e/vue.spec.ts-snapshots/robots-firefox-linux.txt deleted file mode 100644 index 5904462..0000000 --- a/e2e/vue.spec.ts-snapshots/robots-firefox-linux.txt +++ /dev/null @@ -1,4 +0,0 @@ -User-agent: * -Disallow: - -Sitemap: https://getCryptoAddress.github.io/sitemap.txt diff --git a/e2e/vue.spec.ts-snapshots/robots-webkit-darwin.txt b/e2e/vue.spec.ts-snapshots/robots-webkit-darwin.txt deleted file mode 100644 index 5904462..0000000 --- a/e2e/vue.spec.ts-snapshots/robots-webkit-darwin.txt +++ /dev/null @@ -1,4 +0,0 @@ -User-agent: * -Disallow: - -Sitemap: https://getCryptoAddress.github.io/sitemap.txt diff --git a/e2e/vue.spec.ts-snapshots/robots-webkit-linux.txt b/e2e/vue.spec.ts-snapshots/robots-webkit-linux.txt deleted file mode 100644 index 5904462..0000000 --- a/e2e/vue.spec.ts-snapshots/robots-webkit-linux.txt +++ /dev/null @@ -1,4 +0,0 @@ -User-agent: * -Disallow: - -Sitemap: https://getCryptoAddress.github.io/sitemap.txt diff --git a/e2e/vue.spec.ts-snapshots/sitemap-firefox-darwin.txt b/e2e/vue.spec.ts-snapshots/sitemap-firefox-darwin.txt deleted file mode 100644 index 6bc9816..0000000 --- a/e2e/vue.spec.ts-snapshots/sitemap-firefox-darwin.txt +++ /dev/null @@ -1,4 +0,0 @@ -https://getcryptoaddress.github.io/create-wallets/ -https://getcryptoaddress.github.io/paper-wallet-editor/ -https://getcryptoaddress.github.io/paper-wallets/ -https://getcryptoaddress.github.io/ \ No newline at end of file diff --git a/e2e/vue.spec.ts-snapshots/sitemap-firefox-linux.txt b/e2e/vue.spec.ts-snapshots/sitemap-firefox-linux.txt deleted file mode 100644 index 6bc9816..0000000 --- a/e2e/vue.spec.ts-snapshots/sitemap-firefox-linux.txt +++ /dev/null @@ -1,4 +0,0 @@ -https://getcryptoaddress.github.io/create-wallets/ -https://getcryptoaddress.github.io/paper-wallet-editor/ -https://getcryptoaddress.github.io/paper-wallets/ -https://getcryptoaddress.github.io/ \ No newline at end of file diff --git a/e2e/vue.spec.ts-snapshots/sitemap-webkit-darwin.txt b/e2e/vue.spec.ts-snapshots/sitemap-webkit-darwin.txt deleted file mode 100644 index 6bc9816..0000000 --- a/e2e/vue.spec.ts-snapshots/sitemap-webkit-darwin.txt +++ /dev/null @@ -1,4 +0,0 @@ -https://getcryptoaddress.github.io/create-wallets/ -https://getcryptoaddress.github.io/paper-wallet-editor/ -https://getcryptoaddress.github.io/paper-wallets/ -https://getcryptoaddress.github.io/ \ No newline at end of file diff --git a/e2e/vue.spec.ts-snapshots/sitemap-webkit-linux.txt b/e2e/vue.spec.ts-snapshots/sitemap-webkit-linux.txt deleted file mode 100644 index 6bc9816..0000000 --- a/e2e/vue.spec.ts-snapshots/sitemap-webkit-linux.txt +++ /dev/null @@ -1,4 +0,0 @@ -https://getcryptoaddress.github.io/create-wallets/ -https://getcryptoaddress.github.io/paper-wallet-editor/ -https://getcryptoaddress.github.io/paper-wallets/ -https://getcryptoaddress.github.io/ \ No newline at end of file diff --git a/node/csp/getInlineStylesHashes.mjs b/node/csp/getInlineStylesHashes.mjs index 0f0ca57..9d37654 100644 --- a/node/csp/getInlineStylesHashes.mjs +++ b/node/csp/getInlineStylesHashes.mjs @@ -30,7 +30,7 @@ function calculateStyleHash(styleContent) { function getInlineStyles(appHtml) { return ( appHtml - .match(/ style=".*?"/g) + .match(/ style="([\s\S]*?)"/g) ?.map((line) => line.replace(/^ style="/, "").replace(/"$/, "")) || [] ); } diff --git a/src/App.vue b/src/App.vue index d67e2b0..b3a67c0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,7 +14,7 @@ // [tag-nonce] // Some libs doesn't support nonce, part of logic with workaround // Search by tag in the code - const chunksWithoutNonce = ["naive-ui"]; + const chunksWithoutNonce = ["naive-ui", "@vueuse"]; addNonceToStyles(import.meta.env.VITE_NONCE, chunksWithoutNonce); const isDark = useDark() as Ref; diff --git a/vite.config.mts b/vite.config.mts index bea5cf9..6064878 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -45,6 +45,10 @@ export default defineConfig({ if (id.startsWith(nativeUiPath)) { return "naive-ui"; // https://github.com/tusen-ai/naive-ui/issues/6356 } + const vueUsePath = process.cwd() + "/node_modules/@vueuse/"; + if (id.startsWith(vueUsePath)) { + return "@vueuse"; // only locale files, but any way + } }, }, },