adopted-ember-addons / ember-cli-hot-loader

An early look at what hot reloading might be like in the ember ecosystem
MIT License
99 stars 13 forks source link

Error when used in conjunction with a restrictive Content-Security-Policy #69

Closed localpcguy closed 6 years ago

localpcguy commented 6 years ago

When the plugin tries to execute the Ember.HTMLBars.compile function, a CSP (Content-Security-Policy) that does not allow 'unsafe-eval' will block the JS execution with the following error

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 ...

I worked around it by adding the following line in the development section of my config/environment.js file:

    // Allow unsafe eval on dev environment
    ENV.contentSecurityPolicy['script-src'].push("'unsafe-eval'");

This appears to be due to the way the compile function works (new Function) and not something specific to the plugin, but wanted to document the error

toranb commented 6 years ago

@localpcguy interesting find - think this is something we should add to the README? I'm unsure how common this unsafe-eval CSP setting is myself. If you think so I'd gladly welcome a PR to the readme explaining this workaround for starters :)

localpcguy commented 6 years ago

If someone is using a CSP, they should most definitely have unsafe-eval as one of the things they block (otherwise it kind of defeats the purpose of the CSP). I feel this would happen fairly often.

I'll see about putting the PR together to put the workaround in the README.

Alternatively, would it work to have the addon push the unsafe-eval to the ENV.contentSecurityPolicy['script-src'] via the Addon initialization? I'm not familiar enough with the addon lifecycle to know if that is possible, but I could attempt to make that work if that would be better (then it would "just work", although it still should be communicated that it is happening via the README).

toranb commented 6 years ago

@localpcguy because this addon only supports development environments I'm considering this option. If I had to guess this would be the spot to hook in and alter the configuration to "push" unsafe-eval as you suggest. You mind trying this locally to see if it does indeed work "out of the box" ?

https://github.com/toranb/ember-cli-hot-loader/blob/master/index.js#L23

Appreciate the help here!

localpcguy commented 6 years ago

I try and take a look this weekend,

localpcguy commented 6 years ago

I gave it a shot, but it looks like changes to the config at this point don't get shared globally or ember-cli-content-security policy copies the app config prior to it being changed - do the addons make a copy of the app config rather than referencing the object directly? I can make the change but when ember-cli-content-security-policy loads it looks like it references the original app config, and it doesn't have the update made to it.

I did tell ember-cli-hot-loader to run before ember-cli-content-security-policy (via package.json) and logs seem to confirm the correct order, but that didn't seem to make a difference.

Any thoughts or suggestions? If not, I'll can still make the README update to inform people of the needed updates for now.

toranb commented 6 years ago

@localpcguy no worries - if we can't modify it that is likely for good reason ;)

One example - some addon author adds/or edits a config value ... then your app boots and you don't see X/Y/Z and to find out why would be non trivial (you would need to search thru all of your addons and reason about what they do/ learn if they hack the config object). Lets go w/ a README option if you've still got time this week ;)

thanks for taking the time to give this a go !