Question: CSP about framework

[EisenbergEffect]

This is a good question. Aurelia itself makes no use of eval or new Function() at all in its source code. That's very intentional in order to support exactly what you are talking about. However, I'm not 100% sure about the polyfills we are using or about system.js. I believe there is a CSP compliant build of system.js. So, perhaps if you use that in combination with Aurelia it will work.

In any case, the problem wouldn't be directly in our code, but might exist in some of the other libraries. I would very much love for you to "give it a try" and report back to us. If we need to fix any issues we will certainly do that. We may also be able to help advocate for fixes in other libraries if the problems live there.

Please let us know!

[pkkummermo]

Willdo. I'll see what I can put together tonight :) In terms of Chrome Packaged Apps there's only need to support Chrome so my guess is that certain polyfills will not be needed. I'll do a quick test and see what comes up.

Had to do 2 changes to get CSP working.

1. Change

<script>
    System.import('aurelia-bootstrapper');
</script>

to

<script src="bootstrap.js"></script>

otherwise, unsafe-inline is required. No big deal.

1. system.js requires unsafe-eval. Seems pretty essential to the loader.

After that, the following CSP header works fine for us:

Content-Security-Policy: default-src 'self' ws: wss; script-src 'self' 'unsafe-eval'; font-src 'self' data: fonts.googleapis.com fonts.gstatic.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data:; frame-src; sandbox allow-forms allow-scripts allow-same-origin;

[Jfy6Y3TtV698a646]

Obviously the exact modules that get bundled, and the functionality used may have varying requirements, but I found that if I swapped to the CSP version of system, and (as above) moved the import to a separate js file, I could get Aurelia up and running with a clean CSP configuration:

index.html

<script src="scripts/jspm_packages/system-csp-production.js"></script>
<script src="scripts/jspm_config.js"></script>
<script src="scripts/app-bootstrap.js"></script>

HTTP header

Content-Security-Policy: default-src 'self'

[theDogOfPavlov]

For the current aurelia-cli build that uses require instead of jspm, the following CSP seems to work fine out of the box (though may need to be varied depending on the modules you call and the external resources you access):

Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline'

[mryellow]

Not sure where this appears in the framework, but is one area which triggers a default style-src policy violation.

injectStyles
...
destination.appendChild(node);

For Google Tag Manager based analytics and fonts this seems to work:

default-src 'self'; connect-src 'self' ws:; script-src 'self' www.googletagmanager.com www.google-analytics.com 'sha256-Abb4VEVedds9NWypVyA7pYkisbm21wnlrkPGVR64oHE=' 'sha256-GKWAMtgBzlCzmucztJIeDl/kD0MKNqAT5HDcFIff2+A='; img-src 'self' www.google-analytics.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.gstatic.com;

Hashes are for the tag manager block and browsersync. With ws: also for browsersync.

Then for the above injectStyles issue:

style-src ... 'unsafe-inline'

[EisenbergEffect]

It is coming from the "show" behavior in templating-resources. We are open to making changes, just submit a PR and we can review.

[raugustinus]

It is coming from the "show" behavior in templating-resources. We are open to making changes, just submit a PR and we can review.

Am I right to assume this is still an issue?

[bigopon]

@raugustinus this is still an issue. I think to properly support this, we need to make the CSS class for hidden style configurable