Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

with-strict-csp example fails with CSP related errors #61316

Closed
1 task done
frankimhof opened this issue Jan 29, 2024 · 2 comments · Fixed by #55998
Closed
1 task done

with-strict-csp example fails with CSP related errors #61316

frankimhof opened this issue Jan 29, 2024 · 2 comments · Fixed by #55998
Assignees
@samcx
Labels
examples Issue/PR related to examples linear: next Confirmed issue that is tracked by the Next.js team. locked

Comments

@frankimhof
Copy link

frankimhof commented Jan 29, 2024 •
edited by padmaia
Loading

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:28:31 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8112
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.11.0
Relevant Packages:
  next: 14.1.1-canary.20 // Latest available version is detected (14.1.1-canary.20).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which example does this report relate to?

with-strict-csp

What browser are you using? (if relevant)

brave 1.62.153

How are you deploying your application? (if relevant)

No response

Describe the Bug

Running the with-strict-csp example app using pnpm run dev fails with the following errors in the browser console

Refused to load the script 'https://.../' because it violates the following
Content Security Policy directive:
"script-src 'self' 'nonce-YWMxYjA0ZTQtOGIyYS00MmY4LTk4YjctZjNjZTRiNTdkNGZl' 'strict-dynamic'".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Uncaught 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 'self' 'nonce-YWMxYjA0ZTQtOGIyYS00MmY4LTk4YjctZjNjZTRiNTdkNGZl' 'strict-dynamic'".

Expected Behavior

The app runs and the page loads.

To Reproduce

  1. Download the example pnpm create next-app --example with-strict-csp with-strict-csp-app
  2. Install dependencies pnpm i
  3. run in developer mode pnpm run dev
  4. Visit localhost:3000 in your browser and see the browser console output

NEXT-2739
@frankimhof frankimhof added the examples Issue/PR related to examples label Jan 29, 2024
@samcx samcx added the linear: next Confirmed issue that is tracked by the Next.js team. label Mar 7, 2024
@samcx samcx mentioned this issue Mar 11, 2024
Merged
@samcx samcx self-assigned this Mar 11, 2024
samcx added a commit that referenced this issue Mar 11, 2024
@sleepdotexe @samcx
Allow unsafe-eval during development (#55998)
c703fae 
Fixes issue where a freshly cloned example will not work in development
mode due to `unsafe-eval` being blocked by the CSP.

Currently, the example will not work in development. Running the example
with `run dev` will produce EvalError errors in console which prevent
the app from functioning. This error also prevents any `<Script>`
components with `afterInteractive` from being loaded. These issues do
not occur in production where `eval` is not used.

This PR:
- Fixes the issue by allowing `unsafe-eval` if the environment is not
`production`.
- Improves the `script-src` value by [allowing backwards compatibility
with
browsers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic)
that do not support `strict-dynamic` (`https: http: 'unsafe-inline'`
will be ignored by browsers that support `strict-dynamic`).

Some further details are available here:
#55638. This PR is not a fix for
the issue however.

- Fixes #61316

Co-authored-by: Sam Ko <sam@vercel.com>
@samcx
Copy link
Member

samcx commented Mar 11, 2024

@frankimhof I think the first error just requires an working URL. The 2nd one had a :pr: that was merged, so just need to wait for the next release!

@github-actions GitHub Actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@samcx samcx

Labels
examples Issue/PR related to examples linear: next Confirmed issue that is tracked by the Next.js team. locked
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow unsafe-eval during development sleepdotexe/next.js
2 participants
@samcx @frankimhof