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会阻止它出现此错误：

拒绝连接   ＆＃39; WS：//本地主机：3000 /浏览器的同步/ socket.io / EIO = 3及运输=网页套接字＆安培; SID = gOQQPSAc3RBJD2onAAAA＆＃39;   因为它违反了以下内容安全策略指令：   ＆＃34; default-src＆＃39; self＆＃39;＆＃34;。请注意，＆＃39; connect-src＆＃39;未明确设定，   所以＆＃39; default-src＆＃39;用作后备。

未捕获的   SecurityError：无法构造＆＃39; WebSocket＆＃39;：拒绝连接   ＆＃39; WS：//本地主机：3000 /浏览器的同步/ socket.io / EIO = 3及运输=网页套接字＆安培; SID = gOQQPSAc3RBJD2onAAAA＆＃39;   因为它违反了文档的内容安全策略。

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

chrome csp阻止了browser-sync

3 个答案: