0

I am having a chrome extension that would work on multiple webpages say twitter.com, linkedin.com, facebook.com. I am loading the following fonts

https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap

I am loading the above fonts in my content script as follows:

(function () {
  // Create a new meta element
  const meta = document.createElement('meta');
  // Set the attributes of the meta element
  meta.setAttribute('http-equiv', 'Content-Security-Policy');
  meta.setAttribute('content', 'font-src data: https://fonts.gstatic.com https://fonts.googleapis.com');
  // Append the meta element to the head of the document
  document.head.appendChild(meta);
  const font = document.createElement("link");
  font.href =
    "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap";
  font.rel = "stylesheet";
  document.head.appendChild(font);
})();

But I am getting the error when I am in twitter.com as:

Refused to load the font '' because it violates the following Content Security Policy directive: "font-src 'self' ".

 Refused to load the font 'https://fonts.gstatic.com/s/robotomono/v22/L0x5DF4xlVMF-BfR8bXMIjhGq3-cXbKDO1w.woff2' because it violates the following Content Security Policy directive: "font-src 'self' https://*.twimg.com".

I am have update the manifest(V3) also as follows,

"content_security_policy": {
    "extension_pages": "script-src 'self'; font-src 'self' https://fonts.gstatic.com;object-src 'self'; script-src-elem 'self' 'unsafe-inline'" 
  },

But still I am facing the font loading issue and the fonts are not applied to my elements.

Anil Kumar
  • 1
  • If these fonts are for your UI you should probably show it inside a `web_accessible_resources` iframe, see also [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/a/25100953) – wOxxOm Apr 03 '23 at 10:47

1 Answers1

0

There is a default CSP being set on your site, most likely in a response header. You need to find out how this policy is being set and modify/disable it. Adding another CSP can only make the total policy stricter.

Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9