浏览器同步被 chrome csp 阻止

Question

我有一个运行 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 阻止它并出现此错误：

Refused to connect to 'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Uncaught SecurityError: Failed to construct 'WebSocket': Refused to connect to 'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA' because it violates the document's Content Security Policy.

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

Answer 1

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

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

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

Answer 2

或者您可以在 html 主文件（例如 index.html）中向您的内容安全策略添加规则，以接受来自浏览器同步的网络套接字连接。您可以通过将 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">

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

Answer 3

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

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

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

浏览器同步被 chrome csp 阻止

browser-sync is blocked by chrome csp

google-chrome

gulp

content-security-policy

browser-sync