浏览器同步被 chrome csp 阻止 [英] browser-sync is blocked by chrome csp
问题描述
我有一个运行 browsersync 的 gulp 任务.
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 检测到更改并尝试注入它们,但 chrome 阻止它并出现此错误:
browsersync detects changes and tries to inject them but chrome blocks it with this error:
拒绝连接'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA'因为它违反了以下内容安全政策指令:默认源代码‘自我’".请注意,未明确设置connect-src",所以'default-src'被用作后备.
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.
未捕获SecurityError:无法构造WebSocket":拒绝连接到'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA'因为它违反了文档的内容安全政策.
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?
推荐答案
或者您可以在主 html 文件(例如 index.html)中向内容安全策略添加规则,以接受来自浏览器同步的 Web 套接字连接.您可以通过将 ws://localhost:*
添加到您的 default-src
来做到这一点,例如:
Or you can add rules to your content security policy in the main html file (ex. index.html) to accept web socket connections from browser-sync. You can do it by adding ws://localhost:*
to your default-src
, for example like that:
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' ws://localhost:*">
您还可以像这样指定确切的浏览器同步端口:
You can also specify the exact browser-sync port like that:
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' ws://localhost:3000">
请记住在发布到生产服务器之前将其从策略中删除!!
Just remember to remove this from policy before publishing to production servers!!
这篇关于浏览器同步被 chrome csp 阻止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!