1

First I thought it was a frontend problem but no it was not.

I'm using helmet in my node application which is causing CSP errors while loading 3rd party scripts.

My HTML Code

script(src='https://code.highcharts.com/stock/highstock.js')
script(src='https://code.highcharts.com/stock/modules/exporting.js')
script(src='https://code.highcharts.com/stock/modules/export-data.js')
script(src='https://code.highcharts.com/stock/modules/accessibility.js')

I have included the above scripts in my head tag in my pug file.

Error Caused by helmet

Refused to load the script 'https://code.highcharts.com/stock/highstock.js' because it 
violates the following Content Security Policy directive: "script-src 'self'". Note that 
'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 
'https://code.highcharts.com/stock/modules/exporting.js' because it violates the following 
Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was 
not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 
'https://code.highcharts.com/stock/modules/export-data.js' because it violates the 
following Content Security Policy directive: "script-src 'self'". Note that 'script-src- 
elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 
'https://code.highcharts.com/stock/modules/accessibility.js' because it violates the 
following Content Security Policy directive: "script-src 'self'". Note that 'script-src- 
elem' was not explicitly set, so 'script-src' is used as a fallback.

Solutions I have tried in my app.js file

app.use(helmet());

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      imgSrc: ["'self'", "https: data:"],
      scriptSrc: [
        "'self'",
        "https://code.highcharts.com/stock/highstock.js",
        "https://code.highcharts.com/stock/modules/exporting.js",
        "https://code.highcharts.com/stock/modules/accessibility.js",
      ],
    },
  })
);

app.use(
  helmet.crossOriginResourcePolicy({
    policy: "cross-origin",
  })
);

Allow-access-control-allow-origin *
app.use(cors());
  • Removing the helmet middleware solves the problem, but it's necessary to use for security reason.

Error I'm getting after implementing the above solution.

127.0.0.1/:1 GET https://code.highcharts.com/stock/modules/exporting.js 
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

127.0.0.1/:1 GET https://code.highcharts.com/stock/modules/accessibility.js
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

127.0.0.1/:1 GET https://code.highcharts.com/stock/highstock.js
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

I'm new to backend-dev. Please help me to solve the above issue and I would appreciate a safe solution rather than a workaround solution. I've gone through the MDN docs about CORS,CSP but it was overwhelming.

Headers

cross-origin-resource-policy To use this resource from a different 
origin, the server needs to specify a cross-origin resource policy 
in the response headers: 

Cross-Origin-Resource-Policy: same- siteChoose this option if the 
resource and the document are served 
from the same site.

This is the header error generated.

ManeeshGowd
  • 19
  • 2
  • What headers is the helmet contentSecurityPolicy generating on the html response? – Matt Jul 23 '22 at 03:33
  • Does this answer your question? [How to prevent ERR\_BLOCKED\_BY\_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep?](https://stackoverflow.com/questions/69832906/how-to-prevent-err-blocked-by-response-notsameoriginafterdefaultedtosameoriginby) – Matt Jul 23 '22 at 03:34
  • cross-origin-resource-policy To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers: Cross-Origin-Resource-Policy: same-siteChoose this option if the resource and the document are served from the same site. This is the header error generated. – ManeeshGowd Jul 23 '22 at 08:52

0 Answers0