Firefox网页扩展：iframe源执行脚本时触发内容安全策略错误

阿华AIGC实验室

2026-5-25

Fixing CSP Errors for Injected Iframes in Firefox Extensions

Hey there, let's work through this Content Security Policy (CSP) error you're hitting when your extension injects an iframe into target pages. Here are the most effective solutions tailored to Firefox extensions:

1. Declare Web Accessible Resources in Your Manifest

First, ensure the extension resources your iframe loads are explicitly allowed to be accessed by target pages. Add a web_accessible_resources entry in your manifest.json (works for both Manifest V2 and V3):

"web_accessible_resources": [
  {
    "resources": ["inject-content/inject.html", "inject-content/*.js", "inject-content/*.css"],
    "matches": ["<all_urls>"] // Restrict to specific URLs if possible for better security
  }
]

This tells Firefox that these files can be loaded by external pages (like the target page hosting your iframe), bypassing basic CSP restrictions on extension resource access.

2. Adjust Your Extension's Content Security Policy

If the error comes from the iframe's own content (e.g., scripts in inject.html being blocked), tweak your extension's CSP in manifest.json:

For Manifest V2:

"content_security_policy": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; frame-src 'self';"

Remove 'unsafe-inline' if you can avoid inline scripts/styles (always better for security). If you must use inline scripts, add 'unsafe-inline' to script-src.

For Manifest V3:

Manifest V3 uses a stricter CSP format. Use script-src with 'self' and allow any necessary trusted sources:

"content_security_policy": {
  "extension_pages": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
}

3. Use the iframe `sandbox` Attribute Wisely

Add a sandbox attribute to your iframe to explicitly grant permissions for script execution and resource access. This can bypass some CSP restrictions from the target page:

var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.style.cssText = "width: 100%; height: 100%; border: none;";
iFrame.src = browser.extension.getURL("inject-content/inject.html");
// Grant only the permissions you need - adjust based on your use case
iFrame.sandbox = "allow-scripts allow-same-origin allow-storage";

allow-scripts: Lets the iframe run JavaScript.
allow-same-origin: Lets the iframe access extension resources (critical if your iframe loads files from the extension).

4. Eliminate Inline Scripts/Styles

CSP often blocks inline code as a security measure. If inject.html has inline <script> or <style> tags, move that code to external files:

Replace inline scripts with <script src="inject-script.js"></script>
Replace inline styles with <link rel="stylesheet" href="inject-styles.css">
This removes the need for 'unsafe-inline' in your CSP, making your extension more secure and compliant with strict CSP rules.

5. Work Around Strict Target Page CSP

If the target page has a strict frame-src directive that blocks moz-extension:// URLs, try converting your iframe content to a Blob URL:

// Fetch your inject.html content from the extension
fetch(browser.extension.getURL("inject-content/inject.html"))
  .then(response => response.text())
  .then(html => {
    const blob = new Blob([html], { type: "text/html" });
    const blobUrl = URL.createObjectURL(blob);
    iFrame.src = blobUrl;
  });