Content Security Policy errors with (Latest) Chrome browser cause Cannot Get error

Chrome Version 121.0.6167.161 (Official Build) (64-bit) on Windows 2016 DataCenter throws Content Security Policy (CSP) error.

Hope you don't mind me raising this - spent a few hours googling for a solution but not found. Feels like an issue with Chrome getting more focussed on security. Looked thru https://browsersync.io/ but no solution was obvious.

And BTW, Windows 2016 DataCenter is what you get from Amazon Workspaces whis is a cloud desktop solution. It is equiv to Windows 10 for practical purposes. Anyway the issue here is CSP rather than low-level code issues so I don't think this is a contributing factor.

The full error in the Chrome console is

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Bed9qzUU2IVkAAxp73fh88GAnMchALEvifOr4XcPQ/4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Failed to load resource: the server responded with a status of 404 (Not Found)

The source code in the browser is

<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body><script id="__bs_script__">//<![CDATA[
  (function() {
    try {
      var script = document.createElement('script');
      if ('async') {
        script.async = true;
      }
      script.src = '/browser-sync/browser-sync-client.js?v=3.0.2'.replace("HOST", location.hostname);
      if (document.body) {
        document.body.appendChild(script);
      } else if (document.head) {
        document.head.appendChild(script);
      }
    } catch (e) {
      console.error("Browsersync: could not append script tag", e);
    }
  })()
//]]></script>

<pre>Cannot GET /</pre>
</body>
</html>

The browser shows the Cannot GET / message.

The web page used for testing is totally minimal - no includes or other script files

<!DOCTYPE html>
<html lang="en">
  <head> 
 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
 
  </head>
  <body>
    <main>
        <h1>Hello from TS</h1>  
    </main>

  </body>
</html>

It appears that Chrome does not like inline scripts. Is it possible to set CSP headers via browser-sync config ?

Steps to reproduce/test case

No possible in this case - you need Chrome / the issue surfaces in the browser.

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 3.0.2 ]
Node [ 18.16.0 ]
Npm [ 9.1.2 ]

Affected platforms

Browsersync use-case

API
Gulp
Grunt
[ X ] CLI

If CLI, please paste the entire command below

This is the scripts section of the package.json file.

"scripts": {
    "browsersync": "npx browser-sync start --server 'public' --files 'public'"
  },

Added sample minimal html file.

I'm having the same error.

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-d/yERybm6Vg1oK5uXfPNUtFdLqpjo+RlG7iGStOnXLg='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

After rolling back to my previous version (2.27.4) the error persisted to my surprise (I wasn't having it in the past), and in my terminal I saw this other error:

Error: Cannot find module 'browser-sync-client/dist/index.min.js'

After checking node_modules/browser-sync-client I found that the installed version of browser-sync-client is 2.29.3 because browser-sync defined its dependency as: "browser-sync-client": "^2.27.4".

In browser-sync-client v2.29.3 the /dist folder don't contain the minimised version.

A CSP can be defined in a header, not just in the page body.

Open the developer tools, network tab. Get the response headers when the page is loaded, and share them here.

I got the same error when I tried "browser-sync start --server 'dist' --files 'dist'".
I edited it to browser-sync start --server --cwd 'dist' --files 'dist'" and it worked for me.

I used snippetOptions to set nonce to fix the CSP inline problem

Modify the CSP settings and add 'nonce-inline' to script-src:

<meta http-equiv="Content-Security-Policy" content="...
  script-src ... 'nonce-inline';
  ..." />

Overrides settings when browserSync is enabled:

 browserSync.init({
   ...
   snippetOptions: {
     rule: {
       match: /<\/head>/i,
       fn: function (snippet, match) {
       return snippet.replace('id="__bs_script__"', 'nonce="inline" id="__bs_script__"') + match;
   }
 }}

This will remove CSP inline warning.

When using, also pay attention to the nonce specification https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/nonce

Navigation Menu

Repository navigation

Content Security Policy errors with (Latest) Chrome browser cause Cannot Get error #2062

Chrome Version 121.0.6167.161 (Official Build) (64-bit) on Windows 2016 DataCenter throws Content Security Policy (CSP) error.

Steps to reproduce/test case

Please specify which version of Browsersync, node and npm you're running

Affected platforms

Browsersync use-case

If CLI, please paste the entire command below

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Content Security Policy errors with (Latest) Chrome browser cause Cannot Get error #2062

Description

Chrome Version 121.0.6167.161 (Official Build) (64-bit) on Windows 2016 DataCenter throws Content Security Policy (CSP) error.

Steps to reproduce/test case

Please specify which version of Browsersync, node and npm you're running

Affected platforms

Browsersync use-case

If CLI, please paste the entire command below

Activity

VanquishedWombat commented on Feb 12, 2024

auxcoder commented on Apr 17, 2024

aussieklutz commented on Jun 25, 2024

raspberrysmile commented on Jul 30, 2024

solhuang2201 commented on Feb 7, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions