Google Cloud Services Content Security Policy Issues
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'
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;
">
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?
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.