google-chrome - 浏览器同步被 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 检测到更改并尝试注入(inject)它们，但 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

或者您可以在主 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">

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