When convenient

Another website can put your pages inside its own

What it means

Any web page can load another page inside a box called a frame. That is how video players and maps get embedded. By default, anyone can put your pages inside a frame on their site.

The X-Frame-Options header tells browsers whether that is allowed. DENY means never. SAMEORIGIN means only your own site may frame your pages. Your site is not sending either, so every site is allowed.

Newer browsers also understand frame-ancestors, a setting inside the Content-Security-Policy header. It does the same job and is more flexible, because it can name specific other sites you trust. When both are present, browsers that understand frame-ancestors follow it.

Why it matters

The attack this prevents is called clickjacking. A scam page loads your real site in an invisible frame and places its own buttons underneath. The visitor thinks they are clicking the scam page, but the click lands on your site: a buy button, a settings change, a delete link.

It matters most on pages where a click does something, such as account pages, checkouts and admin areas. A plain brochure site has less at stake, but the fix is the same one line.

EverThread rates this as a fix to make when convenient. Nothing is broken, and the change does not affect how your own site looks.

How to check your own site

1. Open your home page in Chrome, Edge or Firefox. Right-click the page, choose Inspect, and open the Network tab.
2. Reload the page. Click the first row in the list, which is the page itself, and look at the Response Headers section.
3. Look for x-frame-options. Also look for content-security-policy and check whether it contains frame-ancestors. If neither is there, any site can frame your pages.

How to fix it

Any website

1. Decide whether any other website needs to show your pages in a frame. Most small business sites do not. Embedding other sites' content on your pages, such as a YouTube video or a booking widget, is not affected. This header only controls who may embed you.
2. If nobody needs to frame your site, use X-Frame-Options: SAMEORIGIN. It still lets your own site use frames of itself, which some editors and previews rely on. DENY is stricter and fine if you are sure nothing on your own site frames its pages.
3. If a specific partner site does need to frame you, X-Frame-Options cannot express that. Add Content-Security-Policy: frame-ancestors 'self' https://partner.example.com, with their real address. Current browsers follow it over X-Frame-Options.
4. Do not use ALLOW-FROM. Modern browsers ignore it.
5. The header must be sent by the server. Putting it in a <meta> tag on the page does nothing, and the same is true for frame-ancestors.

WordPress

1. Headers are usually best set at the server or CDN, not inside WordPress. Use SAMEORIGIN rather than DENY, because the WordPress Customizer and many page builders preview your site inside a frame of itself.
2. Check your host's dashboard for a security headers setting. Names vary by host.
3. If your host runs Apache, add the lines from the Apache section below to the .htaccess file in your site's main folder.
4. A plugin is the fallback. Search the plugin directory for "security headers" and pick one that is actively maintained. After any change, open the Customizer and your page builder to make sure the preview still loads.

Shopify, Squarespace, Wix and other hosted builders

1. These platforms run the servers, so you usually cannot add custom headers. Some already protect against framing using either header.
2. If EverThread reports it missing on a hosted site, there is usually no setting to change. You can ask the platform's support whether their pages can be framed by other sites.

Cloudflare

1. Go to Rules and create a response header rule. Depending on your dashboard, this is under Transform Rules, then Modify Response Header, or under Rules, Overview, as a Response Header Transform Rule.
2. Apply it to all incoming requests. Choose Set static, enter X-Frame-Options as the header name and SAMEORIGIN as the value, then deploy.
3. Rules only apply to traffic that goes through Cloudflare, shown as an orange cloud in your DNS settings.

Apache (.htaccess)

1. Add these lines to the .htaccess file in your site's main folder, or to your server's site settings. This needs the mod_headers module, which most hosts have on.
2. The second line is the modern equivalent. Sending both covers older and newer browsers. Leave it out if your site already sends a Content-Security-Policy, and add frame-ancestors 'self' to that policy instead.

<IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set Content-Security-Policy "frame-ancestors 'self'"
</IfModule>

Nginx

1. Add these lines inside your site's server block, then reload Nginx. As with Apache, leave out the second line if you already send a Content-Security-Policy and add frame-ancestors 'self' to it instead.

add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self'" always;

What to send your developer

Send X-Frame-Options: SAMEORIGIN (or DENY) and, ideally, Content-Security-Policy: frame-ancestors 'self'. Where both are present, CSP-aware browsers use frame-ancestors and ignore X-Frame-Options. If you need to allow specific embedders, only frame-ancestors can list them; ALLOW-FROM is obsolete. Neither works from a <meta> tag. If the site already sends a CSP, add the directive to it rather than sending a second policy: multiple CSP headers are all enforced, which is safe but harder to maintain. EverThread looks for the X-Frame-Options header by name, so keep it even when frame-ancestors is in place. See MDN on frame-ancestors and OWASP on clickjacking.

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Common questions