patternjavascriptMajor

Clickjacking Prevention with X-Frame-Options and CSP

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

clickjackingx-frame-optionsframe-ancestorscspiframeui redressinghelmet

Error Messages

Refused to display in a frame because an ancestor violates the following Content Security Policy directive

Problem

Attackers can embed your site in an invisible iframe on their page, tricking users into clicking UI elements they cannot see, triggering actions on your site under the user's session.

Solution

Set X-Frame-Options: DENY and Content-Security-Policy: frame-ancestors 'none' via helmet. Use frame-ancestors 'self' only if you legitimately embed your own pages.

Why

X-Frame-Options is widely supported. The CSP frame-ancestors directive supersedes it in modern browsers and is more flexible. Together they prevent any page from framing your content.

Gotchas

X-Frame-Options: SAMEORIGIN allows framing from the same origin—only use this if you actually need it
CSP frame-ancestors is more granular—you can allow specific trusted origins while blocking all others
Chrome and Firefox respect CSP frame-ancestors; IE uses X-Frame-Options—include both for full coverage
Using frame-ancestors in a meta tag has no effect—it must be an HTTP header

Code Snippets

Setting anti-clickjacking headers with helmet

const helmet = require('helmet');

app.use(helmet.frameguard({ action: 'deny' }));
// Also set via CSP frame-ancestors for modern browsers
app.use(helmet.contentSecurityPolicy({
  directives: {
    frameAncestors: ["'none'"]
  }
}));

Revisions (0)

No revisions yet.