Content Security Policy error while loading a script

user_16378038 0
Viewed 969

i am trying to render a chart in my app using Pug as seen below:

block content
  h2 Question statistics
    .col-lg-12 
      script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js")
      .chart-container
        canvas#myChart2      
          script.
            var ctx = document.getElementById("myChart2").getContext('2d');
            ctx.canvas.parentNode.style.width = '50%'
            var idata = [1]    
            var ilabel = [2] 
            var myChart = new Chart(ctx, { /* ... etc */

This was loaded just fine before a week or so but today when i tried to access this feature the chart would not render. The error in my console is this:

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.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.

and

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-AklvVxShqs4WBi3vUz7qSiPkes2rSVGoNyoZXYVnSA8='), or a nonce ('nonce-...') is required to enable inline execution.

This is the first time i am seeing this error and i don't know how to solve it. Any ideas?

pug content-security-policy node.js javascript
1 Answers

As turned out in comments, here's the line of code that broke it all:

app.use(helmet());

Helmet is a really neat module designed to let you protect your server from the most common attack vectors without worrying much about details. Alas, as any good security tool, it operates in 'paranoid mode' by default. Here's what this small line is actually equivalent to:

app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());

Yep, a lot of stuff. The one that messed up your setup is the first item of this list. Here's the default values sent as Content-Security-Policy header values by that line:

default-src 'self';
base-uri 'self';
block-all-mixed-content;
font-src 'self' https: data:;
frame-ancestors 'self';
img-src 'self' data:;
object-src 'none';
script-src 'self';
script-src-attr 'none';
style-src 'self' https: 'unsafe-inline';
upgrade-insecure-requests

Once again, that makes sense, as Helmet doesn't know anything about external entities you're using - and your level of trust to those. It's you who are responsible for providing this data, either by adding hash info or by listing the trusted sources in the configuration. For example:

helmet.contentSecurityPolicy({
  useDefaults: false,
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "example.com"], // scripts from example.com are now trusted
    objectSrc: ["'none'"],
    upgradeInsecureRequests: [],
  },
})

You can configure each module individually, or add this configuration into helmet directly:

app.use(
  helmet({
    contentSecurityPolicy: {
      useDefaults: false,
      directives: { ... }
    },
  })
);
user_12290230
Related