How to set X-Frame-Options on iframe

Question

If I create an iframe like this    var dialog       lt div id      dialogId      align  center  gt  lt iframe id      frameId      src      url      width  100   frameborder  0  height    frameHeightForIe8    data-ssotoken      token      gt  lt  iframe gt  lt  div gt    dialog     How can I fix the error      Refused to display  https   www google com ua  gws rd ssl  in a frame because it set  X-Frame-Options  to  SAMEORIGIN     with JavaScript

User · Answer

X-Frame-Options is a header included in the response to the request to state if the domain requested will allow itself to be displayed within a frame  It has nothing to do with javascript or HTML  and cannot be changed by the originator of the request   This website has set this header to disallow it to be displayed in an iframe  There is nothing a client can do to stop this behaviour   Further reading on X-Frame-Options

User · Answer

I m resurrecting this answer because I would like to share the workaround I created to solve this issue  If you don t have access to the website hosting the web page you want to serve within the  lt iframe gt  element  you can circumvent the X-Frame-Options SAMEORIGIN restrictions by using a CORS-enabled reverse proxy that could request the web page s  from the web server  upstream  and serve them to the end-user  Here s a visual diagram of the concept   Since I was unhappy with the CORS proxies I found  I ended up creating one myself  which I called CORSflare  it has been designed to run in a Cloudflare Worker  serverless computing   therefore it s a 100  free workaround - as long as you don t need it to accept more than 100 000 request per day  You can find the proxy source code on GitHub  the full documentation  including the installation instruction  can be found in this post of my blog

User · Answer

For this purpose you need to match the location in your apache or any other service you are using  If you are using apache then in httpd conf file      lt LocationMatch   your relative path  gt        ProxyPass absolute path of your application your relative path       ProxyPassReverse absolute path of your application your relative path     lt  LocationMatch gt

User · Answer

Since the solution wasn t really mentioned for the server side   One has to set things like this  example from apache   this isn t the best option as it allows in everything  but after you see your server working correctly you can easily change the settings              Header set Access-Control-Allow-Origin                Header set X-Frame-Options  allow-from

User · Answer

and if nothing helps and you still want to present that website in an iframe consider using X Frame Bypass Component which will utilize a proxy

User · Answer

You can t set X-Frame-Options on the iframe  That is a response header set by the domain from which you are requesting the resource  google com ua in your example   They have set the header to SAMEORIGIN in this case  which means that they have disallowed loading of the resource in an iframe outside of their domain  For more information see The X-Frame-Options response header on MDN   A quick inspection of the headers  shown here in Chrome developer tools  reveals the X-Frame-Options value returned from the host

User · Answer

not really    I used     lt system webServer gt        lt httpProtocol allowKeepAlive  true   gt          lt customHeaders gt            lt add name  X-Frame-Options  value       gt          lt  customHeaders gt        lt  httpProtocol gt    lt  system webServer gt

User · Answer

you can set the x-frame-option in web config of the site you want to load in iframe like this   lt httpProtocol gt       lt customHeaders gt         lt add name  X-Frame-Options  value       gt       lt  customHeaders gt     lt  httpProtocol gt

User · Answer

If you are following xml approach  then below code will work        lt security headers gt           lt security frame-options   gt           lt security cache-control   gt           lt security content-type-options   gt           lt security xss-protection   gt       lt  security headers gt   lt security http gt

User · Answer

The solution is to install a browser plugin    A web site which issues HTTP Header X-Frame-Options with a value of DENY  or SAMEORIGIN with a different server origin  cannot be integrated into an IFRAME    unless you change this behavior by installing a Browser plugin which ignores the X-Frame-Options Header  e g  Chrome s Ignore X-Frame Headers    Note that this not recommended at all for security reasons

User · Answer

You can not really add the x-iframe in your HTML body as it has to be provided by the site owner and it lies within the server rules   What you can probably do is create a PHP file which loads the content of target URL and iframe that php URL  this should work smoothly

User · Answer

you can do it in tomcat instance level config file  web xml  need to add the  filter  and filter-mapping  in web xml config file  this will add the  X-frame-options   DENY  in all the page as it is a global setting    lt filter gt           lt filter-name gt httpHeaderSecurity lt  filter-name gt           lt filter-class gt org apache catalina filters HttpHeaderSecurityFilter lt  filter-class gt           lt async-supported gt true lt  async-supported gt           lt init-param gt             lt param-name gt antiClickJackingEnabled lt  param-name gt             lt param-value gt true lt  param-value gt           lt  init-param gt           lt init-param gt             lt param-name gt antiClickJackingOption lt  param-name gt             lt param-value gt DENY lt  param-value gt           lt  init-param gt       lt  filter gt      lt filter-mapping gt        lt filter-name gt httpHeaderSecurity lt  filter-name gt        lt url-pattern gt    lt  url-pattern gt   lt  filter-mapping gt

User · Answer

This is also a new browser security feature to prevent phishing and other security threats  For chrome  you can download an extension to prevent the browser from denying the request  I encountered this issue while working on WordPress locally  I use this extension https   chrome google com webstore detail ignore-x-frame-headers gleekbfjekiniecknbkamfmkohkpodhe

User · Answer

In case you are in control of the Server that sends the content of the iframe you can set the setting for X-Frame-Options in your webserver   Configuring Apache  To send the X-Frame-Options header for all pages  add this to your site s configuration   Header always append X-Frame-Options SAMEORIGIN   Configuring nginx  To configure nginx to send the X-Frame-Options header  add this either to your http  server or location configuration   add header X-Frame-Options SAMEORIGIN    No configuration  This header option is optional  so if the option is not set at all  you will give the option to configure this to the next instance  e g  the visitors browser or a proxy   source  https   developer mozilla org en-US docs Web HTTP X-Frame-Options

User · Answer

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a  lt frame gt    lt iframe gt  or  lt object gt   Sites can use this to avoid clickjacking attacks  by ensuring that their content is not embedded into other sites   For More Information   https   developer mozilla org en-US docs Web HTTP Headers X-Frame-Options  I have an alternate solution for this problem  which I am going to demonstrate by using PHP   iframe php    lt iframe src  target url php  width  925  height  2400  frameborder  0   gt  lt  iframe gt    target url php    lt  php    echo file get contents  http   www example com      gt

[javascript] How to set 'X-Frame-Options' on iframe?

Examples related to javascript

Examples related to jquery

Examples related to x-frame-options