Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

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
                In my case, I was trying to load jQuery to a website's webpage in Console, when I added the crossorigin attribute to the script element, my problem was resolved. crossorigin="anonymous"
– Shayan
                Sep 25, 2019 at 9:56
                "When you put 'unsafe-inline' in the script-src of a content security policy, you are effectively disabling the most important part of content security policy. Content Security Policy was built to combat Cross Site Scripting by requiring that you can only load javascript from a specifically trusted origins. But when you put in 'unsafe-inline' you are allowing javascript back into the HTML, which makes XSS possible again." csper.io/blog/no-more-unsafe-inline
– Avatar
                Jun 5 at 8:04
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.
                Please, read the two links I've posted in the answer as well - maybe in your case you should just add more web site addresses in the end to allow loading of javascripts from them. Actually, as I can see from your screenshot - you definitely should add all the external websites there.
– drcolombo
                Jan 18, 2016 at 11:20
                Nope, no matter what i type in the header, it seems to error.  Maybe this is something wrong with asp.net5, or angular.  I cant even load fontawesome images either, and i have added img-src 'self' * data: ;
– Gillardo
                Jan 20, 2016 at 9:42
                This helped me - please bear in mind that you have to put in correct protocol as well - so in case of the OP https://cdnjs.cloudflare.com
– eithed
                Jul 17, 2017 at 10:45
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.
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 ">
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.