Content Security Policy - iframes

Add-ons Development
#1

I am working on an Add On that injects a website’s content into the iframe which is a sidebar for the extension on Firefox. I am having issues with this following error: “Content Security Policy: The page’s settings blocked the loading of a resource at https://extension-test.databread.com/ (“frame-src”).”

This only happens when I visit certain websites, and a few of these are sites the add-on needs to have access to like stripe.com. Apparently this is possibly a Headers issue? Does anyone know why this is happening and what needs to be changed to get this iframe to work?

Thank you!

#2

Several things is actually happening.

The CSP can prevent the page you are on to load any third party hosted iframe.
But this doesn’t apply to extension iframes! So what you need to do is load your extension page into the iframe and inside your extension page have a iframe that will load the target “https” page.

Second thing that’s happening is that the CSP of the target page (the one inside the iframe) can have “frame-options” header that prevents it from being loaded inside iframe - and in that case you would have to remove the header to fix it.

But since you’ve said it works on some pages, than it’s the first issue, not the second one.

#3

Hey Juraj! Thank you for the response! For this particular extension we were doing the first option you stated, loading the content inside the iframe targeting an “https” page, but the problem still occurred! Last night however, after reading through documentation it seems as though Firefox is particular about how to introduce DOM elements, and I was not inserting the iFrame properly into the DOM. I was using jQuery to append the iframe directly into the DOM like this:

wrapper.append($('<iframe id="databread-iframe" class="databread-content" src="' + endpoint + '"></iframe>'));

Apparently you cannot do this. The iFrame needs to be created like so:
let iFrameElem = document.createElement(“iframe”);
iFrameElem.src = endpoint;
iFrameElem.classList.add(‘databread-content’);
iFrameElem.setAttribute(“id”, “databread-iframe”);
wrapper.append($(iFrameElem));

Now it works great! We also had to splice the “x-frame-options” header in the chrome.webRequest.onHeadersRecieved for security in chrome, but that’s another story!

Thank you so much again for response!