0

I am applying CSP directives to a web platform, and the platform has some of its external dependencies installed locally, such as a JavaScript video player. Because it requires an external font, the CSS of the dependency makes the font call like this:

@font-face {
  font-family: VideoJS;
  src: url(data:application/font-woff;charset=utf-8; <base64 here>) format("woff");
  font-weight: normal;
  font-style: normal;
}

Since I couldn't find the font on Google Fonts or other sources, I would like to maintain the font-src directive that I applied, which only allows "'self'" and "https://fonts.gstatic.com". I want to specifically allow the above font without allowing just "data:", like the other solutions I found here.

Due to internal reasons, it would be preferable not to install the font file.

The error displayed is: "Refused to load the font 'data:application/font-woff;charset=utf-8;base64, ' because it violates the following Content Security Policy directive: 'font-src 'self' https://fonts.gstatic.com'."

I have already tried:

  • Applying the exact data link with the base64 code.
  • Applying the SHA256 hash of the decoded font.
  • Applying the SHA256 hash of the encoded font.

Is there any other solution to allow this font while still maintaining a secure CSP configuration?

kenai barboza
  • 1
  • 1
    Why are you afraid of adding "data:" to font-src? Security risks of fonts are minimal, especially when data exfiltration through font requests are not a problem. – Halvor Sakshaug Jun 22 '23 at 04:09

0 Answers0