What exactly does the http-equiv value 'Content-Security-Policy' do?

Question

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 *" />

Answer 1

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 *" />

---

Longer explanation

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.

Answer 2

The <meta> tag provides Metadata (data about data) about the Web page. It's not displayed on the page, but it is parsed through by the browser.

Read more about the <meta> tag here.

Regarding the Meta tag in question, the Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code to your site, as worded from this answer.