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

Answer 1

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 2

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.

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

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.