How to prevent my site page to be loaded via 3rd party site frame of iframe?

When you want to prevent third-party sites from embedding your website pages in iframes, you can implement several measures to enhance security and protect your content. Here are some methods:

1. Using the X-Frame-Options HTTP Response Header

X-Frame-Options is an HTTP response header used to control whether a webpage can be displayed within iframes, frames, embeds, or objects. You can set the following values:

• DENY: Prevents any site from embedding this website's pages in a frame.
• SAMEORIGIN: Allows only sites from the same origin to embed this website's pages in a frame.
• ALLOW-FROM uri: Allows only specific URIs to embed this website's pages in a frame.

For example, to completely prevent your pages from being embedded in iframes, add the following directive to your server configuration:

http
X-Frame-Options: DENY

2. Using Content Security Policy (CSP)

Content Security Policy is a more modern and flexible approach that allows website administrators to define how pages can be executed, including specifying which resources can be embedded. By setting the CSP's frame-ancestors directive, you can control which parent pages can embed your content. For example:

http
Content-Security-Policy: frame-ancestors 'self'

This directive tells the browser to allow only parent pages from the same origin to embed content. If you want to allow specific third-party domains, list them directly:

http
Content-Security-Policy: frame-ancestors 'self' https://example.com

3. JavaScript-based Domain Checks

Although not the most reliable due to users potentially disabling JavaScript or bypassing these checks, you can still use JavaScript to verify if your page is embedded by a third-party site. Here is a simple example:

javascript
if (window.top !== window.self) {
    window.top.location = window.location;
}

This code checks if the current page is the top-level window; if not, it attempts to redirect the top-level window to the current page's URL.

Combining Methods

To maximize security, it is recommended to combine the above methods. For instance, you can use X-Frame-Options and CSP in your server configuration, and add JavaScript checks in your frontend code as an additional security measure.

Example: Configuring Apache Server

If your website runs on an Apache server, you can set X-Frame-Options in the .htaccess file:

apache
Header always set X-Frame-Options "DENY"

And configure CSP:

apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

After this configuration, the Apache server will automatically add these HTTP headers to all pages.

Important Notes

• Note that X-Frame-Options has been superseded by the frame-ancestors directive in CSP. However, for compatibility with older browsers that may not support CSP, it may be necessary to use both methods.
• For any security measures, it is essential to regularly review and test them to ensure they remain effective, and to update them as browser and website security standards evolve.

You can use JavaScript to prevent your page from being loaded within an iframe.

javascript
if ( window.self !== window.top ) {
    window.top.location.href = window.location.href;
}

This code redirects the parent page to your page's URL, forcing it to display your content.