chrome csp阻止了浏览器同步

Question

我有一个运行浏览器同步的任务。

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”，因为它违反了以下内容安全策略指令：“ default-src'self'”。请注意，未明确设置“ connect-src”，因此将“ default-src”用作后备。

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

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

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/ieelmcmcagommlceebfedjlakkhpden

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