Refused to display in a frame: X-Frame-Options sameorigin

What it means

Why it happens

1. 01

   An origin is the scheme, the host, and the port. https://app.example.com and https://example.com are two origins.

2. 02

   Many sites, frameworks, and security plugins send this header by default to stop clickjacking.

3. 03

   If the page also sends CSP frame-ancestors, browsers follow frame-ancestors and ignore this header.

Check the page

Fix it if you own the site

location / {
  proxy_hide_header X-Frame-Options;
  add_header Content-Security-Policy "frame-ancestors 'self' https://your-site.com" always;
}

If you do not own the site

1. 01
   Use the official embed URL

   YouTube, Google Maps, Calendly, and others give a special embed link that allows frames.

2. 02
   Link out instead

   Open the page in a new tab with a normal link, or show a preview card that links to it.

3. 03
   Ask the owner

   Ask them to add your site to frame-ancestors. Send them this page.

Sources

• Chromium source: ancestor_throttle.cc
• Firefox source: security.properties
• WebKit source: NetworkResourceLoader.cpp
• MDN: X-Frame-Options header
• RFC 7034: HTTP Header Field X-Frame-Options