store: Content Security Policy - EvalError due to new Function() call

Versions

* ngxs: 3.1.4
* @angular/core: 6.0.9

Repro steps

Repo to reproduce: Github: https://github.com/thomas-burko/ngxs-csp

Or add the following meta tag in the index.html in the integration directory of this repo:

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

https://github.com/ngxs/store/blob/master/integration/index.html

Start the app
Look at dev console

Observed behavior

list-list-module-ngfactory.js:33 ERROR 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'".

    at new Function (<anonymous>)
    at fastPropGetter (internals.ts:131)
    at createSelector (select.ts:47)
    at ListComponent.get [as list$] (select.ts:66)
    at Object.updateRenderer (list-list-module-ngfactory.js:36)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:10782)
    at checkAndUpdateView (core.js:10158)
    at callViewAction (core.js:10394)
    at execComponentViewsAction (core.js:10336)
    at checkAndUpdateView (core.js:10159)

Desired behavior

Library should still work with strict Content Security Policy.

Mention any other details that might be useful (optional)

Link to new Function() call

https://github.com/ngxs/store/blob/82b94942dd2d5dec2aaab355ea3e150bd2516d86/packages/store/src/internal/internals.ts#L129

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 25 (17 by maintainers)

Most upvoted comments

@anto1990 @cegjohnny @michael42 @thomas-burko I have just submitted a PR to allow for a config setting to override the non-compliant behavior. The fix wasn’t that difficult. Unfortunately this issue flew under my radar. The slack channel is a good place to bump your issue if it is getting quiet. There are many helpful people there. Once the PR is merged you would have to use the dev version of the package. Then you would need to set a compliance option in your root config like this:

NgxsModule.forRoot([
    ZooState
  ], {
    compatibility: {
      strictContentSecurityPolicy: true
    }
  })

Would it be at all possible to try this out?

markwhitfeld on Sep 13, 2018

Maybe it’s not what you want to achieve, but you could use: <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval'">

eranshmil on Jul 21, 2018

Hehe. I think you tagged the wrong mark 😉 @anto1990 I don’t see any reason why the PR won’t be merged soon. This is also not a temporary solution because we would want the default behavior to use the really fast selector code that violates strict CSP. I think that this makes sense to be a compatibility setting for those that want strict CSP.

markwhitfeld on Sep 13, 2018

@eranshmil Have you configured your project as described here: https://github.com/ngxs/store/issues/516#issuecomment-421163416

NgxsModule.forRoot([
    ZooState
  ], {
    compatibility: {
      strictContentSecurityPolicy: true
    }
  })

markwhitfeld on Nov 6, 2018

Sorry I miss read your last comment. That was quick. Thats great @markwhitfeld. Very fast thanks. If that pr can be merged I would definitely stick with this library. I didnt want to pick any other solution.😃

ghost on Sep 13, 2018