1

When using a nodejs express application using the NPM "Helmet" package to install protective Headers, errors occur when using fontawesome: "kit_fontawesomecom_78f8060be1.js: 2 Refused to connect to 'https://ka-f.fontawesome.com/releases/v5. 15.1 / css / free.min.css' 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. " Apparently security is being violated. Is there a solution to these problems?

Solved by toggling contentSecurityPolicy: false:

  helmet({
        contentSecurityPolicy: false,
  })
);

But this is not a solution to the problem, it is ignoring it.

An example of one of the posts in full:

kit_fontawesomecom_78f8060be1.js:2 Refused to connect to 'https://ka-f.fontawesome.com/releases/v5.15.1/css/free.min.css' 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.

Thank you so much! This is how it works:

app.use(
    helmet.contentSecurityPolicy({
        directives: {
            defaultSrc: ["'self'", 'https://ka-f.fontawesome.com', 'https://fonts.gstatic.com'],
            scriptSrc: ["'self'", "'unsafe-inline'", 'https://ka-f.fontawesome.com'],
            styleSrc: ["'self'","'unsafe-inline'", 'https://ka-f.fontawesome.com', 'https://fonts.googleapis.com'],
            // connectSrc: ["'self'", 'https://ka-f.fontawesome.com'],
            connectSrc: ["'self'", 'https://ka-f.fontawesome.com'],
        //    reportUri: '/report-violation',   // endpoint to get violation reports
        },
        reportOnly: false,  // true for nonblocking mode, just to see violations
        safari5: false
}));
Illusion
  • 71
  • 9

2 Answers2

0

Yeah, by opt contentSecurityPolicy: false, you just switch Off the Content Security Policy(CSP).

If you wish to use CSP (to make your app more secure), it need to set some rules if the default ones is no suitable. As seen from the console error, your web app loads fonts via fetch(), therefore you need to add https://ka-f.fontawesome.com source to the connect-src directive.
Something like that:

app.use(helmet.contentSecurityPolicy({
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'"],
    styleSrc: ["'self'"],
    connectSrc: ["'self'", 'https://ka-f.fontawesome.com'],
//    reportUri: '/report-violation',   // endpoint to get violation reports
    reportOnly: false,  // true for nonblocking mode, just to see violations
    safari5: false
  }));

and then look at console errors or CSP reports what else is blocked and add related sources to the directives accordingly. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP can helps at first steps.

granty
  • 7,234
  • 1
  • 14
  • 21
  • I inserted: ``` connectSrc: ["'self'", 'https://ka-f.fontawesome.com/releases/v5.15.1/css/free.min.css'], ``` But it did not help. Sorry, maybe something else, tell me how to make an exception for this particular resource. Added completely one of the errors in the question description – Illusion Nov 25 '20 at 17:41
  • Make it connectSrc: `["'self'", 'https://ka-f.fontawesome.com']` otherwise `free.min.css?...some_params` will not fall under rule. Ensure browser get your CSP and the Status Code is 200 - [see how](https://stackoverflow.com/questions/64060894/trouble-with-content-security-policy/64068629#64068629). After that we can move forward. – granty Nov 25 '20 at 18:33
  • You got a mistake: It is necessary to wrap some of the properties in " directives: { " One question, do all the other helmet properties work with this entry? dnsPrefetchControl, expectCt and all the rest? – Illusion Nov 28 '20 at 10:59
  • `It is necessary to wrap some of the properties in " directives:` means you miss quote or double quote somewhere. Other helmet properties have [own entry](https://helmetjs.github.io/). `app.use(helmet());` switches On 11 entries at once. Or you can make a separate call `app.use(helmet.expectCt());` or wothewer you need. – granty Nov 28 '20 at 11:19
  • No. Everything is correct. I did not explain well. The working code was placed in the question itself. To enable all helmet protections, you must additionally enable: ``` app.use(helmet());``` – Illusion Nov 28 '20 at 12:10
0

instead of redefining all the directives, you can use the below code to only reset specific ones. This code redefines script source to 'self' and 'example.com'. Rest all remain as default


app.use(
  helmet.contentSecurityPolicy({
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
      "script-src": [
        "'self'",
        "https://ka-f.fontawesome.com",
        "https://kit.fontawesome.com",
      ],
      "connect-src": ["'self'", "https://ka-f.fontawesome.com"],
    },
  })
);
deZak
  • 109
  • 2
  • 2