I have a Chrome extension. On one of the extension pages I want to open an iframe where the source is not from the same source but from the extension page.
I keep getting this error:
Refused to display ‘https://example.com/’ in a frame because it set
X-Frame-Options
tosameorigin
.
I understand why it is happening but when searching for a fix I run into an endless maze of "host-permissions", "permissions", "content-security-policy" on the manifest page.
Which one am I supposed to use to fix this?
I also cant figure out if I should be putting this block of code on my extensions js page or not?
const iframeHosts = [
'example.com',
];
chrome.runtime.onInstalled.addListener(() => {
const RULE = {
id: 1,
condition: {
initiatorDomains: [chrome.runtime.id],
requestDomains: iframeHosts,
resourceTypes: ['sub_frame'],
},
action: {
type: 'modifyHeaders',
responseHeaders: [
{header: 'X-Frame-Options', operation: 'remove'},
{header: 'Frame-Options', operation: 'remove'},
// Uncomment the following line to suppress `frame-ancestors` error
// {header: 'Content-Security-Policy', operation: 'remove'},
],
},
};
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [RULE.id],
addRules: [RULE],
});
});
It was the second post on this question. Getting around X-Frame-Options DENY in a Chrome extension?
I am using and require a manifest version 3 solution.
2
Answers
I found a solution to this, finally. In the manifest, or the manifest.json if you want to be specific.
}
Next a new file was needed called remove-headers.json
This was issue had much more clarity after reading this github page. https://github.com/MartinWie/Framer/tree/main
You can remove undesirable headers as they arrive with a function like the one below:
In background.js…
In manifest.json (version 2) you’ll also need this entry if not already there…
NB: I get rid of a couple more headers other than X-Frame-Options so do check the script and remove what you don’t want.