ember-cli 0.0.47 升级后违反内容安全策略指令

Posted 2023-02-19

【中文标题】ember-cli 0.0.47 升级后违反内容安全策略指令

【英文标题】：Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

【发布时间】：2014-11-29 07:13:39

【问题描述】：

我将我的 ember-cli 应用程序升级到 0.0.47，现在我的浏览器控制台中出现了一堆与内容安全策略相关的错误。我该如何解决这个问题？

Refused to load the script 'http://use.typekit.net/abcdef.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
 login:1
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
 login:20
Refused to load the script 'http://connect.facebook.net/en_US/all.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
 login:1
Refused to load the script 'http://maps.googleapis.com/maps/api/js?libraries=places' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".

这是我的 app/index.html 文件中的行：

<script type="text/javascript" src="//use.typekit.net/abcdef.js"></script>
<script type="text/javascript">tryTypekit.load();catch(e)</script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

【参考方案1】：

在阅读了http://content-security-policy.com/ 和https://github.com/rwjblue/ember-cli-content-security-policy 的一些文档后，我在我的 config/environment.js 文件中添加了一些策略，如下所示：

module.exports = function(environment) 
  var ENV = 
    contentSecurityPolicy: 
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval' use.typekit.net connect.facebook.net maps.googleapis.com maps.gstatic.com",
      'font-src': "'self' data: use.typekit.net",
      'connect-src': "'self'",
      'img-src': "'self' www.facebook.com p.typekit.net",
      'style-src': "'self' 'unsafe-inline' use.typekit.net",
      'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com"
    ,

  // ...
;

这使所有直接错误都消失了，但是当我开始浏览我的应用程序时，出现了与 S3 媒体源相关的新错误。

我确信这适用于不包含任何外部资源的应用，但我决定从我的 package.json 文件中删除“ember-cli-content-security-policy”。

【讨论】：

我认为您需要以某种方式将 S3 列入白名单，但 API 对我来说仍然很不透明。

我们使用s3.amazonaws.com 将 s3 列入白名单，但是......我们在 Firefox 上遇到了奇怪的问题。 Chrome 似乎运行良好。

您可以允许所有使用通配符*。完整列表：content-security-policy.com/#source_list

只是一个更新，由于这些人体工程学问题，我们实际上已从默认安装中删除了 CSP。我们认为这实际上使问题变得更糟，我们确实希望（随着人体工程学的改进）将其恢复为默认插件。

我们引入了一些外部资源，并且还使用了强大的 CSP。所以它可以完成，但它也可能是很多工作。最好的安全措施是将所有内容列入黑名单，然后将您想要允许的内容列入白名单。不幸的是，这意味着要遍历每个外部资源并将它们一一列入白名单。带有* 或unsafe-eval 或unsafe-inline 的CSP 实际上是没有用的。而且你必须检查你运行的外部脚本加载的东西并将其列入白名单，而不仅仅是脚本本身，显然。

【参考方案2】：

从谷歌链接到字体时我不得不使用它：

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:400,700,900'>

在我使用的config/environment.js文件中

contentSecurityPolicy: 
  'font-src': "'self' data: fonts.gstatic.com",
  'style-src': "'self' 'unsafe-inline' fonts.googleapis.com"
,