X-Frame-Options

    What is the X-Frame-Options header?

    SHORT ANSWER

    X-Frame-Options is a security header that tells browsers whether other websites may show your pages inside a frame. Switching it to DENY stops clickjacking, where a trick page places your site invisibly under a fake button so visitors click things they didn't mean to.

    Also called: Clickjacking protection

    ON THIS PAGE

    What it means

    A frame lets one page display another page inside it. An attacker can load your site in a see-through frame on top of their own page, then trick a logged-in visitor into clicking, for example, a "delete account" button.

    The header is a single line your server sends with each page. The newer version is the frame-ancestors setting in Content-Security-Policy, and it's worth using both.

    Why it matters for vibe-coded apps

    It takes seconds to add and removes a whole class of tricks, yet most AI-built sites don't send it.

    IF THIS IS WRONG IN YOUR APP
    • Visitors can be tricked into clicking buttons on your site without knowing.
    • Actions like payments, deletes or settings changes can be triggered.
    • Browsers and security checkers flag it as missing.

    Example

    A Next.js app with no header set.

    ✕ RISKYAny website can frame your pages
    // next.config.js
    module.exports = {};  // no frame protection
    ✓ SAFERFraming is blocked for everyone
    // next.config.js
    module.exports = {
      async headers() {
        return [{
          source: "/(.*)",
          headers: [
            { key: "X-Frame-Options", value: "DENY" },
            { key: "Content-Security-Policy", value: "frame-ancestors 'none'" },
          ],
        }];
      },
    };

    If you do need your pages embedded on your own domain, use SAMEORIGIN, or list the allowed sites in frame-ancestors.

    How to check if your app has this problem

    1. 1Run a free check on your site and look for the X-Frame-Options line.
    2. 2In your browser's developer tools, open the Network tab and look at the response headers for your home page.

    The quicker way: LetMeCheck tests for this automatically, from the outside, the way an attacker would.

    Run a free scan →

    How to fix it

    1. 1Add X-Frame-Options: DENY to every page.
    2. 2Also add Content-Security-Policy with frame-ancestors 'none'.
    3. 3If you need embedding, allow only your own domains.
    4. 4Run a check again to confirm.
    FIX PROMPT · PASTE INTO YOUR AI TOOL

    Add anti-clickjacking headers to my app: X-Frame-Options set to DENY and a Content-Security-Policy with frame-ancestors 'none', on every route. Tell me if any feature needs embedding and how to allow just that.

    Check if your app has this problem

    Paste your website and we'll check for x-Frame-Options issues and other common issues in AI-built apps. Free, about a minute, and nothing on your site is changed.

    Last updated