9

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

Mike Szyndel
  • 10,461
  • 10
  • 47
  • 63
Elad Benda
  • 35,076
  • 87
  • 265
  • 471
  • Are you using a JS framework or something that's enforcing a CSP? Here's more info on how to implement one: http://www.html5rocks.com/en/tutorials/security/content-security-policy/#source-whitelists – Patrick Berkeley Jan 26 '16 at 13:40
  • Can you tell us about your server, what you're running on the client, etc.? It could be a number of different things, we need to narrow them down. –  Jan 26 '16 at 13:41
  • when I run locally, the css appears – Elad Benda Jan 26 '16 at 14:19
  • @rac It's a non interactive page with just twitter bootstrap js. – Elad Benda Jan 26 '16 at 14:22
  • If you are serving this content from Jenkins (as described in your [similar next question](http://stackoverflow.com/q/35018767/172599)), then the issue is with the default Content Security Policy of Jenkins. If Jenkins was recently upgraded, that could explain why it used to work and no longer does. – Dave Bacher Jan 27 '16 at 07:28

3 Answers3

11

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/

Rob Imig
  • 496
  • 4
  • 10
  • 3
    why has this happened to me all the sudden and used to work till yesterday? – Elad Benda Jan 26 '16 at 15:57
  • it didn't help. see photos: [1]: http://i.stack.imgur.com/CMzrJ.png [2]: http://i.stack.imgur.com/R7FUm.png – Elad Benda Jan 26 '16 at 16:27
  • hard to know without all your code, take a look at http://stackoverflow.com/questions/30280370/how-does-content-security-policy-work – Rob Imig Jan 26 '16 at 21:29
2

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"
DarkSuniuM
  • 2,523
  • 2
  • 26
  • 43
German Amvrossiev
  • 21
  • 2
0

You can't use CDN for js, you will have to copy the content of "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" and create a new file inside your js directory and call it bootstrap.min.js and paste everything in it, then in your HTML file header remove the line that has this URL in it and use this one instead

<script src="js/jquery.min.js"></script>

Make sure that this is the write path for the file that contains all the data in the mentioned url

Regards

JetSet
  • 189
  • 1
  • 2
  • 10