Overcoming "Display forbidden by X-Frame-Options"

IframeFramesX Frame-Options

Iframe Problem Overview


I'm writing a tiny webpage whose purpose is to frame a few other pages, simply to consolidate them into a single browser window for ease of viewing. A few of the pages I'm trying to frame forbid being framed and throw a "Refused to display document because display forbidden by X-Frame-Options." error in Chrome. I understand that this is a security limitation (for good reason), and don't have access to change it.

Is there any alternative framing or non-framing method to display pages within a single window that won't get tripped up by the X-Frame-Options header?

Iframe Solutions


Solution 1 - Iframe

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!

Solution 2 - Iframe

If you are getting this error for a YouTube video, rather than using the full url use the embed url from the share options. It will look like http://www.youtube.com/embed/eCfDxZxTBW4

You may also replace watch?v= with embed/ so http://www.youtube.com/watch?v=eCfDxZxTBW4 becomes http://www.youtube.com/embed/eCfDxZxTBW4

Solution 3 - Iframe

If you are getting this error while trying to embed a Google Map in an iframe, you need to add &output=embed to the source link.

Solution 4 - Iframe

UPDATE 2019: You can bypass X-Frame-Options in an <iframe> using just client-side JavaScript and my X-Frame-Bypass Web Component. Here is a demo: Hacker News in an X-Frame-Bypass. (Tested in Chrome & Firefox.)

Solution 5 - Iframe

There is a plugin for Chrome, that drops that header entry (for personal use only):

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe/reviews

Solution 6 - Iframe

Adding a

  target='_top'

to my link in the facebook tab fixed the issue for me...

Solution 7 - Iframe

If you're getting this error trying to embed Vimeo content, change the src of the iframe,

from: https://vimeo.com/63534746
to: http://player.vimeo.com/video/63534746

Solution 8 - Iframe

I had same issue when I tried embed moodle 2 in iframe, solution is Site administration ► Security ► HTTP security and check Allow frame embedding

Solution 9 - Iframe

Solution for loading an external website into an iFrame even tough the x-frame option is set to deny on the external website.

If you want to load a other website into an iFrame and you get the Display forbidden by X-Frame-Options” error then you can actually overcome this by creating a server side proxy script.

The src attribute of the iFrame could have an url looking like this: /proxy.php?url=https://www.example.com/page&key=somekey

Then proxy.php would look something like:

if (isValidRequest()) {
   echo file_get_contents($_GET['url']);
}

function isValidRequest() {
    return $_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['key']) && 
    $_GET['key'] === 'somekey';
}

This by passes the block, because it is just a GET request that might as wel have been a ordinary browser page visit.

Be aware: You might want to improve the security in this script. Because hackers could start loading in webpages via your proxy script.

Solution 10 - Iframe

This is the solution guys!!

FB.Event.subscribe('edge.create', function(response) {
	window.top.location.href = 'url';
});

The only thing that worked for facebook apps!

Solution 11 - Iframe

I tried nearly all suggestions. However, the only thing that really solved the issue was:

  1. Create an .htaccess in the same folder where your PHP file lies.

  2. Add this line to the htaccess:

    Header always unset X-Frame-Options

Embedding the PHP by an iframe from another domain should work afterwards.

Additionally you could add in the beginning of your PHP file:

header('X-Frame-Options: ALLOW');

Which was, however, not necessary in my case.

Solution 12 - Iframe

It appears that X-Frame-Options Allow-From https://... is depreciated and was replaced (and gets ignored) if you use Content-Security-Policy header instead.

Here is the full reference: https://content-security-policy.com/

Solution 13 - Iframe

I had the same problem with mediawiki, this was because the server denied embedding the page into an iframe for security reasons.

I solved it writing

$wgEditPageFrameOptions = "SAMEORIGIN"; 

into the mediawiki php config file.

Hope it helps.

Solution 14 - Iframe

FWIW:

We had a situation where we needed to kill our iFrame when this "breaker" code showed up. So, I used the PHP function get_headers($url); to check out the remote URL before showing it in an iFrame. For better performance, I cached the results to a file so I was not making a HTTP connection each time.

Solution 15 - Iframe

I was using Tomcat 8.0.30, none of the suggestions worked for me. As we are looking to update the X-Frame-Options and set it to ALLOW, here is how I configured to allow embed iframes:

  • Navigate to Tomcat conf directory, edit the web.xml file
  • Add the below filter:

<filter>
            <filter-name>httpHeaderSecurity</filter-name>
            <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
                   <init-param>
                           <param-name>hstsEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingOption</param-name>
                           <param-value>ALLOW-FROM</param-value>
                   </init-param>
            <async-supported>true</async-supported>
       </filter>
   
       <filter-mapping>
                   <filter-name>httpHeaderSecurity</filter-name>
                   <url-pattern>/*</url-pattern>
                   <dispatcher>REQUEST</dispatcher>
       </filter-mapping> 

  • Restart Tomcat service

  • Access the resources using an iFrame.

Solution 16 - Iframe

The only question that has a bunch of answers. WElcome to the guide i wish i had when i was scrambling for this to make it work at 10:30 at night on the deadline day... FB does some weird things with canvas apps, and well, you've been warned. If youa re still here and you have a Rails app that will appear behind a Facebook Canvas, then you will need:

Gemfile:

gem "rack-facebook-signed-request", :git => 'git://github.com/cmer/rack-facebook-signed-request.git'

config/facebook.yml

facebook:
  key: "123123123123"
  secret: "123123123123123123secret12312"

config/application.rb

config.middleware.use Rack::Facebook::SignedRequest, app_id: "123123123123", secret: "123123123123123123secret12312", inject_facebook: false

config/initializers/omniauth.rb

OmniAuth.config.logger = Rails.logger
SERVICES = YAML.load(File.open("#{::Rails.root}/config/oauth.yml").read)
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, SERVICES['facebook']['key'], SERVICES['facebook']['secret'], iframe:   true
end

application_controller.rb

before_filter :add_xframe
def add_xframe
  headers['X-Frame-Options'] = 'GOFORIT'
end

You need a controller to call from Facebook's canvas settings, i used /canvas/ and made the route go the main SiteController for this app:


class SiteController < ApplicationController
def index
@user = User.new
end
def canvas
redirect_to '/auth/failure' if request.params['error'] == 'access_denied'
url = params['code'] ? "/auth/facebook?signed_request=#{params['signed_request']}&state=canvas" : "/login"
redirect_to url
end
def login
end
end

login.html.erb


<% content_for :javascript do %>
var oauth_url = 'https://www.facebook.com/dialog/oauth/';;
oauth_url += '?client_id=471466299609256';
oauth_url += '&redirect_uri=' + encodeURIComponent('https://apps.facebook.com/wellbeingtracker/';);
oauth_url += '&scope=email,status_update,publish_stream';
console.log(oauth_url);
top.location.href = oauth_url;
<% end %>

Sources

  • The config i think came from omniauth's example.
  • The gem file (which is key!!!) came from: slideshare things i learned...
  • This stack question had the whole Xframe angle, so you'll get a blank space, if you don't put this header in the app controller.
  • And my man @rafmagana wrote this heroku guide, which now you can adopt for rails with this answer and the shoulders of giants in which you walk with.

Solution 17 - Iframe

<form target="_parent" ... />

Using Kevin Vella's idea, I tried using the above on the form element made by PayPal's button generator. Worked for me so that Paypal does not open in a new browser window/tab.

Update

Here's an example:

Generating a button as of today (01-19-2021), PayPal automatically includes target="_top" on the form element, but if that doesn't work for your context, try a different target value. I suggest _parent -- at least that worked when I was using this PayPal button.

See Form Target Values for more info.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_parent">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="[email protected]">
  <input type="hidden" name="lc" value="US">
  <input type="hidden" name="button_subtype" value="services">
  <input type="hidden" name="no_note" value="0">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
  <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Solution 18 - Iframe

The only real answer, if you don't control the headers on your source you want in your iframe, is to proxy it. Have a server act as a client, receive the source, strip the problematic headers, add CORS if needed, and then ping your own server.

There is one other answer explaining how to write such a proxy. It isn't difficult, but I was sure someone had to have done this before. It was just difficult to find it, for some reason.

I finally did find some sources:

https://github.com/Rob--W/cors-anywhere/#documentation

^ preferred. If you need rare usage, I think you can just use his heroku app. Otherwise, it's code to run it yourself on your own server. Note sure what the limits are.

whateverorigin.org

^ second choice, but quite old. supposedly newer choice in python: https://github.com/Eiledon/alloworigin

then there's the third choice:

http://anyorigin.com/

Which seems to allow a little free usage, but will put you on a public shame list if you don't pay and use some unspecified amount, which you can only be removed from if you pay the fee...

Solution 19 - Iframe

I'm not sure how relevant it is, but I built a work-around to this. On my site, I wanted to display link in a modal window that contained an iframe which loads the URL.

What I did is, I linked the click event of the link to this javascript function. All this does is make a request to a PHP file that checks the URL headers for X-FRAME-Options before deciding whether to load the URL within the modal window or to redirect.

Here's the function:

  function opentheater(link, title){
        $.get( "url_origin_helper.php?url="+encodeURIComponent(link), function( data ) {
  if(data == "ya"){
	  $(".modal-title").html("<h3 style='color:480060;'>"+title+"&nbsp;&nbsp;&nbsp;<small>"+link+"</small></h3>");
        $("#linkcontent").attr("src", link);
        $("#myModal").modal("show");
  }
  else{
	  window.location.href = link;
	  //alert(data);
  }
});
        
        
        }

Here's the PHP file code that checks for it:

<?php
$url = rawurldecode($_REQUEST['url']);
$header = get_headers($url, 1);
if(array_key_exists("X-Frame-Options", $header)){
	echo "nein";
}
else{
	echo "ya";
}


?>

Hope this helps.

Solution 20 - Iframe

Not mentioned but can help in some instances:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
	if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
		var doc = iframe.contentWindow.document;
		doc.open();
		doc.write(xhr.responseText);
		doc.close();
	}
}
xhr.open('GET', url, true);
xhr.send(null);

Solution 21 - Iframe

I came across this issue when running a wordpress web site. I tried all sorts of things to fix it and wasn't sure how, ultimately the issue was because I was using DNS forwarding with masking, and the links to external sites were not being addressed properly. i.e. my site was hosted at http://123.456.789/index.html but was masked to run at http://somewebSite.com/index.html. When i entered http://123.456.789/index.html in the browser clicking on those same links resulted in no X-frame-origins issues in the JS console, but running http://somewebSite.com/index.html did. In order to properly mask you must add your host's DNS name servers to your domain service, i.e. godaddy.com should have name servers of example, ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com, if you were using digitalocean.com as your hosting service.

Solution 22 - Iframe

It's surprising that no one here has ever mentioned Apache server's settings (*.conf files) or .htaccess file itself as being a cause of this error. Search through your .htaccess or Apache configuration files, making sure that you don't have the following set to DENY:

Header always set X-Frame-Options DENY

Changing it to SAMEORIGIN, makes things work as expected:

Header always set X-Frame-Options SAMEORIGIN

Solution 23 - Iframe

i had this problem, and resolved it editing httd.conf

<IfModule headers_module>
	<IfVersion >= 2.4.7 >
		Header always setifempty X-Frame-Options GOFORIT
	</IfVersion>
	<IfVersion < 2.4.7 >
		Header always merge X-Frame-Options GOFORIT
	</IfVersion>
</IfModule>

i changed SAMEORIGIN to GOFORIT and restarted server

Solution 24 - Iframe

Use this line given below instead of header() function.

echo "<script>window.top.location = 'https://apps.facebook.com/yourappnamespace/';</script>";

Solution 25 - Iframe

Edit .htaccess if you want to remove X-Frame-Options from an entire directory.

And add the line: Header always unset X-Frame-Options

[contents from: https://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options]

Solution 26 - Iframe

Site owners use the X-Frame-Options response header so that their website cannot be opened in an Iframe. This helps to secure the users against clickjacking attack

There are a couple of approaches that you can try if you want to disable X-Frame-Options on your own machine.

Configuration at Server-Side

If you own the server or can work with the site owner then you can ask to set up a configuration to not send the Iframe buster response headers based on certain conditions. Conditions could be an additional request header or a parameter in the URL.

For example - The site owner can add an additional code to not send Iframe buster headers when the site is opened with ?in_debug_mode=true query param.

Use Browser extension like Requestly to remove response headers

You can use any browser extension like Requestly which allows you to modify the request & response headers. Here's a Requestly blog that explains how to embed sites in Iframe by bypassing Iframe buster headers.

enter image description here

Configure a Pass-through Proxy and remove headers from it

If you need to bypass Iframe buster headers for multiple folks, then you can also configure a pass-through proxy that just removes the frame buster response headers and return back the response. This is however a lot complicated to write, set up. There are some other challenges like authentication etc with the sites opened in Iframe through a proxy but this approach can work for simple sites pretty well.

PS - I have built both solutions and have first-hand experience with both.

Solution 27 - Iframe

Try this thing, i dont think anyone suggested this in the Topic, this will resolve like 70% of your issue, for some other pages, you have to scrap, i have the full solution but not for public,

ADD below to your iframe

sandbox="allow-same-origin allow-scripts allow-popups allow-forms"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGaren CheckleyView Question on Stackoverflow
Solution 1 - IframeSeanView Answer on Stackoverflow
Solution 2 - IframeWilView Answer on Stackoverflow
Solution 3 - IframeQ StudioView Answer on Stackoverflow
Solution 4 - IframeniutechView Answer on Stackoverflow
Solution 5 - Iframeuser669677View Answer on Stackoverflow
Solution 6 - IframeKevin VellaView Answer on Stackoverflow
Solution 7 - IframeEric CorrielView Answer on Stackoverflow
Solution 8 - IframeMohammad Ali AkbariView Answer on Stackoverflow
Solution 9 - IframeFlorisView Answer on Stackoverflow
Solution 10 - IframekoninosView Answer on Stackoverflow
Solution 11 - IframeAvatarView Answer on Stackoverflow
Solution 12 - IframeDr. Aaron DishnoView Answer on Stackoverflow
Solution 13 - IframeJohn WhiteView Answer on Stackoverflow
Solution 14 - IframeZane ClaesView Answer on Stackoverflow
Solution 15 - IframeGiriView Answer on Stackoverflow
Solution 16 - IframepjammerView Answer on Stackoverflow
Solution 17 - IframejiminikizView Answer on Stackoverflow
Solution 18 - IframeKyle BakerView Answer on Stackoverflow
Solution 19 - Iframeswatkat7View Answer on Stackoverflow
Solution 20 - IframemattdlockyerView Answer on Stackoverflow
Solution 21 - Iframekinghenry14View Answer on Stackoverflow
Solution 22 - IframeIliaView Answer on Stackoverflow
Solution 23 - IframeArthur TsidkilovView Answer on Stackoverflow
Solution 24 - IframeHemanta NandiView Answer on Stackoverflow
Solution 25 - IframeNikhil GyanView Answer on Stackoverflow
Solution 26 - IframeSachinView Answer on Stackoverflow
Solution 27 - IframeZulqurnain abbasView Answer on Stackoverflow