Content-Security-Policy meta tag 'unsafe-inline' doesn't work

Question

I was getting CSS cross-origin policy, in my electron application:

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.ttf?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.woff?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

So I tried something like this:

<meta http-equiv="Content-Security-Policy"
    content="
      default-src 'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline'; 
      style-src   'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline';
      style-src-elem   'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline';
      font-src    'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline';
      "
  />

But it is giving me something like:

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.ttf?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.woff?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

But according to most of the answers, this work. Like: ans1, ans2.

score 0 · Answer 1 · answered Nov 13 '21 at 14:47

Key point is in:

because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:"
Note that 'font-src' was not explicitly set / Note that 'style-src-elem' was not explicitly set

while you have font-src and style-src / style-src-elem directives in the meta tag.

This means that it is not a CSP of your meta tag does blocking, but some other CSP. In case of several CSP's are published, all sources should pass all CSPs to be allowed.

Check do you use electron-forge/plugin-webpack plugin (or something similar) - these can add a meta tag with their own default CSP. In this case you'll see 2 <meta http-equiv="Content-Security-Policy"... meta tags in the HTML code.

Also Electron in Dev mode can publish a CSP via HTTP header, you can check it or search your project for code like this:

session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  callback({ responseHeaders: Object.assign({
    ...details.responseHeaders,
    "Content-Security-Policy": [ "default-src 'self'" ]
    }, details.responseHeaders)});
  });

In any case, you need to make changes to the CSP that is already being published, and not add a new one.

Note that:

'unsafe-eval' token is not supported in the style-src-elem directive.
'unsafe-eval' and 'unsafe-inline' tokens are not supported in the font-src directive. You can remove these.

Content-Security-Policy meta tag 'unsafe-inline' doesn't work

1 Answers1