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

[thomas-burko]

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

[eranshmil]

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'">

[michael42]

I think it's the same issue as #439, which happens for me since 3.2.0 even without using @ngxs/router-plugin.

[cegjohnny]

I have the same issue and I'm not using the @ngxs/router-plugin either

[ghost]

Has there been any update on this. This is also happening for me. Can sanitize the string?

[cegjohnny]

This issue is what forced my company to drop NGXS. It doesn't pass muster in a HIPAA compliant scenario. It is such a good library besides this problem. I had to go back to NGRX and punched myself in the face the entire time...

[ghost]

This is the same for my company. We spent long time considering this and now we have to drop this library because of this. Definitely a cool library other than that

[markwhitfeld]

@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?

[ghost]

@MarkHerhold is this something that will be fixed soon? It maybe a very short temporary solution until its fixed

[markwhitfeld]

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.

[ghost]

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

[markwhitfeld]

There is a new @dev version published with this fix in it.
@anto1990 @cegjohnny @michael42 @thomas-burko
Please could one of you test it out.

[markwhitfeld]

@thomas-burko could you confirm that this is fixed for you with the @dev version?
See comment above for instructions.

[markwhitfeld]

@anto1990 Maybe you could test too?

[michael42]

Oh, just noticed the fix, tried it out (3.2.0-dev.master-a9b3e76) and it worked perfectly for me. Thanks for fixing this, now I can remove my custom patch to fastPropGetter.

[markwhitfeld]

Great. Thanks for confirming @michael42
I'm closing the issue

[eranshmil]

Tested with my own project and I think this isn't fixed yet.
Still getting the same error.

@ngxs: 3.2.0-dev.master-fd4bd6b
@angular: 7.0.2

[splincode]

@markwhitfeld ping

[markwhitfeld]

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

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

[eranshmil]

Yeah, here is a repro:
https://stackblitz.com/edit/ngxs-csp

[markwhitfeld]

@eranshmil I think that this could be StackBlitz that is failing here. Have you tried it outside stackblitz?

[eranshmil]

Yeah, tested on my local environment before I created this stackblitz.

[markwhitfeld]

@eranshmil Ok, fixed this issue in @dev version. Please test and confirm if it is fixed.

[eranshmil]

@markwhitfeld
Still not working with JIT.
After reading a lot of issues, I came to the conclusion that this might cannot be working without using AOT.
Since angular 7, core-js/es7/reflect polyfill could be removed and it will be fixed for builds using AOT.
When AOT is not used, the polyfill is automatically added.

References:
https://github.com/angular/angular-cli/issues/6872
https://github.com/Chocobozzz/PeerTube/issues/1190
https://github.com/angular/angular-cli/pull/12346

[markwhitfeld]

@eranshmil Yes, the JIT issue is related to how Angular works and is therefore an Angular issue.
Can you confirm that it is working for you in AOT mode.

[eranshmil]

It's working with AOT enabled.