I have a static web site hosted in a bucket that I serve up via the Google Platform.

This site has been running with no problems for about 6 months but over the last month I have had intermittent problems with it not loading style sheets and scripts due to "Content Security" issues - this results in just the text of the main page appearing the browser with no style and no (Javascript based) functionality. By intermittent I mean it works OK for a couple of hours and then it fails for a couple of hours.

There is no "web server" for this service as such as I am just serving up static pages from a bucket - I understand that Google must have their own server that handles this though.

Checking the developer console in the browser I can see the following issues for all stylesheets, scripts and fonts that the web page uses:

Refused to load the stylesheet XXXXXXX because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback. 

I think I have got my Content Security settings correct:

   <meta http-equiv="Content-Security-Policy" content="
         default-src 'self'; 
         img-src 'self'
         font-src 'self'    
         script-src 'self' 'unsafe-inline'
         style-src 'self' 'unsafe-inline'
         frame-src 'self'   

These are the links that fail, each 'external' one includes signing with the imports to ensure that the "real" thing is loaded.

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <!-- Custom fonts for this template -->
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

Can anyone see what I am doing wrong or offer any advice on how to get this working consistently?


1 Answer 1


As it was suggested in the comment section by @Bruno this issue was already solved in this question. For better usability I'm copy-pasting (with links) two solutions that users confirmed worked;

Solution 1

<meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;">

Warning: This exposes the document to many exploits. Here's a detailed explanation about possible security risk and exploitation.

Solution 2

To elaborate some more on this, adding

script-src 'self' http://somedomain 'unsafe-inline' 'unsafe-eval';

to the meta tag like so,

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' https://somedomain.com/ 'unsafe-inline' 'unsafe-eval';  media-src *">

fixes the error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.