title: Google Cloud Services Intermittent Content Security Policy Issues
body: <p>I have a static web site hosted in a google-storage bucket that I serve up via the Google Platform.</p>
  
  <p>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.</p>
  
  <p>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. The failures occur no matter what browser the user is using and clearing the browser cache does not help so this issue is at the Google server end. </p>
  
  <p>Checking the developer console in the browser I can see the following issues for all stylesheets, scripts and fonts that the web page uses:</p>
  
  <blockquote>
  <pre><code>&gt; Refused to load the stylesheet XXXXXXX because it violates the
  &gt; following Content Security Policy directive: "default-src 'none'".
  &gt; Note that 'style-src-elem' was not explicitly set, so 'default-src' is
  &gt; used as a fallback.
  </code></pre>
  </blockquote>
  
  <p>I think I have got my Content Security settings correct:</p>
  
  <pre><code>   &lt;meta http-equiv="Content-Security-Policy" content="
           default-src 'self'; 
           img-src 'self'
              https://syndication.twitter.com;
           font-src 'self'    
              https://use.fontawesome.com
              https://fonts.gstatic.com
              https://fonts.googleapis.com;
           script-src 'self' 'unsafe-inline'
              https://stackpath.bootstrapcdn.com 
              https://connect.facebook.net
              https://platform.twitter.com
              https://code.jquery.com
              https://cdnjs.cloudflare.com; 
           style-src 'self' 'unsafe-inline'
              https://stackpath.bootstrapcdn.com 
              https://use.fontawesome.com 
              https://fonts.googleapis.com;
           frame-src 'self'   
              https://www.facebook.com
              https://connect.facebook.net
              https://platform.twitter.com
              https://www.youtube.com;
     "&gt;  
  </code></pre>
  
  <p>These are the links that fail, each 'external' one includes signing with the imports to ensure that the "real" thing is loaded.</p>
  
  <pre><code>&lt;!-- Bootstrap core CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;!-- Font Awesome --&gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"&gt;
  
  &lt;!-- Custom fonts for this template --&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'&gt;
  &lt;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'&gt;
  </code></pre>
  
  <p>Can anyone see what I am doing wrong or offer any advice on how to get this working consistently?</p>