[BUG] CSP error about 'unsafe-eval' appearing during page.waitForNavigation

[daddyman]

Context:

• Playwright Version: 1.24.2
• Operating System: Windows and Linux
• Node.js version: 16.16.0
• Browser: Chromium
• Extra: [any specific details about your environment]

System:

• OS: Windows 10 10.0.22000
• Memory: 17.22 GB / 31.64 GB

Binaries:

• Node: 16.16.0 - ~\AppData\Local\nvs\node\16.16.0\x64\node.EXE
• Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
• npm: 8.11.0 - ~\AppData\Local\nvs\node\16.16.0\x64\npm.CMD

Languages:

• Bash: 5.1.16 - C:\Windows\system32\bash.EXE

Code Snippet

This example from #7395 comment fails with the message that I am seeing on some of my tests. My web application does have a CSP.

The error message is: page.waitForFunction: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src github.githubassets.com".

const playwright = require('playwright');

const browser = playwright.chromium.launch()
    .then(async (browser) => {
        const page = await browser.newPage();
        await page.goto('https://github.com/topics/javascript');
        const bool = await page.waitForFunction(() => {
            const repoCards = document.querySelectorAll('article.border');
            return repoCards.length > 30;
        })
        console.log(bool);
        await browser.close();
    })

Describe the bug

After updating zone.js npm package from 0.11.4 to 0.11.7 in my Angular 12 application the following error message happens in quite a few tests when running Playwright. The application itself works but the Playwright tests fail.

page.waitForFunction: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".

There is a previous issue #7395 that was closed but a reproduction was added after it was closed.

[rwoll]

The CSP is working as intended here. If the CSP is getting in the way of your scripts, you can set the bypassCSP Playwright option.

NB: If you're using @playwright/test you can additionally replace your entire waitForFunction line(s) with a Web-First assertion toHaveCount.