Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I open a site in an iframe from an extension page?

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 to sameorigin.

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution to this, finally. In the manifest, or the manifest.json if you want to be specific.

    "declarative_net_request" : {
"rule_resources" : [{
  "id": "removeHeader",
  "enabled": true,
  "path": "remove-headers.json"
}]

    }

    Next a new file was needed called remove-headers.json

    [
{
    "id": 1,
    "priority": 1,
    "action": {
        "type": "modifyHeaders",
        "responseHeaders": [
            { "header": "x-frame-options", "operation": "remove" },
            { "header": "content-security-policy", "operation": "remove"},
            { "header": "referrer-policy", "operation": "remove"}
        ]
     },
    "condition": { "urlFilter": "https*", "resourceTypes": 
    ["main_frame","sub_frame"] }
}
]

    This was issue had much more clarity after reading this github page. https://github.com/MartinWie/Framer/tree/main


  2. 0

    You can remove undesirable headers as they arrive with a function like the one below:

    In background.js…

    chrome.webRequest.onHeadersReceived.addListener(function(info){

 var H=info.responseHeaders, N=''; // V='';

  for(let i=H.length-1; i>=0; i--){N=H[i].name.toLowerCase(); // V=H[i].value.toLowerCase();

   if((N.includes('x-frame-options'))||(N.includes('x-xss-protection'))||(N.includes('content-security-policy'))||(N.includes('report-'))){

    H.splice(i,1); 

}} return {responseHeaders:H};},{urls:['<all_urls>'],types:['main_frame','sub_frame']},['blocking','responseHeaders','extraHeaders']);

    In manifest.json (version 2) you’ll also need this entry if not already there…

     "background": {"scripts": ["background.js"],.....  },

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search