I have a chrome/firefox web extension that uses a content script to inject HTML into a webpage when a button is clicked. The HTML that is injected consists of an iFrame nested within several divs.
Here’s the relevant portion of the content script:
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");
var boxDiv = document.createElement("div");
boxDiv.style.cssText = "left: calc(100% - 390px); position: fixed; top: 0px; width: 390px; z-index: 1;"
var zeroDiv = document.createElement("div");
zeroDiv.style.cssText = "position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647;";
var outerDiv = document.createElement("div");
outerDiv.id = outerDivID;
As indicated by the code, the source of the iFrame is a file called “inject.html”. Two important features of inject.html are:
When I directly open the file from my computer (i.e – right-click, open with Chrome), it works fine. However, when I use my extension in Firefox, I get the following error:
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”).
The default content security policy for extensions is:
"script-src 'self'; object-src 'self';"
This will be applied to any extension that has not explicitly set its own content security policy using the
content_security_policy manifest.json key. It has the following consequences:
You may only load and resources that are local to the extension.
Allow the extension to execute inline scripts, by supplying the hash of the script in the “script-src” directive.
Allow the inline script:
"content_security_policy": "script-src 'self' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='; object-src 'self'"
Alternatively, you can create hashes from your inline scripts. CSP supports sha256, sha384 and sha512.
Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='
When generating the hash, don’t include the
tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
So, I created a sha-256 hash of my script by highlighting the following text in "inject.html":
and using a SHA-256 calculator (I chose base-64 to remain consistent with the example): https://hash.online-convert.com/sha256-generator
and changing my "manifest.json" file to:
"description": "Summarizes webpages",
"content_security_policy": "script-src 'self' 'sha256-GdCLzZEX8DPwLRiIBZvv6ffymh4hz/9NgjmzyPv+lGM='; object-src 'self'"
Yet, my error still remained!
As such, my question is,