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

Question

我把我的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">try{Typekit.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>

- Peter Brown

Answer 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”。

- Peter Brown

---

我认为你需要以某种方式将S3列入白名单，但是API对我来说仍然相当不透明。 - Sam Selikoff

我们在白名单中加入了s3.amazonaws.com，但是在Firefox上出现了奇怪的问题。Chrome看起来运行良好。 - ToddSmithSalter

您可以使用通配符 * 允许所有内容。完整列表请参见：http://content-security-policy.com/#source_list - lima_fil

仅仅是一个更新，由于人机交互的问题，我们已经将 CSP 从默认安装中移除。我们认为它实际上使问题变得更加严重，但随着人机交互的改善，我们希望能够将其作为默认的附加组件重新启用。 - Stefan Penner

我们引入了许多外部资源，并且使用了强大的 CSP。所以这是可行的，但也可能需要大量的工作。最好的安全措施是将所有东西列入黑名单，然后再将您想要允许的内容列入白名单。不幸的是，这意味着必须逐个检查每个外部资源并将其列入白名单。带有 *、unsafe-eval 或 unsafe-inline 的 CSP 实际上是无用的。而且您必须检查和列入白名单由您运行的外部脚本加载的内容，而不仅仅是脚本本身，这是显而易见的。 - LocalPCGuy

Answer 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"
},

- superlogical