1

我正在使用 Apache Cordova/Adobe Phonegap 创建一个移动应用程序，并且此代码片段是自动生成的。它在 Google Chrome 内的控制台中给了我这个错误。

拒绝加载样式表“ https://fonts.googleapis.com/css?family=Open+Sans ”，因为它违反了以下内容安全策略指令：“style-src 'self' 'unsafe-inline'”。

meta这个 HTML元素究竟做了什么？

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

2 回答 2

2

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

<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"元素提供了一个内容安全策略，它指定了对哪些源浏览器可以加载页面资产以及哪些类型的 JavaScript 和 CSS 内容浏览器允许页面指定内联的一些限制。

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

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

于 2016-08-20T13:09:32.657 回答
1

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

在此处阅读有关<meta>标签的更多信息。

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

于 2016-08-20T02:21:28.490 回答