Reputation: 985
I have a working Aurelia SPA web app, but if I set in my web.config the Content-Security-Policy option like this
<add name="X-Content-Security-Policy" value="default-src 'none'; frame-src 'self'; script-src 'self' https://code.jquery.com; connect-src 'self' https://*.core.windows.net; img-src 'self' data:; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src https://fonts.gstatic.com 'self';"></add>
I get this error on page load
Uncaught (in promise) Error: (SystemJS) 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' https://code.jquery.com".
I loaded the page now using the unbundled version and the error I get is
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 'unsafe-inline' 'self' https://code.jquery.com".
Evaluating https://localhost/jspm_packages/npm/[email protected]
Error loading https://localhost/jspm_packages/npm/[email protected]
in the meantime I will investigate the SystemJS module loader further.
UPDATE
The error happens indeed in the SystemJS module loader, because in system.src.js it uses eval (plus a couple of 'new Function' definitions, but I don't come tho those lines of code. My question would then be: is there no way to work around this other than switching off the Content-Security-Policy (or allowing 'unsafe-eval')?
Upvotes: 1
Views: 1048
Reputation: 855
Aurelia fully supports Content Security Policy. If you are using SystemJS, you need to do the following changes to your index.html, compared to the getting started sample found in the Aurelia documentation:
Use the CSP compatible production build of SystemJS:
<script src="scripts/system-csp-production.js"></script>
Note that using the CSP version of SystemJS, you can only run bundled or it will not work. You probably want to use the line above in production only.
Create a file bootstrap.js with the following contents:
System.import("aurelia-bootstrapper");
and replace the same, inlined call in index.html with the following line:
<script src="scripts/bootstrap.js"></script>
Here is a relevant issue on the Aurelia project.
Upvotes: 2