Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

because it violates the following Content Security Policy directive: "style-src 'self'"

I have a webpage with this header.

It's a non interactive page with just twitter bootstrap js.

<head>
    <title>Versions: unknown bl version vs. 1.0.487 [flavor: HISTORIC_TIME]</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script type="script" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <link rel="icon" href="/jenkins/view/QA/job/RoutingRegression/ws/src/main/resources/html_pages/images/favicon.png" type="image/gif" sizes="16x16">
</head>

enter image description here

I saw some posts on stackoverflow but couldn't understand how to fix this.

Refused to load the stylesheet 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self'".

landing_page.html:1 Refused to load the stylesheet 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css' because it violates the following Content Security Policy directive: "style-src 'self'".

I tried to change the <meta> to

<meta content="text/html; charset=utf-8 ;script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';" http-equiv="content-type">

enter image description here

but it didn't help

any idea?

like image 257
Elad Benda Avatar asked Jan 26 '16 13:01

Elad Benda


2 Answers

Try splitting out the CSP into a separate tag and add a style-src reference, like this:

<meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval'; style-src 'self' maxcdn.bootstrapcdn.com"> 

This should say that you trust styles coming from maxcdn.bootstrapcdn.com.

Great explanation of Content Security Policy is at http://content-security-policy.com/

like image 123
Rob Imig Avatar answered Oct 06 '22 21:10

Rob Imig


Add Content-Security-Policy meta tag to your header, like so:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.bootstrapcdn.com">

It will allow you to load content such as JavaScript, Images, CSS, Fonts, AJAX requests, Frames and HTML5 Media from domain bootstrapcdn.com.

If you still have the same error report, the issue may lie in the framework you are using. I had similar problem with play framework 2.6.17, that has it's own Content-Security-Policy headers enabled by default, fixed with:

play.filters.headers.contentSecurityPolicy="default-src 'self' *.bootstrapcdn.com"
like image 40
German Amvrossiev Avatar answered Oct 06 '22 22:10

German Amvrossiev