How to not trigger Firefox's strict Content Security Policy by my extension

Question

I am currently contributing on an extension, and the main problem is that on Firefox, the CSP is being triggered, which causes quite a few issues. Mainly it seems to block the injection of dynamic CSS, which I thought I removed, although it still gets triggered. Just for reference, the website I am targeting is modrinth. This is the repo if you want a full look at the code (it's probably really bad code) blueRinth, however, the main problem I suspect is in my injected.js, where the code is:

document.onreadystatechange = function () {
  const projectRegex =
    /^https?:\/\/modrinth\.com\/(?:project|mod|resourcepack|shader|datapack|modpack)\/([^\/]+)/;
  const projectIdTest = projectRegex.exec(window.location.href);
  const projectId =
    projectIdTest != null && projectIdTest.length > 1 ? projectIdTest[1] : null;
  if (projectId !== null) {
    runBanner(projectId);
    return;
  }
  pageSupportsBanners = false;
};

useNuxtApp()._middleware.global.push(function handleRoute(to, from) {
  if (to.name.startsWith("type-id")) {
    const { id } = to.params;
    console.log("entering project", id);
    runBanner(id);
  } else if (from.name.startsWith("type-id")) {
    const { id } = from.params;
    //console.log("leaving project", id);
    const containers = document.getElementsByClassName("banner-container");
    for (let container of containers) {
      document.body.removeChild(container);
    }
    pageSupportsBanners = false;
  }
});

let pageSupportsBanners = false;
const fallbackimage =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAnSURBVHhe7cEBDQAAAMKg909tDjcgAAAAAAAAAAAAAAAAAAAA4FwNQEAAAQtzTh0AAAAASUVORK5CYII=";
let banner = fallbackimage;

async function runBanner(id) {
  console.log("runBanner called with id:", id);
  pageSupportsBanners = true;
  const apibase = "https://api.modrinth.com/v3/project/";

  try {
    const response = await fetch(apibase + id);
    if (!response.ok) {
      console.error("blueRinth: Response failed during banner loading.");
      return;
    }
    const data = await response.json();
    console.log("Project API data:", data);
    console.log("gallery:", data.gallery);
    data.gallery.forEach((entry) => {
      if (entry.featured === true) {
        banner = entry.url;
        applyBanners();
      }
    });
  } catch {
    console.error(
      "blueRinth: Something failed during banner loading. Please contact WorldWidePixel."
    );
  }
}

function applyBanners() {
  console.log("applyBanners called, banner:", banner);
  if (pageSupportsBanners) {
    const bannerContainer = document.createElement("div");
    const bannerStyles = document.createElement("style");
    bannerStyles.innerHTML = `
  .banner-image {
    background-image:
    linear-gradient(0deg, var(--color-bg) 0%, rgba(0, 0, 0, 0) 200%),
    url(${banner}) !important;
  }
  `;
    document.head.appendChild(bannerStyles);
    bannerContainer.classList.add("banner-container");
    const bannerImage = document.createElement("div");
    bannerImage.classList.add("banner-image");
    bannerContainer.appendChild(bannerImage);
    const bannerBg = document.createElement("div");
    bannerBg.classList.add("banner-bg");
    document.body.appendChild(bannerBg);
    document.body.appendChild(bannerContainer);
    bannerContainer.style.opacity = "100%";
  }
}

Here is the text of the CSP errors i face, I have little idea what they really mean, hence why I'm here:

Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self'”. Consider using a hash ('sha256-JBmyBqGA3TPyBg9fUy2esK5fafHmvdYH2GunnhLcvUw=') or a nonce.

Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src https://m.stripe.network”. Consider using a hash ('sha256-dd4J3UnQShsOmqcYi4vN5BT3mGZB/0fOwBA72rsguKc=', requires 'unsafe-hashes' for style attributes) or a nonce.

I have tried moving all my css to separate files and declaring it in my manifest.json, then in my content.js, switching themes baed on those files, however this does not work. The problem may also arise in my content.js, where the main theme switching is handled.

On the page you specify (modrinth.com/mods), only the subframes (js.stripe.com and m.stripe.network) have CSPs, not the top frame. I'm disinclined to debug your code on github, but are you sure you want to inject anything into the subframes? — Nanigashi
– Nanigashi, Commented Aug 27 at 9:40
I don't think I require injecting into the subframe, since it looks like subframes must be declared separately inside the manifest.json? — System_Error06
– System_Error06, Commented Aug 28 at 10:14
The point is that you would only get a CSP violation if you're trying to inject something (js and css) into the subframes, since they're the only frames with CSPs. So you should try to figure out why your code is trying to inject js and css into the subframes (and stop it). — Nanigashi
– Nanigashi, Commented Aug 28 at 21:08

Lajos Arpad · Accepted Answer · 2025-08-26 12:28:12Z

0

Well, if your extension is in use by a site you don't control, they could have their own CSP in the response header and the meta tag. You can instruct them in your documentation that they do need to add the sources they are to trigger into their rules.

As about those who don't define CSP rules, you could use a meta tag with your own CSP directive customized by whatever rules your extension needs.

Example

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Taken from here.

answered Aug 26 at 12:28

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

System_Error06 Aug 27 at 2:15

So turns out all I needed to do is define all my CSS inside the manifest.json. Then change my content.js accordingly, using a theme selector instead of injecting CSS. It doesn't trigger CSP now, but I am having other issues regarding the extension, however that's outside the scope of this question, so I may make another question for it.

Collectives™ on Stack Overflow

How to not trigger Firefox's strict Content Security Policy by my extension

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related