Refused to load the script because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'

Question

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

Answer 1

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 .

Answer 2

In my case, this policy is set via SecurityHeadersAttribute (this attribute is set in AccountController and some others).

Basically, this adds default policy in the headers that overwrite your meta tag. So you need to change this policy or remove the attribute from Controller.

Answer 3

If you want to workaround the issue, add the following in your application.conf file.

play.filters.disabled += "play.filters.headers.SecurityHeadersFilter"

Answer 4

Adding on the Accepted answer , I included the script-src-elem which was making my scripts not to load.

<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; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com ">

Answer 5

Manikandan C Why bother with a CDN? Do you really need it? What type of app/site is it? Are you dealing with GBs/TBs of Data where you cannot store the files locally? Are these static files heavy loading? I already noticed in your markup that you have a back up source if the CDN cannot be hit.

asp-fallback-src="~/lib/angular/angular.min.js"

So if your project is small, a local site or not load heavy, then, in my opinion, you really don't need a CDN. I think it'll just cause more problems for you like its doing now.As a solution, I would remove the meta tags.

I've worked on and continue to maintain multiple MVC-MVC5 applications and a few have CDNs in them but mostly to make sure if our local files aren't available for some reason, the CDN gets hit, although you do need to be diligent about the CDN getting compromised, which is another reason a CDN is not 100% the way to go. We never have any console errors like the ones that you posted and we also never put META tags in our Views. Dont believe everything you read. If you have nothing but static files, then a CDN makes sense. Important rule to remember is, if you have inline code in your html or any dynamic portions of code then the CDN gets called multiple times, therefore using it as a major resource doesnt make sense.