How to solve “Load denied by X-Frame-Options” and Http and Https configuration.

Blog Problem Solving

This tutorial describes how to fix "Load denied by X-Frame-Options", also called "Blocked by X-Frame-Options" through the configuration of protocol HTTP and HTTPS.

Often server configuration issues or protocol errors are very hard to spot and resolve by developers that have little or no Linux experience. The issue that this article discusses is related to the error message that appears on the inspector called  “Load denied by X-Frame-Options: does not permit framing” or called “Refused to display in a frame because an ancestor violates the following Content Security Policy directive” or sometime called “refused to display in an iframe because X-Frame-Options deny“, the error name really depends on the browser you are using, in some circumstances this error appears as “Blocked by X-Frame-Options“.

Even if this problem appears on the inspector this is not a Javascirpt error or a syntax error, it is actually a server configuration issue related with the configuration of the HTTP protocol, in other words this issue shows up when the tag <frame> or tag<iframe>  is not authorised to display a domain inside the same <frame> itself. To solve this problem we need to have SSH access to the server that denies the authorisation, for instance if the website displays the iframe that displays the website and blocked the iframe to display the content of, we need to have access to the server where is hosted.

Server Configuration.

First of all we need to find the file that contains the configuration of the HTTP protocol, normally (but this really depends on your server configuration and on the OS you are using) this file is called “httpd.conf” . I would suggest looking in the following folders to check if the file httpd.conf  is in these folders, use the command cd to do this:


Now try to find the file “httpd.conf” or the file “apache2.conf”. If you spot one of these files, edit the file with the following command and look for the line that contains the string “X-Frame-Options“:

sudo nano httpd.conf
sudo nano apache2.conf

If you can’t find the files mentioned above or if you don’t know what file to edit, I would suggest running the following command:

grep -ir "x-frame-options" /etc

The command “grep” will look for the string “x-frame-options” inside the folder /etc and it will print on screen the result of this search displaying the files and the related path.

Now we just need to edit the file with nano, and find the row that contains “x-frame-options” and replace that row with the following:

header always set x-frame-options "SAMEORIGIN"

Then save the file pressing Ctrl-X and restart the server with the following command:

sudo service apache2 restart

This should have solved the problem.

Fix it with PHP.

If you have the option to edit the page displayed inside the iframe  (the page on the domain, following the example above) and if this page is a PHP file, you also have the option to insert the following PHP line on the top of the file. This PHP line should change the server configuration only for the current page.

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

Cloudfare Settings.

In case if your webiste is managed by Cloudfare, the Cloudfare configuration can cause an issue and it could block your iframe too. In this case I suggest to log into your Cloudfare account and set the SSL protection type from “Full” to “Flexible” and save the settings. Please have a look at this article from the Cloudfare documentation to have more information about it.

1 comment

  1. Youre not going to believe this but I have lost all day hunting for some articles about this. I wish I knew of this site earlier, it was a good read and really helped me out. Have a good one

Click to Leave a Comment

You May Like

How to animate HTML elements and slide them in on mouse scroll using CSS and Javascript Today I want to animate a bunch of HTML elements and create an animation that moves them inside the same parent DIV once the elements are in the viewport, so only when the elements are visible to the users. […]

August 29, 2023

This tutorial will show you how to change your website cursor to any CSS shape and change the shape on hover on certain HTML elements. I have seen a lot of tutorials online about changing the HTML cursor to an SVG icon or to a PGN icon. In my case, I would like to change […]

October 15, 2022

Woocommerce Min Max Checkout is a plugin that extends your Woocommerce e-commerce in order to give you the possibility to set the minimum or maximum checkout amount or in order to set a minimum or maximum order quantity on the cart or checkout pages. With Woocommerce Min Max Checkout you can also set e customizable […]

February 12, 2022