浏览器同步被 chrome csp 阻止答案

【问题标题】：browser-sync is blocked by chrome csp浏览器同步被 chrome csp 阻止
【发布时间】：2015-07-25 19:50:20
【问题描述】：

我有一个运行 browsersync 的 gulp 任务。

var options = {
        proxy :          'localhost:9000/html' ,
        port :           3000 ,
        files :          [
            config.root + config.srcPaths.htmlBundle ,
            config.htmlRoot + 'main.css' ,
            '!' + config.htmlRoot + '**/*.scss'
        ] ,
        injectChanges :  false ,
        logFileChanges : true ,
        logPrefix :      'broserSync ->' ,
        notify :         true ,
        reloadDelay :    1000
    };
browserSync( options );

browsersync 检测到更改并尝试注入它们，但 chrome 阻止它并出现此错误：

拒绝连接 'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA' 因为它违反了以下内容安全政策指令： “默认源代码‘自我’”。请注意，未明确设置“connect-src”，所以'default-src'被用作后备。

未捕获 SecurityError：无法构造“WebSocket”：拒绝连接到 'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA' 因为它违反了文档的内容安全政策。

我该如何克服这个问题？我可以关闭安全策略吗？

【问题讨论】：

标签： google-chrome gulp content-security-policy browser-sync

【解决方案1】：

或者您可以将规则添加到主 html 文件（例如 index.html）中的内容安全策略中，以接受来自浏览器同步的 Web 套接字连接。您可以通过将ws://localhost:* 添加到您的default-src 来做到这一点，例如：

<meta http-equiv="Content-Security-Policy"
      content="
        default-src 'self' ws://localhost:*">

您还可以像这样指定确切的浏览器同步端口：

<meta http-equiv="Content-Security-Policy"
      content="
        default-src 'self' ws://localhost:3000">

请记住在发布到生产服务器之前将其从策略中删除！

【讨论】：

是的，更准确地说，您可以使用connect-src 指令将仅限于 xhr、websockets 和 sse。
这在这个时候不再起作用了。 2019 年 9 月。
您可能想要使用更具体的指令connect-src。 default-src 只是备用，font-src、script-src 等也共享。
另外，如果你使用的是 TLS，那么它更像是wss://localhost:3001，我今天注意到了额外的 S。
对不起@ngryman 我应该先阅读你的评论！

【解决方案2】：

不确定这是否是最好的解决方案，但我最终做的是安装一个禁用 csp 的 chrome 插件：

https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden

如果有人有更好的解决方案，我会很高兴听到它。

【讨论】：

虽然作者似乎可以接受这个答案，但这并不是最佳选择。扩展从您的开发环境中删除了安全错误和警告，因此如果您添加了一些 CSP 未启用的源，您可能会在很久以后遇到问题。 Maksymilian Majer 的回答更好。
这不适用于 gulp 3.9 和 react 16.9（只是一些好的信息）

【解决方案3】：

如果在 html 元标记中设置了 CSP，那么稍微不那么难看的解决方案是让浏览器同步自行禁用它。在浏览器同步配置中添加这样的内容应该可以解决问题：

rewriteRules: [
  {
      match: /Content-Security-Policy/,
      fn: function (match) {
          return "DISABLED-Content-Security-Policy";
      }
  }
],

如果你真的很聪明，你可以注入正确的 CSP 规则来允许浏览器同步完成它的工作。也许一个勤奋的人最终会写一个插件来做到这一点？

【讨论】：

到目前为止，这似乎是最好的解决方案。我从命令行和 gulp 都使用浏览器同步，并且使用 bs-config.js 进行重写似乎不像 hack 并且更容易维护。
我最喜欢这个解决方案，但是我没有完全禁用 CSP，而是使用匹配/替换来更新规则。 rewriteRules: [ { match: "connect-src 'self'", replace: "connect-src ws: 'self'" } ]
这在这个时候不再起作用了。 2019 年 9 月。