浏览器同步被chrome csp阻止 [英] browser-sync is blocked by chrome csp

问题描述

  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  - > '，
通知：true，
 reloadDelay：1000 
}; 
 browserSync（options）; 
  

浏览器同步检测到更改并尝试注入它们，但chrome用此错误阻止它：

拒绝连接到
'ws：// localhost：3000 / browser-sync / socket.io /？EIO = 3& transport = websocket& amp ; sid = gOQQPSAc3RBJD2onAAAA'
，因为它违反了以下内容安全策略指令：
default-src'self'。请注意，'connect-src'没有明确设置，
所以'default-src'被用作后备。

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

我怎样才能克服这个问题？我可以关闭安全政策吗？

解决方案

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

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

如果有人有更好的解决方案，我很乐意听到它。

I have a gulp task that runs browsersync.

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 detects changes and tries to inject them but chrome blocks it with this error:

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.

How can i overcome this issue? Can i turn off the security policy?

解决方案

Not sure if it's the best solution, but what i ended up doing is to install a chrome plugin that disables the csp:

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

If anyone has a better solution i'll be glad to hear it.

这篇关于浏览器同步被chrome csp阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！