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
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'"
},
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
The source code in the browser is
The browser shows the Cannot GET / message.
The web page used for testing is totally minimal - no includes or other script files
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
Affected platforms
Browsersync use-case
If CLI, please paste the entire command below
This is the scripts section of the package.json file.