Menu
I am using MVC6 (asp.net 5) using angular and trying to load scripts from CDN locations when my code is running in release mode, but for some reason the scripts NEVER load.
I have read that you need to add a meta tag to your HTML file, which I have done, like so.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; style-src 'self' https://ajax.aspnetcdn.com; font-src 'self' http://netdna.bootstrapcdn.com" /> And on my Index.cshtml, I have got this.
<environment names="Staging,Production"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" asp-fallback-src="~/lib/angular/angular.min.js" asp-fallback-test="window.angular"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js" asp-fallback-src="~/lib/angular-ui-router/release/angular-ui-router.js" asp-fallback-test="window.angular && window.angularUiRouter"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js" asp-fallback-src="~/lib/angular-local-storage/dist/angular-local-storage.js" asp-fallback-test="window.angular && window.localStorage"> </script> But they never load. I have tried running the code using IISExpress and also using the DNX Web command.
I have this post which is how I come to creating the META tag, but not sure why it's not working. I have tried this in Chrome, and under the console, I just get errors like so
338
For example above, if we had the error message Refused to load the script 'https://cdn.mycompany.com/scripts.js' because it violates the following directive 'script-src' , we need to add "https://cdn.mycompany.com/script.js" to the "script-src" directive of the policy.
The Content Security Policy (CSP) prevents cross-site scripting attacks by blocking inline execution of scripts and style sheets. To solve this, move all inline scripts (e.g. onclick=[JS code]) and styles into external files. adding the hash or nonce of the inline script to your CSP header.
The HTTP Content-Security-Policy (CSP) script-src directive specifies valid sources for JavaScript. This includes not only URLs loaded directly into <script> elements, but also things like inline script event handlers ( onclick ) and XSLT stylesheets which can trigger script execution.
What does blocked:csp mean? You may be seeing blocked:csp in Chrome developer tools when the browser is trying to load a resource. It might show up in the status column as (blocked:csp) CSP stands for Content Security Policy, and it is a browser security mechanism.
Put the following in the web page header section:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com "> More details about Content Security Policy you can read here and here.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
