I'm creating a mobile application using Apache Cordova/Adobe Phonegap, and this code snippet was automatically generated. It's giving me this error in the Console inside Google Chrome.
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Open+Sans' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".
What exactly does this HTML meta element do?
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
Short answer: If you want the https://fonts.googleapis.com/css?family=Open+Sans stylesheet to be loaded by browsers instead of blocked, then change the content value of the meta element so that it looks like this:
<meta http-equiv="Content-Security-Policy"
content="default-src * 'unsafe-inline';
style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'; media-src *" />
That meta http-equiv="Content-Security-Policy" element provides a Content Security Policy that specifies some restrictions on what origin browsers can load the page assets from and what kinds of JavaScript and CSS content browsers will allow the page to specify inline.
As far as the specific part of those restrictions that’s relevant to the message you cite, it’s the restriction style-src 'self', which has the meaning “Only allow loading of external stylesheets from the same origin (same scheme+host+port) that the page is served from”.
So, because your page tries to load https://fonts.googleapis.com/css?family=Open+Sans—a stylesheet from a different origin than the page itself—and your meta http-equiv="Content-Security-Policy" includes a restriction that says “Don’t do that”, then browsers obey that restriction and refuse to load that stylesheet, and the message that you cite gets logged.