Parcel: 🐛 CSP 'unsafe-eval' not allowed

[embiem]

In my packaged non-minified build, there are eval calls, which yield the following EvalError in my specific use case, where 'unsafe-eval' Content Security Policy is not allowed.

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'

Is there any way I can fix unsafe eval calls, e.g. using a custom packager?

My deps:

  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "mo-js": "^0.288.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "uiw": "^1.5.3",
    "uiw-iconfont": "^1.2.6"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^3.5.1",
    "less": "^2.7.3",
    "node-sass": "^4.7.2",
    "parcel-bundler": "^1.2.0",
  }

.babelrc

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
}

For further context:

The application runs in an iframe with the following sandbox values:

sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"

Thank you!

[davidnagli]

What command are you using to build you’re app? Is it just parcel [entry] or is it parcel build [entry]?

[embiem]

I'm using parcel build index.html --no-minify --public-url ./

[embiem]

To further elaborate: These unsafe eval calls in the bundle look like this: var global = (1,eval)("this");

I also don't really understand the purpose of this. Why is assigning global like this needed and how does the above mentioned expression work?

//edit: regarding "how does the above mentioned expression work" -> link

//edit2: While browsing through the packaged build, I found this very interesting part, which appears to originate from Facebook's regenerator source code. I will try messing with the packaged build and use this instead of the above mentioned unsafe eval to get the global:

  // Among the various tricks for obtaining a reference to the global
  // object, this seems to be the most reliable technique that does not
  // use indirect eval (which violates Content Security Policy).
  typeof global === "object" ? global :
  typeof window === "object" ? window :
  typeof self === "object" ? self : this

[embiem]

I can confirm, that swapping all occurrences of

var global = (1,eval)("this");

with

typeof global === "object" ? global :
typeof window === "object" ? window :
typeof self === "object" ? self : this

in the packaged build's JavaScript files will fix the CSP issue.

The question is now whether this is an issue with parcel or another dependency.

[devongovett]

Closing in favor of PR #353.