Getting around X-Frame-Options DENY in a Chrome extension?
Chrome offers the webRequest
API to intercept and modify HTTP requests. You can remove the X-Frame-Options
header to allow inlining pages within an iframe.
chrome.webRequest.onHeadersReceived.addListener(
function(info) {
var headers = info.responseHeaders;
for (var i=headers.length-1; i>=0; --i) {
var header = headers[i].name.toLowerCase();
if (header == 'x-frame-options' || header == 'frame-options') {
headers.splice(i, 1); // Remove header
}
}
return {responseHeaders: headers};
}, {
urls: [
'*://*/*', // Pattern to match all http(s) pages
// '*://*.example.org/*', // Pattern to match one http(s) site
],
types: [ 'sub_frame' ]
}, [
'blocking',
'responseHeaders',
// Modern Chrome needs 'extraHeaders' to see and change this header,
// so the following code evaluates to 'extraHeaders' only in modern Chrome.
chrome.webRequest.OnHeadersReceivedOptions.EXTRA_HEADERS,
].filter(Boolean)
);
In the manifest, you need to specify the webRequest
and webRequestBlocking
permissions, plus the URLs patterns you're intending to intercept i.e. "*://*/*"
or "*://www.example.org/*"
for the example above.
Getting around X-Frame-Options in Chrome extension for a Chrome Web Store URL
The Chrome Web Store has special permissions that block extensions from manipulating it. See this answer for more details.
X-Frame Options Not 100% For Blocking Iframes
X-Frame-Options is just a response header. Of course if you control the client, you can ignore it. If you control the client, you can do pretty much anything.
The point in X-Frame-Options is to prevent attacks like Clickjacking (primarily) or Pixel Perfect Timing Attacks for example. It does indeed prevent those attacks, because the attacker cannot control the victim's browser to say install an extension (or if he can, Clickjacking is the least issue from the victim's perspective :) ).
Getting around X-Frame-Options DENY in a Chrome extension?
Chrome offers the webRequest
API to intercept and modify HTTP requests. You can remove the X-Frame-Options
header to allow inlining pages within an iframe.
chrome.webRequest.onHeadersReceived.addListener(
function(info) {
var headers = info.responseHeaders;
for (var i=headers.length-1; i>=0; --i) {
var header = headers[i].name.toLowerCase();
if (header == 'x-frame-options' || header == 'frame-options') {
headers.splice(i, 1); // Remove header
}
}
return {responseHeaders: headers};
}, {
urls: [
'*://*/*', // Pattern to match all http(s) pages
// '*://*.example.org/*', // Pattern to match one http(s) site
],
types: [ 'sub_frame' ]
}, [
'blocking',
'responseHeaders',
// Modern Chrome needs 'extraHeaders' to see and change this header,
// so the following code evaluates to 'extraHeaders' only in modern Chrome.
chrome.webRequest.OnHeadersReceivedOptions.EXTRA_HEADERS,
].filter(Boolean)
);
In the manifest, you need to specify the webRequest
and webRequestBlocking
permissions, plus the URLs patterns you're intending to intercept i.e. "*://*/*"
or "*://www.example.org/*"
for the example above.
Overcoming Display forbidden by X-Frame-Options
I had a similar issue, where I was trying to display content from our own site in an iframe (as a lightbox-style dialog with Colorbox), and where we had an server-wide "X-Frame-Options SAMEORIGIN" header on the source server preventing it from loading on our test server.
This doesn't seem to be documented anywhere, but if you can edit the pages you're trying to iframe (eg., they're your own pages), simply sending another X-Frame-Options header with any string at all disables the SAMEORIGIN or DENY commands.
eg. for PHP, putting
<?php
header('X-Frame-Options: GOFORIT');
?>
at the top of your page will make browsers combine the two, which results in a header of
X-Frame-Options SAMEORIGIN, GOFORIT
...and allows you to load the page in an iframe. This seems to work when the initial SAMEORIGIN command was set at a server level, and you'd like to override it on a page-by-page case.
All the best!
Related Topics
Difference Between Settimeout with and Without Quotes and Parentheses
Two Sets of Parentheses After Function Call
Warn User Before Leaving Web Page with Unsaved Changes
How to Remove All Line Breaks from a String
Check/Uncheck Checkbox with JavaScript
Differencebetween 'New Object()' and Object Literal Notation
How to Replace While Loops with a Functional Programming Alternative Without Tail Call Optimization
Hot and Cold Observables: Are There 'Hot' and 'Cold' Operators
Phantomjs Not Waiting for "Full" Page Load
How to Write a Named Arrow Function in Es2015
Is There a More Accurate Way to Create a JavaScript Timer Than Settimeout
Get File Size Before Uploading
What Does "This" Mean in Jquery
How to Hide JavaScript Code in a Webpage