http-equiv 值 'Content-Security-Policy' 到底有什么作用？

Question

我正在使用 Apache Cordova/Adobe Phonegap 创建一个移动应用程序，此代码片段是自动生成的。它在 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'".

这个 HTML meta 元素到底有什么作用？

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

Answer 1

<meta> 标签提供关于网页的Metadata（关于数据的数据）。它不会显示在页面上，但会被浏览器解析。

详细了解 <meta> 标签 here。

关于有问题的元标记，Content-Security-Policy 元标记允许您定义可以从何处加载资源，从而防止浏览器从任何其他位置加载数据，从而降低 XSS 攻击的风险位置。这使得攻击者更难向您的网站注入恶意代码，如答案中所述。

Answer 2

简短回答：如果您希望 https://fonts.googleapis.com/css?family=Open+Sans 样式表被浏览器加载而不是被阻止，请更改 meta 元素的 content 值，使其看起来像这样:

<meta http-equiv="Content-Security-Policy"
    content="default-src * 'unsafe-inline';
    style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'; media-src *" />

更长的解释

那个 meta http-equiv="Content-Security-Policy" 元素提供了一个 Content Security Policy，它指定了一些限制，这些限制限制了哪些源浏览器可以从中加载页面资源以及哪些类型的 JavaScript 和 CSS 内容浏览器将允许页面指定内联。

至于与您引用的消息相关的那些限制的特定部分，它是限制 style-src 'self'，其含义是“只允许加载来自相同来源的外部样式表（相同方案+主机+端口）从中提供页面。

所以，因为您的页面试图加载 https://fonts.googleapis.com/css?family=Open+Sans——来自与页面本身不同来源的样式表——并且您的 meta http-equiv="Content-Security-Policy" 包含一个“不要那样做”的限制，然后浏览器会遵守该限制并拒绝加载该样式表，并且您引用的消息会被记录下来。

http-equiv 值 'Content-Security-Policy' 到底有什么作用？

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

html

meta

cordova

content-security-policy

http-equiv

更长的解释