browser-sync заблокирован chrome csp

Question

У меня есть задача 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 обнаруживает изменения и пытается внедрить их, но хром блокирует его с этой ошибкой:

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

Не уверен, что это лучшее решение, но то, что я в конечном итоге делает это установить хром плагин, который отключает ПСУ:

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

Если у кого есть лучшее решение, я буду рад слышать.

Answer 2

Или вы можете добавить правила в свою политику безопасности контента в основной файл html (например, index.html), чтобы принимать подключения к веб-сокерам из синхронизации браузера. Вы можете сделать это путем добавления 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 3

Если CSP установлен в метатеге html, то немного менее уродливое решение состоит в том, чтобы отключить эту синхронизацию браузера. Добавление что-то вроде этого в конфигурацию браузера синхронизации должно сделать трюк:

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

Если вы действительно умны вы могли бы придать правильную ПСУ правило, разрешающий браузер синхронизации сделать свой материал. Возможно, одна прилежная душа в конечном итоге напишет плагин, чтобы сделать именно это?