How to add the X-Frame-Options header to your website

Published by Vic Drover

X Frame Options Wordpress Security

The X-Frame-Options HTTP response header helps control whether pages from your website can be displayed inside a frame or iframe on another website.

If this header is missing, another site may be able to embed your pages inside its own content. This can increase the risk of clickjacking, where a visitor is tricked into interacting with your website through a disguised or hidden frame.

For many websites running Apache, adding the following response header is a simple way to address the issue:

X-Frame-Options: SAMEORIGIN

SAMEORIGIN allows pages to be framed by pages from the same origin while preventing unrelated websites from framing them.

What does SAMEORIGIN mean?

With the following header:

X-Frame-Options: SAMEORIGIN

a browser will allow your page to be displayed in a frame only when the page doing the framing comes from the same origin.

For example, a page on:

https://example.com

can be framed by another page on the same origin.

A page hosted on an unrelated website cannot normally frame it.

For most conventional websites, SAMEORIGIN is a useful default because it provides clickjacking protection without preventing your own site from framing its own pages.

Add X-Frame-Options SAMEORIGIN using .htaccess

If your website runs on Apache, you can usually add the header using the .htaccess file in the root directory of the website.

Before editing .htaccess, make a backup of the existing file.

  1. Log in to your hosting control panel or connect to the site using SFTP.
  2. Navigate to the website’s document root. On many cPanel accounts this is public_html.
  3. Locate the .htaccess file.
  4. If you are using cPanel File Manager and cannot see it, enable Show Hidden Files.
  5. Add the following configuration:
<IfModule mod_headers.c>
    Header always set X-Frame-Options "SAMEORIGIN"
</IfModule>
  1. Save the file.

The Header directive instructs Apache to return:

X-Frame-Options: SAMEORIGIN

with responses from your website.

The always parameter helps ensure that the header is included on a wider range of responses, including redirects and error responses.

The <IfModule> wrapper checks that Apache’s mod_headers module is available before applying the directive.

Where should the rule be added?

If your .htaccess file contains sections that are automatically managed by your CMS or another application, place the custom header configuration outside those managed sections.

For example, a WordPress .htaccess file commonly contains:

# BEGIN WordPress

...

# END WordPress

In that case, place the security-header configuration before or after that section:

<IfModule mod_headers.c>
    Header always set X-Frame-Options "SAMEORIGIN"
</IfModule>

# BEGIN WordPress

...

# END WordPress

This reduces the chance that your custom rule will be overwritten when the application updates its .htaccess configuration.

Verify that SAMEORIGIN is being returned

After saving .htaccess, verify the public HTTP response from your website.

On macOS, Linux or another system with curl, run:

curl -I https://example.com

Replace example.com with your own domain.

Look for:

X-Frame-Options: SAMEORIGIN

Header names are case-insensitive, so you may instead see:

x-frame-options: SAMEORIGIN

You can also check the response in your browser:

  1. Open your website.
  2. Open the browser’s developer tools.
  3. Select the Network panel.
  4. Reload the page.
  5. Select the main page request.
  6. Review the Response Headers.

You should see X-Frame-Options with a value of SAMEORIGIN.

If your website uses a CDN or reverse proxy such as Cloudflare, check the response returned by the public website. A proxy or CDN may modify headers after the origin server generates them.

Use Cloudflare if .htaccess is not available

If you cannot edit .htaccess, the Apache rule does not work on your hosting environment, or your website does not use Apache, you can also add X-Frame-Options with Cloudflare.

This method works when your website’s DNS record is proxied through Cloudflare. Cloudflare adds the response header before the response is sent to the visitor.

To configure it:

  1. Log in to Cloudflare and select your website.
  2. Go to Rules and open the Rules Overview.
  3. Select Create rule → Response Header Transform Rule.
  4. Give the rule a descriptive name, such as Add X-Frame-Options SAMEORIGIN.
  5. Under When incoming requests match, apply the rule to all requests for the website. If your Cloudflare zone contains multiple hostnames and you only want to protect one of them, create a matching condition for that hostname.
  6. Under Modify response header, select Set static.
  7. Enter the following header name:

X-Frame-Options

  1. Set the value to:

SAMEORIGIN

  1. Select Deploy.

Cloudflare’s Set static operation is preferable here because it sets the header to the expected value even if the origin server already returns a different X-Frame-Options value. If the header does not already exist, Cloudflare adds it.

The result sent to visitors should be:

X-Frame-Options: SAMEORIGIN

Verify the Cloudflare rule

After deploying the rule, check the public response from your website:

curl -I https://example.com

Look for:

X-Frame-Options: SAMEORIGIN

You can also verify the header using the Network panel in your browser’s developer tools.

Because Cloudflare applies the header at its edge, you are checking the response that visitors actually receive. Cloudflare’s Response Header Transform Rules modify headers on responses traveling from Cloudflare to the visitor.

If you still do not see the header, confirm that the site’s DNS record is proxied through Cloudflare. Response Header Transform Rules require proxied DNS traffic.

Which method should you use?

If you control the web server, adding the header at the origin with .htaccess is a good default because the server itself returns the correct header.

If that is not possible, a Cloudflare Response Header Transform Rule is an effective alternative for websites whose traffic passes through Cloudflare.

In either case, the goal is the same:

X-Frame-Options: SAMEORIGIN

Will SAMEORIGIN break anything?

For most websites, SAMEORIGIN should not affect normal operation.

It does not prevent your website from embedding content from another website.

Instead, it prevents another origin from embedding your pages.

This distinction is important.

If your website intentionally allows another domain, service or application to display your pages inside an iframe, SAMEORIGIN will prevent that cross-origin framing.

Test the change carefully if your site relies on this behavior.

Watchful can identify a missing X-Frame-Options header

Security response headers are easy to overlook because visitors do not normally see them.

The Watchful Vulnerability Scanner checks site configuration and security best practices, including whether important response headers are present.

If Watchful reports that X-Frame-Options is missing, adding:

<IfModule mod_headers.c>
    Header always set X-Frame-Options "SAMEORIGIN"
</IfModule>

is a straightforward solution for many Apache-hosted websites.

After making the change, run the scan again or inspect the site’s response headers to confirm that:

X-Frame-Options: SAMEORIGIN

is now being returned.

Use SAMEORIGIN to reduce clickjacking risk

A missing X-Frame-Options header does not mean that your website has been compromised.

It does mean that browsers have not been explicitly instructed to prevent unrelated websites from framing your pages.

For most websites that do not intentionally allow cross-origin framing, setting:

X-Frame-Options: SAMEORIGIN

is a simple security-hardening measure that helps reduce the risk of clickjacking.

As with any server configuration change, make a backup first and verify the public response afterward.

Categories: BlogHow toNews

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *