Would you like to talk to a human?

Our expert online marketing team is here to help. Contact us today.

Get Started Now

How to prevent a website from being loaded in an iFrame

Avoid clickjacking or unauthorized usage of your content.

Many people may wonder why this would be an issue. Sure, there are legitimate reasons for loading website content in an iFrame. You might be using iFrames within your website to show portions of content that are updated through another tool or service, or you may be showing content from an external website that isn’t available through an API. All of this is fine and good, assuming it is above board. You may also want your website to be loaded in iFrames on external sites for similar reasons. While this is still a viable and safe method, there are a number of less ethical ways hackers and content thieves use iFrames that you should watch out for.

Common ways iFrames are exploited

Clickjacking or UI redress attack – a popular way of tricking a user to click on a button or link that is overlaid on top of your website. The user thinks they’re clicking on your website or button, but instead, they’re clicking on a transparent or camouflaged button that takes them to the attacker’s site. This will cause your customers to think they’re on your website when they’re in fact providing their information to the attacker.

Unauthorized content republishing – Other website owners may use iFrames to portion out some of your unique content to display on their website instead of getting permission to use this content, or directing their users to your website.

Common ways iFrames are exploited

Yuck, that doesn’t sound fun at all. So how do you prevent other websites or attackers from loading your website in an iFrame? There are two primary methods:

1.) Sending an X-Frame-Options HTTP response header that instructs the browser to disable framing from other domains.

An example of using PHP to send the X-Frame-Options header.

<pre lang="php">
<?PHP
header('X-Frame-Options: SAMEORIGIN');
?>
</pre>

An example of using .htaccess to send the X-Frame-Options header.

<pre lang= "text">
Header set X-Frame-Options SAMEORIGIN
</pre>

2.) Employ defensive code that will analyze how your website is loaded to confirm it is the top level window, and redirect the user if this is not the case.

<pre lang="javascript">
<style id="antiClickjack">body{display:none !important;}</style> <script type="text/javascript"> if (self === top) { var antiClickjack = document.getElementById("antiClickjack"); antiClickjack.parentNode.removeChild(antiClickjack); } else { top.location = self.location; } </script>
</pre>

Original concept: http://seclab.stanford.edu/websec/framebusting/framebust.pdf

It is safe to use a combination of these strategies and currently, in my opinion, the best method. Some older browsers do not support the X-Frame-Options header. To my knowledge, all browsers support the Javascript code in option 2 if Javascript is enabled. Using a combination would capture nearly all website users and options, helping to greatly secure your website against content thieves and clickjacking attacks.

Author:

Ryan Stemkoski

Creative Technologist

Ryan is a Creative Technologist at Zipline Interactive. He has over 15 years of experience planning, designing, developing, deploying, and marketing websites and mobile applications for businesses of all shapes and sizes.
More Articles
Ryan is a Creative Technologist at Zipline Interactive. He has over 15 years of experience planning, designing, developing, deploying, and marketing websites and mobile applications for businesses of all shapes and sizes.
More Articles

Need some help?

Our development team is available and can help troubleshoot and resolve your problem. Whether you’ve failed a security audit and need some help fixing problems, or you have a question about frames or headers, reach out and contact us today.

Get Help
5 Comments? Let's Discuss
  • Pingback: Anti click-jacking code | News from JURN.org

  • Nuno

    Awesome post, thank you for sharing. An extra solution is to add this “header(‘X-Frame-Options: DENY);” on wp-config.php . 🙂

  • Guru

    Thank You. Ryan

  • Anonymous

    Thanks for sharing this is this the case only for iframe or if someone is pulling images, .js or other code from my website it’ll also block them?

    I would like to block some of my folders and don’t want anyone to use content from that code, Do you have any resource or idea how to block someone not to use anything from that folder but allow them to use on official website.

  • Coder

    After searching for hours and trying everything to prevent others from loading wordpress sites in iframes, Nuno’s comment above was the only thing that worked. No plugins worked, no htaccess code, nothing else worked. BUT there are syntax errors in the comment. Adding this to the wp-config.php file works:

    /*** prevent a website from being loaded in an iFrame ***/
    header(‘X-Frame-Options: DENY’);

    If you want to use SAMEORIGIN…

    /*** prevent a website from being loaded in an iFrame ***/
    header(‘X-Frame-Options: SAMEORIGIN’);

LEAVE A COMMENT ON THIS ARTICLE

Ask a question, make a comment, or tell us we're wrong.

Related Articles

A sampling of other articles you may enjoy if you liked this one.

Bodine Electric Company Website Launch
Bodine Electric Company’s Improved Website Gets in Motion

You may not have heard of Bodine Electric Company, but as the world’s largest producer of electri...

Read More
Why Content is King and Why that is a Good Thing
Why Content is Still King – And Why That’s a Good Thing

“Content Is King” is an SEO philosophy that’s been around since before SEO was even an indust...

Read More
ADA Compliance Tips for Website Developers
ADA Compliance Tips for Website Developers

The internet is for everybody. That is something every developer should intrinsically understand as...

Read More