Clickjacking and framing controls

A page that sends no framing header can be shown inside any other site’s page. In this lesson’s simulator 6 of 16 setups let another site do exactly that, and 5 of those 6 carry a rule that was meant to stop it, such as X-Frame-Options: ALLOW-FROM, a frame-ancestors rule in a meta element or a report-only policy. Clickjackingclickjacking: Showing a page of one site inside a frame on another site, where the user does not notice it, lined up under something harmless, so that a real click or keystroke acts on the framed page. Also called UI redress (CWE-1021). turns such a frame into a real click on a button the user never saw.

You will decide which pages must refuse frames, predict the browser’s verdict for sixteen setups, let named partners embed a page on purpose, sandbox the frames you embed yourself, and see why frame-busting scripts and SameSite cookies cannot replace the headers.

Clickjacking turns a real click into an action the user never saw

Clickjacking, also called UI redress, needs only one thing from your site: that another site may show your page in a frame. MDN describes the rest. The other site’s page places your page where the user does not notice it, lined up with something harmless of its own, so that the user’s genuine click acts on your page. OWASP files the weakness under A06:2025 Insecure Design as CWE-1021, improper restriction of rendered UI layers or frames, and the fix is a header your server sends. Step through one such visit, then the same visit with the fix:

Nothing in the request told your server that the click came through someone else’s page. That is why the defence belongs in the response, before the browser shows anything: your page tells the browser who may frame it, and everyone else gets an empty frame.

Which pages need it? Every page where one click, a drag or a few keystrokes do something that matters: paying, deleting, changing an email address or a password, granting an app access in an OAuth consent screen, signing in. In practice that is most of a signed-in app, so the sane default is that no page may be framed, and embedding is an exception you configure for the few pages that need it. ASVS 5.0.0 requirement 3.4.6 says the same: frame-ancestors on every response, blocking embedding by default.

frame-ancestors decides, X-Frame-Options is the fallback

Two headers control framing, and the browser reads them by rules that are easy to get wrong:

• Content-Security-Policy: frame-ancestors lists who may frame the page: 'none', 'self', origins such as https://partner.example, wildcard subdomains or a scheme. CSP Level 3 checks every ancestorframe ancestor: A document that contains a frame, directly or further up: the parent, its parent and so on to the top-level page. frame-ancestors and X-Frame-Options SAMEORIGIN check every one of them, not only the parent., the parent and each page above it to the top, and any one that does not match makes the browser refuse. The directive works only in an enforced header: it is ignored in a meta element, and it does not fall back to default-src.
• X-Frame-Options knows two values, DENY and SAMEORIGIN, and the HTML standard checks SAMEORIGIN against every ancestor too. A browser reads it only when no enforced frame-ancestors exists: CSP Level 3 says the directive overrides the header. A lone unknown value, ALLOW-FROM included, counts as no header at all, and two different values make the browser refuse when one of them is DENY or SAMEORIGIN.

This program applies both rules to sixteen setups of one bank page. Each case names the headers and the chain of ancestors that frames it:

// mayRender(page, headers, ancestors) answers what a browser does when the page arrives in a frame: render it or
// refuse it. It follows two specifications: CSP Level 3 for frame-ancestors (every ancestor is checked; the directive
// counts only in an enforced header, never in a meta element or a report-only policy) and the HTML standard's check
// of X-Frame-Options, which applies only when no enforced frame-ancestors exists. Source matching covers the forms
// this lesson uses: 'none', 'self', https://host, https://*.host and the bare scheme https:.

const originOf = (url) => url.match(/^[a-z]+:\/\/[^/]+/)[0];

function matches(source, ancestor, self) {
  if (source === "'self'") return ancestor === self;
  if (/^[a-z]+:$/.test(source)) return ancestor.startsWith(`${source}//`);
  const [scheme, host] = source.split('://');
  const [aScheme, aHost] = ancestor.split('://');
  if (scheme !== aScheme) return false;
  if (host.startsWith('*.')) return aHost.endsWith(host.slice(1));
  return aHost === host;
}

function mayRender(page, headers, ancestors) {
  if (ancestors.length === 0) return ['render', 'not in a frame'];
  const self = originOf(page);
  const fa = /frame-ancestors([^;]*)/.exec(headers.csp ?? '');
  if (fa) {
    const sources = fa[1].trim().split(/\s+/);
    for (const a of ancestors) {
      if (sources[0] === "'none'" || !sources.some((s) => matches(s, a, self))) return ['refuse', `frame-ancestors does not allow ${a}`];
    }
    return ['render', headers.xfo ? 'frame-ancestors allows every ancestor; X-Frame-Options ignored' : 'frame-ancestors allows every ancestor'];
  }
  if (headers.xfo) {
    const values = new Set(headers.xfo.split(',').map((v) => v.trim().toLowerCase()));
    const known = ['deny', 'sameorigin', 'allowall'].some((v) => values.has(v));
    if (values.size > 1) return known ? ['refuse', 'X-Frame-Options has conflicting values'] : ['render', 'X-Frame-Options has no valid value'];
    if (values.has('deny')) return ['refuse', 'X-Frame-Options DENY'];
    if (values.has('sameorigin')) {
      const other = ancestors.find((a) => a !== self);
      return other ? ['refuse', `SAMEORIGIN, and ${other} is an ancestor`] : ['render', 'SAMEORIGIN, every ancestor is the same origin'];
    }
    return ['render', `X-Frame-Options "${headers.xfo}" is ignored`];
  }
  const ignored = headers.cspMeta
    ? 'frame-ancestors in a meta element is ignored'
    : headers.cspReportOnly
      ? 'report-only, so the frame is only reported'
      : headers.csp
        ? 'no frame-ancestors, and default-src does not cover it'
        : 'no framing control';
  return ['render', ignored];
}

const BANK = 'https://bank.example/account';
const SELF = 'https://bank.example';
const OTHER = 'https://other.example';
const PARTNER = 'https://partner.example';

const cases = [
  ['no headers', {}, [OTHER]],
  ['XFO DENY', { xfo: 'DENY' }, [OTHER]],
  ['XFO DENY, own page frames it', { xfo: 'DENY' }, [SELF]],
  ['XFO SAMEORIGIN, own page', { xfo: 'SAMEORIGIN' }, [SELF]],
  ['XFO SAMEORIGIN, other site on top', { xfo: 'SAMEORIGIN' }, [SELF, OTHER]],
  ['XFO ALLOW-FROM partner', { xfo: 'ALLOW-FROM https://partner.example' }, [OTHER]],
  ['XFO SAMEORIGIN and DENY', { xfo: 'SAMEORIGIN, DENY' }, [SELF]],
  ["CSP 'none', own page", { csp: "frame-ancestors 'none'" }, [SELF]],
  ["CSP 'self' partner, partner", { csp: "frame-ancestors 'self' https://partner.example" }, [PARTNER]],
  ['CSP partner, with XFO DENY', { csp: "frame-ancestors 'self' https://partner.example", xfo: 'DENY' }, [PARTNER]],
  ['CSP partner, other on top', { csp: 'frame-ancestors https://partner.example' }, [PARTNER, OTHER]],
  ["CSP 'none' in a meta element", { cspMeta: "frame-ancestors 'none'" }, [OTHER]],
  ["CSP 'none', report-only", { cspReportOnly: "frame-ancestors 'none'" }, [OTHER]],
  ["CSP default-src 'none' only", { csp: "default-src 'none'" }, [OTHER]],
  ['CSP *.bank.example, bank.example', { csp: 'frame-ancestors https://*.bank.example' }, [SELF]],
  ['CSP https:, any https site', { csp: 'frame-ancestors https:' }, [OTHER]],
];

console.log(`The page: ${BANK}. Ancestors: the parent first, then up to the top.`);
const open = [];
cases.forEach(([name, headers, ancestors], i) => {
  const [verdict, why] = mayRender(BANK, headers, ancestors);
  if (verdict === 'render' && ancestors.some((a) => a === OTHER)) open.push(i + 1);
  console.log(`${String(i + 1).padStart(2)}. ${name.padEnd(35)}${verdict.padEnd(8)}${why}`);
});
console.log(`Rendered inside a page of other.example: cases ${open.join(', ')}`);

The page: https://bank.example/account. Ancestors: the parent first, then up to the top.
 1. no headers                         render  no framing control
 2. XFO DENY                           refuse  X-Frame-Options DENY
 3. XFO DENY, own page frames it       refuse  X-Frame-Options DENY
 4. XFO SAMEORIGIN, own page           render  SAMEORIGIN, every ancestor is the same origin
 5. XFO SAMEORIGIN, other site on top  refuse  SAMEORIGIN, and https://other.example is an ancestor
 6. XFO ALLOW-FROM partner             render  X-Frame-Options "ALLOW-FROM https://partner.example" is ignored
 7. XFO SAMEORIGIN and DENY            refuse  X-Frame-Options has conflicting values
 8. CSP 'none', own page               refuse  frame-ancestors does not allow https://bank.example
 9. CSP 'self' partner, partner        render  frame-ancestors allows every ancestor
10. CSP partner, with XFO DENY         render  frame-ancestors allows every ancestor; X-Frame-Options ignored
11. CSP partner, other on top          refuse  frame-ancestors does not allow https://other.example
12. CSP 'none' in a meta element       render  frame-ancestors in a meta element is ignored
13. CSP 'none', report-only            render  report-only, so the frame is only reported
14. CSP default-src 'none' only        render  no frame-ancestors, and default-src does not cover it
15. CSP *.bank.example, bank.example   refuse  frame-ancestors does not allow https://bank.example
16. CSP https:, any https site         render  frame-ancestors allows every ancestor
Rendered inside a page of other.example: cases 1, 6, 12, 13, 14, 16

Six setups let other.example render the page. Case 1 sends nothing. Case 6 meant to allow one partner with ALLOW-FROM, which browsers no longer understand, so the header vanished and the page opened to everyone: OWASP calls this failing open. Case 12 put the rule in a meta element and case 13 in a report-only policy, which reports and never blocks. Case 14 relied on default-src 'none', which says nothing about framing, and case 16 allowed the scheme https:, which is every site on HTTPS. The refusals are as instructive: case 5 failed because a stranger sat above a same-origin parent, and case 10 shows frame-ancestors winning over DENY.

Step through cases 10 and 5 as the browser does:

Browsers have supported frame-ancestors for years, Chrome since version 40, Edge since 15, Firefox fully since 58 and Safari since 10, by MDN’s compatibility data. MDN still advises sending X-Frame-Options as well, for browsers that lack the directive; the current ones ignore it once frame-ancestors is there.

Embedding on purpose: its own origin and named ancestors

Some pages must be embedded: a support widget, a booking form on partners’ sites, a status badge. Treat the embeddable part as a small app of its own. Serve it from an origin of its own, such as widget.example.com, so that the rest of the app keeps frame-ancestors 'none'; list the partners by origin, frame-ancestors https://partner-a.example https://partner-b.example; and keep what the embedded page can do small. An action that matters, such as paying or changing an account, should need a step the frame cannot click for the user, for example signing in again in a new window of its own.

Wildcards need care. https://*.example.com matches every subdomain but not example.com itself, which OWASP’s cheat sheet points out and case 15 of the simulator showed, so the bare host needs an entry of its own. A bare scheme such as https: or a * allows the whole web. And X-Frame-Options cannot list several origins at all; ASVS 5.0.0 calls it obsolete and asks for frame-ancestors instead. Which setup fits a page depends on two questions about it. Answer them for a page of your own app:

In short: 'none' with DENY for pages nothing needs to embed, 'self' with SAMEORIGIN for pages your own app frames, named origins without X-Frame-Options for partners, and never a scheme or nothing on a page with actions.

Sandbox the frames you embed

The same thinking applies in the other direction, when your page embeds someone else’s: a map, a video, an ad, a preview of HTML that a user wrote. The sandbox attributeiframe sandbox: The sandbox attribute of an iframe. With no tokens it takes away scripts, forms, pop-ups, navigation of the top page and the frame's own origin; each token, such as allow-scripts, gives one power back. of iframe takes powers away from the framed page, and with no tokens at all MDN says it applies every restriction: no scripts, no forms, no pop-ups, no navigation of your page, and an origin of its own that matches nothing. Each token gives one power back, so give the fewest that the content needs. This program checks seven embeds of one shop by those rules:

// What an iframe you embed may do, worked out from its sandbox tokens as MDN describes them, and what a check of the
// embed should flag. The embeds are data here; in a project the same check runs over the iframes of your templates.

function powers(tokens) {
  const has = (t) => tokens.includes(t);
  return {
    scripts: has('allow-scripts'),
    forms: has('allow-forms'),
    popups: has('allow-popups'),
    ownOrigin: has('allow-same-origin'),
    navigateTop: has('allow-top-navigation') ? 'any time' : has('allow-top-navigation-by-user-activation') ? 'after a click' : 'never',
  };
}

function flags(embed) {
  const found = [];
  const thirdParty = embed.src !== embed.page;
  if (embed.sandbox === null) {
    if (thirdParty) found.push('no sandbox: it keeps every power of its own origin');
  } else {
    const tokens = embed.sandbox.split(/\s+/).filter(Boolean);
    const p = powers(tokens);
    if (p.scripts && p.ownOrigin && !thirdParty) found.push('same origin with allow-scripts and allow-same-origin: it can remove its own sandbox');
    if (p.navigateTop === 'any time') found.push('allow-top-navigation: it can send your page elsewhere at any moment');
    if (tokens.includes('allow-popups-to-escape-sandbox')) found.push('its pop-ups run without the sandbox');
  }
  if (embed.userContent && !thirdParty) found.push('user content on your own origin: opened outside the frame, it runs unsandboxed');
  for (const feature of (embed.allow ?? '').split(/[;\s]+/).filter(Boolean)) {
    if (['camera', 'microphone', 'geolocation', 'payment'].includes(feature)) found.push(`allow grants ${feature}`);
  }
  return found;
}

const PAGE = 'https://shop.example';
const embeds = [
  { name: 'map, as pasted from the docs', src: 'https://maps.example', page: PAGE, sandbox: null, allow: 'geolocation' },
  { name: 'map, sandboxed', src: 'https://maps.example', page: PAGE, sandbox: 'allow-scripts allow-same-origin', allow: '' },
  { name: 'user HTML preview, own origin', src: PAGE, page: PAGE, sandbox: 'allow-scripts allow-same-origin', allow: '', userContent: true },
  { name: 'user HTML preview, scripts only', src: PAGE, page: PAGE, sandbox: 'allow-scripts', allow: '', userContent: true },
  { name: 'user HTML preview, own host', src: 'https://usercontent.example', page: PAGE, sandbox: 'allow-scripts', allow: '', userContent: true },
  { name: 'ad slot, generous', src: 'https://ads.example', page: PAGE, sandbox: 'allow-scripts allow-top-navigation allow-popups allow-popups-to-escape-sandbox', allow: '' },
  { name: 'ad slot, tight', src: 'https://ads.example', page: PAGE, sandbox: 'allow-scripts allow-popups allow-top-navigation-by-user-activation', allow: '' },
];

let flagged = 0;
for (const e of embeds) {
  const found = flags(e);
  if (found.length) flagged++;
  const p = e.sandbox === null ? null : powers(e.sandbox.split(/\s+/));
  const what = p
    ? `scripts ${p.scripts ? 'yes' : 'no'}, forms ${p.forms ? 'yes' : 'no'}, own origin ${p.ownOrigin ? 'yes' : 'no'}, navigates your page ${p.navigateTop}`
    : 'no sandbox';
  console.log(`${e.name}\n  ${what}`);
  for (const f of found.length ? found : ['nothing to flag']) console.log(`  - ${f}`);
}
console.log(`${flagged} of ${embeds.length} embeds flagged`);

map, as pasted from the docs
  no sandbox
  - no sandbox: it keeps every power of its own origin
  - allow grants geolocation
map, sandboxed
  scripts yes, forms no, own origin yes, navigates your page never
  - nothing to flag
user HTML preview, own origin
  scripts yes, forms no, own origin yes, navigates your page never
  - same origin with allow-scripts and allow-same-origin: it can remove its own sandbox
  - user content on your own origin: opened outside the frame, it runs unsandboxed
user HTML preview, scripts only
  scripts yes, forms no, own origin no, navigates your page never
  - user content on your own origin: opened outside the frame, it runs unsandboxed
user HTML preview, own host
  scripts yes, forms no, own origin no, navigates your page never
  - nothing to flag
ad slot, generous
  scripts yes, forms no, own origin no, navigates your page any time
  - allow-top-navigation: it can send your page elsewhere at any moment
  - its pop-ups run without the sandbox
ad slot, tight
  scripts yes, forms no, own origin no, navigates your page after a click
  - nothing to flag
4 of 7 embeds flagged

Four were flagged. The map as pasted from a provider’s docs had no sandbox and granted geolocation through allow, the attribute that sets the frame’s Permissions Policy, within what the page itself is allowed. The user’s HTML preview served from the shop’s own origin with allow-scripts allow-same-origin is the combination MDN strongly discourages: the framed document can remove its own sandbox, which leaves it no safer than no sandbox at all. Even with scripts only it was flagged, because a page on your own origin that a user can open directly runs with no sandbox; the fix is the one that passed, the preview served from a host of its own. And the generous ad slot could navigate the shop’s page at any moment and open pop-ups outside the sandbox, while the tight one could navigate it only after a click. Add referrerpolicy to send less of your address, and loading="lazy" so that a frame far down the page loads only when it comes near.

Sandboxing is the embedding side of the same rule: a frame should have the powers its job needs and nothing more.

Frame-busting scripts and SameSite are extras, not the defence

Two older answers still turn up in code and in advice, and both help less than they seem to:

MDN calls SameSite an additional, partial mitigation, and OWASP says it should not be the only protection. OWASP also describes a newer variant across separate windows, where no frame is involved and framing headers cannot help, and asks for additional safeguards on sensitive actions there. For the framed kind the core stays the same: the response header decides, and the test is an assertion on that header.

Test it as you test the baseline: request each kind of page on your own environments and check frame-ancestors, and X-Frame-Options where a page uses it, on every response, error pages included. ZAP’s passive rule 10020 flags a missing header, multiple X-Frame-Options entries, one set in a meta element and a malformed value, and the module on security testing runs it in CI. Frame only pages you own or have written permission to test.

Practise: framing headers for six pages

Write the framing headers of six kinds of page, from an OAuth consent screen to a widget for partners. The sample tests judge each answer with the rules of this lesson, once as a current browser does and once as an old browser that knows only X-Frame-Options:

/** The origins that may embed the widget. */
export const PARTNERS = ['https://partner-a.example', 'https://partner-b.example'];

/**
 * The framing headers of one kind of page: 'consent', 'download', 'error', 'app', 'widget' or 'marketing', as an
 * object of header name to value. Any other kind throws.
 */
export function framingHeaders(page) {
  // Starter: the same legacy header for every page.
  return { 'X-Frame-Options': 'SAMEORIGIN' };
}

import { test, assert } from 'mysmartcopilot:test';
import { framingHeaders } from './framing.mjs';

const PAGES = { consent: 'https://login.example.com', download: 'https://app.example.com', error: 'https://app.example.com', app: 'https://app.example.com', widget: 'https://widget.example.com', marketing: 'https://www.example.com' };

// The lesson's rules: frame-ancestors checks every ancestor; X-Frame-Options counts only without it (old browsers:
// only X-Frame-Options). Ancestors are listed from the parent up to the top.
function matches(source, ancestor, self) {
  if (source === "'self'") return ancestor === self;
  if (/^[a-z]+:$/.test(source)) return ancestor.startsWith(`${source}//`);
  const [scheme, host] = source.split('://');
  const [aScheme, aHost] = ancestor.split('://');
  if (scheme !== aScheme) return false;
  return host.startsWith('*.') ? aHost.endsWith(host.slice(1)) : aHost === host;
}
function xfoAllows(xfo, self, ancestors) {
  if (!xfo) return true;
  const v = xfo.trim().toLowerCase();
  if (v === 'deny') return false;
  if (v === 'sameorigin') return ancestors.every((a) => a === self);
  return true;
}
function allows(page, ancestors, { old = false } = {}) {
  const h = framingHeaders(page);
  const self = PAGES[page];
  const fa = /frame-ancestors([^;]*)/.exec(h['Content-Security-Policy'] ?? '');
  if (fa && !old) {
    const sources = fa[1].trim().split(/\s+/);
    return sources[0] !== "'none'" && ancestors.every((a) => sources.some((s) => matches(s, a, self)));
  }
  return xfoAllows(h['X-Frame-Options'], self, ancestors);
}

const OTHER = 'https://other.example';

test('consent, download and error pages refuse every frame, in old browsers too', () => {
  for (const page of ['consent', 'download', 'error']) {
    assert.ok(!allows(page, [PAGES[page]]), `${page}: not even its own origin`);
    assert.ok(!allows(page, [OTHER]), `${page}: not another site`);
    assert.ok(!allows(page, [PAGES[page]], { old: true }), `${page}: an old browser refuses it too`);
  }
});

test('the app may be framed by its own origin only, at every level', () => {
  assert.ok(allows('app', ['https://app.example.com']));
  assert.ok(!allows('app', ['https://www.example.com']), 'a sibling host is another origin');
  assert.ok(!allows('app', ['https://app.example.com', OTHER]), 'every ancestor counts, the top included');
  assert.ok(allows('app', ['https://app.example.com'], { old: true }) && !allows('app', [OTHER], { old: true }), 'old browsers keep the same rule');
});

test('the widget may be framed by the partners only, and sends no X-Frame-Options', () => {
  assert.ok(allows('widget', ['https://partner-a.example']) && allows('widget', ['https://partner-b.example']));
  assert.ok(!allows('widget', [OTHER]) && !allows('widget', ['https://partner-a.example', OTHER]));
  assert.ok(!('X-Frame-Options' in framingHeaders('widget')), 'X-Frame-Options cannot name partners');
});

test('the marketing page allows example.com and its https subdomains, and nothing else', () => {
  for (const a of ['https://www.example.com', 'https://example.com', 'https://blog.example.com']) assert.ok(allows('marketing', [a]), a);
  for (const a of ['http://blog.example.com', 'https://example.com.other.example', OTHER]) assert.ok(!allows('marketing', [a]), a);
  assert.ok(!('X-Frame-Options' in framingHeaders('marketing')));
  assert.throws(() => framingHeaders('video'));
});

# The origins that may embed the widget.
PARTNERS = ["https://partner-a.example", "https://partner-b.example"]


def framing_headers(page):
    """The framing headers of one kind of page: 'consent', 'download', 'error', 'app', 'widget' or 'marketing', as
    a dict of header name to value. Any other kind raises ValueError."""
    # Starter: the same legacy header for every page.
    return {"X-Frame-Options": "SAMEORIGIN"}

import re

from framing import framing_headers

PAGES = {
    "consent": "https://login.example.com", "download": "https://app.example.com", "error": "https://app.example.com",
    "app": "https://app.example.com", "widget": "https://widget.example.com", "marketing": "https://www.example.com",
}
OTHER = "https://other.example"


def matches(source, ancestor, self):
    if source == "'self'":
        return ancestor == self
    if re.fullmatch(r"[a-z]+:", source):
        return ancestor.startswith(source + "//")
    scheme, host = source.split("://")
    a_scheme, a_host = ancestor.split("://")
    if scheme != a_scheme:
        return False
    return a_host.endswith(host[1:]) if host.startswith("*.") else a_host == host


def xfo_allows(xfo, self, ancestors):
    if not xfo:
        return True
    value = xfo.strip().lower()
    if value == "deny":
        return False
    if value == "sameorigin":
        return all(a == self for a in ancestors)
    return True


def allows(page, ancestors, old=False):
    """The lesson's rules: frame-ancestors checks every ancestor, X-Frame-Options counts only without it (old
    browsers: only X-Frame-Options). Ancestors are listed from the parent up to the top."""
    headers = framing_headers(page)
    self = PAGES[page]
    fa = re.search(r"frame-ancestors([^;]*)", headers.get("Content-Security-Policy", ""))
    if fa and not old:
        sources = fa.group(1).split()
        return sources[0] != "'none'" and all(any(matches(s, a, self) for s in sources) for a in ancestors)
    return xfo_allows(headers.get("X-Frame-Options"), self, ancestors)


def test_consent_download_and_error_pages_refuse_every_frame_in_old_browsers_too():
    for page in ("consent", "download", "error"):
        assert not allows(page, [PAGES[page]]), f"{page}: not even its own origin"
        assert not allows(page, [OTHER]), f"{page}: not another site"
        assert not allows(page, [PAGES[page]], old=True), f"{page}: an old browser refuses it too"


def test_the_app_may_be_framed_by_its_own_origin_only_at_every_level():
    assert allows("app", ["https://app.example.com"])
    assert not allows("app", ["https://www.example.com"]), "a sibling host is another origin"
    assert not allows("app", ["https://app.example.com", OTHER]), "every ancestor counts, the top included"
    assert allows("app", ["https://app.example.com"], old=True) and not allows("app", [OTHER], old=True)


def test_the_widget_may_be_framed_by_the_partners_only_and_sends_no_x_frame_options():
    assert allows("widget", ["https://partner-a.example"]) and allows("widget", ["https://partner-b.example"])
    assert not allows("widget", [OTHER]) and not allows("widget", ["https://partner-a.example", OTHER])
    assert "X-Frame-Options" not in framing_headers("widget"), "X-Frame-Options cannot name partners"


def test_the_marketing_page_allows_example_com_and_its_https_subdomains_and_nothing_else():
    for a in ("https://www.example.com", "https://example.com", "https://blog.example.com"):
        assert allows("marketing", [a]), a
    for a in ("http://blog.example.com", "https://example.com.other.example", OTHER):
        assert not allows("marketing", [a]), a
    assert "X-Frame-Options" not in framing_headers("marketing")
    try:
        framing_headers("video")
    except ValueError:
        return
    raise AssertionError("an unknown kind of page must raise ValueError")

Then work through the self-check. It asks one question at a time and begins with the idea you are least sure of:

Interview questions

Warm-up: what is clickjacking, and what is the main defence?

Clickjacking is showing a page of your site inside a frame on another site, where the user does not notice it, lined up under something harmless, so that a real click or keystroke acts on your page: a payment, a deleted account, a granted permission. It needs only that your page may be framed, so the main defence is a response header that says who may frame it: Content-Security-Policy: frame-ancestors 'none', or 'self', or a list of named origins, with X-Frame-Options: DENY or SAMEORIGIN as a fallback for old browsers. It must be a header, not a meta element, and it must be on every response that renders a page. Frame-busting scripts and SameSite cookies help at the edges, but neither replaces the header.

Key takeaways

• Clickjacking needs only that another site may frame your page, so every page with an action that matters refuses framing, and embedding is a configured exception.
• frame-ancestors in an enforced header checks every ancestor and overrides X-Frame-Options; in a meta element, in a report-only policy or left to default-src it protects nothing.
• X-Frame-Options knows only DENY and SAMEORIGIN; ALLOW-FROM is ignored and fails open, and two different values, one of them DENY or SAMEORIGIN, make the browser refuse.
• Pages that must be embedded live on an origin of their own and name each partner; wildcards need the bare host added, and a scheme or * allows the whole web.
• Frames you embed get the fewest sandbox tokens they need, never allow-scripts with allow-same-origin for content on your own origin.
• Frame-busting scripts, SameSite cookies and dialogs are extras; the defence is the header, asserted by a test on every kind of response.