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

Use of eval in development mode violates Content-Security-Policy #6611

Closed
unindented opened this issue Mar 3, 2019 · 7 comments
Closed

Use of eval in development mode violates Content-Security-Policy #6611

unindented opened this issue Mar 3, 2019 · 7 comments

Comments

@unindented
Copy link

unindented commented Mar 3, 2019 •
edited
Loading

Version

4.4.0-beta.7

Test Case

CodeSandbox doesn't support adding CSP, but it would look like this:

<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline';" />
</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>

Steps to reproduce

Import react-router in some file, launch app in development mode.

Expected Behavior

Things loading fine with CSP enabled.

Actual Behavior

Browser blocks execution of react-router.js because it uses eval:

screen shot 2019-03-03 at 4 57 22 am

screen shot 2019-03-03 at 5 06 36 am

Is there a way of implementing your current logic without eval?
@unindented
Copy link
Author

(This issue wasn't present in 4.4.0-beta.6 btw.)

@emmenko
Copy link

emmenko commented Mar 5, 2019 •
edited
Loading

Having the same issue, I was about to report it as well. It was introduced here

https://github.com/ReactTraining/react-router/blob/b2c6fa0725b7ff1ed762064d633b26b6293e0140/packages/react-router/modules/index.js#L1-L20

@mjackson what was the reason for using eval?

@emmenko emmenko mentioned this issue Mar 5, 2019
Closed
emmenko added a commit to commercetools/merchant-center-application-kit that referenced this issue Mar 5, 2019
@emmenko
fix: pin react-router to 4.4.0-beta.6
f80c51a 
Ref: remix-run/react-router#6611
@emmenko emmenko mentioned this issue Mar 5, 2019
Merged
emmenko added a commit to commercetools/merchant-center-application-kit that referenced this issue Mar 5, 2019
@emmenko
fix: pin react-router to 4.4.0-beta.6 (#425)
63a45db 
* fix: pin react-router to 4.4.0-beta.6

Ref: remix-run/react-router#6611

* test(app-shell): update snapshot
@mjackson
Copy link
Member

mjackson commented Mar 9, 2019

Thanks for the report, @unindented. The purpose of using eval indirectly here is to get a reference to the global object. I'll try another method and cut a new beta release.

@mjackson
Copy link
Member

mjackson commented Mar 9, 2019

BTW, does anyone know what CSP Codesandbox actually uses?

@emmenko
Copy link

emmenko commented Mar 9, 2019

Thanks for fixing that! 💯

One small thing to clarify: it’s not just about codesandbox in particular but any app that uses a CSP in development mode.

Anyway, thanks again for looking into that 🤗

@mjackson
Copy link
Member

The fix for this was just released in 4.4.0-beta.8. Please give it a shot.

@emmenko You can still use CSP with eval, you just have to include 'unsafe-eval'

@unindented
Copy link
Author

@mjackson verified on my app, this is working perfectly. Thank you!

@lock lock bot locked as resolved and limited conversation to collaborators May 15, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@unindented @mjackson @emmenko