Prevent Your Website from Being Embedded on Other Sites.

What is Iframe?

An iframe, short for "inline frame," is an HTML element that embeds another document within the current HTML document. It allows you to display content from another source (such as a webpage, video, map, etc.) within a designated area of a webpage.

For instance, you can use an iframe to embed a YouTube video on your webpage by including the YouTube video's URL within the iframe tag. This way, the video will be displayed on your page, but it's being loaded from YouTube's servers.

src: Specifies the URL of the content to be displayed within the iframe.
width and height: Define the dimensions of the iframe.
title: Provides a title for the embedded content for accessibility purposes.

So in case you want to embed any website onto your website, use the above HTML code. A sample of the iframe will look like below.

You can use https://codepen.io/ for coding it along with this tutorial.

The drawback of using iframe.

iFrames come with a few drawbacks and considerations:

1. Security Risks: iFrames can pose security risks, especially if the content within the iframe comes from an untrusted or malicious source. Cross-site scripting (XSS) attacks can be facilitated through iframes if proper precautions aren't taken.

2. SEO Issues: Search engines might have difficulty indexing content within iframes, affecting the visibility and SEO ranking of the embedded content.

3. Responsive Design Challenges: iFrames can sometimes present challenges in creating responsive designs for web pages. They might not automatically adjust to different screen sizes or devices.

4. Performance Impact: Loading content within iframes can slow down the overall performance of a web page, particularly if multiple iframes with heavy content are embedded.

5. Accessibility Concerns: Ensuring that content within iframes is accessible to all users, including those with disabilities, can be challenging. Screen readers might have difficulty interpreting content within iframes.

But in the worst case SEO issues, Responsive design, performance impact and accessibility concerns can be ignored, but security risks can never be taken lightly.

How do we solve the problem?

The X-Frame-Options header is a security feature that helps prevent clickjacking attacks by controlling whether a web page can be embedded within an iframe. In the context of Nginx, you can set this header to control how your web pages are allowed to be framed or embedded into other websites.

The following file could be found inside either of the following position

/etc/nginx/nginx.conf
        or 
/opt/homebrew/etc/nginx/nginx.conf

server {
    # Other server configurations
    location / {
        # Set X-Frame-Options to deny framing
        add_header X-Frame-Options "DENY";
        # Or alternatively, set it to same origin
        # add_header X-Frame-Options "SAMEORIGIN";
        # Additional configurations for this location
    }
}

DENY: This option indicates that the page cannot be displayed in a frame, regardless of the site attempting to do so.

SAMEORIGIN: This option allows the page to be displayed in a frame on the same origin as the page itself. It prevents the page from being displayed in frames on other domains.

ALLOW-FROM uri: This option allows the page to be displayed in a frame on a specific origin specified by the URI.

After adding the above code to your reverse proxy config file, like here we are using nginx which will prevent our website from getting embedded.

The iframe will look as follows. i.e. whichever website has implemented the x-frame-options will show the message "website refused to connect".

Here we are using www.google.com in iframe src. Google might have done more for security, but in case you add x-frame-options to your website it will look like this.

About The Author
Apoorv Tomar is a software developer and part of Mindroast. You can connect with him on Twitter, and Telegram. Subscribe to the newsletter for the latest curated content.