{
    "slug": "clickjacking_csp",
    "term": "Clickjacking & CSP frame-ancestors",
    "category": "security",
    "difficulty": "intermediate",
    "short": "Tricking users into clicking hidden UI elements by overlaying a transparent iframe — prevented by CSP frame-ancestors or the X-Frame-Options header.",
    "long": "Clickjacking (UI redressing) embeds a target site in a transparent iframe, positioned over a decoy page. The victim believes they are clicking the decoy UI but actually interact with the hidden target — completing a purchase, changing a password, or granting OAuth permissions. The modern defence is the Content-Security-Policy frame-ancestors directive: frame-ancestors 'none' disallows all framing; frame-ancestors 'self' permits same-origin only; frame-ancestors https://trusted.com restricts to named origins. X-Frame-Options (DENY or SAMEORIGIN) is the legacy equivalent supported by older browsers. CSP frame-ancestors takes precedence where supported and is more granular. PHP: add both headers in a middleware for defence-in-depth.",
    "aliases": [
        "frame-ancestors directive",
        "CSP clickjacking prevention"
    ],
    "tags": [
        "csp",
        "headers",
        "browser",
        "clickjacking"
    ],
    "misconception": "X-Frame-Options and CSP frame-ancestors do exactly the same thing. frame-ancestors is more flexible (supports multiple origins) and overrides X-Frame-Options in modern browsers — but X-Frame-Options still matters for older browser support.",
    "why_it_matters": "CSP's frame-ancestors directive supersedes X-Frame-Options and provides more granular framing control — specifying exactly which origins may embed the page prevents clickjacking with a single header.",
    "common_mistakes": [
        "Using X-Frame-Options DENY without also setting CSP frame-ancestors — older header is ignored by modern browsers in some contexts.",
        "Setting frame-ancestors 'self' when the page legitimately needs to be embedded by a partner domain — too restrictive.",
        "Not setting frame-ancestors at all when X-Frame-Options is the only protection — some browsers prioritise CSP.",
        "Deploying frame-ancestors only on sensitive pages and missing others that trigger sensitive actions."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "content_security_policy",
        "db_transactions",
        "csrf",
        "cors_misconfiguration"
    ],
    "prerequisites": [
        "clickjacking",
        "content_security_policy",
        "security_headers"
    ],
    "refs": [
        "https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html"
    ],
    "bad_code": "// Only X-Frame-Options — no CSP frame-ancestors:\nheader('X-Frame-Options: DENY');\n// Modern browsers may ignore this if CSP is present without frame-ancestors\n\n// Complete protection:\nheader('X-Frame-Options: DENY');  // Legacy browsers\nheader(\"Content-Security-Policy: frame-ancestors 'none'\");  // Modern browsers",
    "good_code": "header(\"Content-Security-Policy: frame-ancestors 'none'\");\nheader('X-Frame-Options: DENY'); // legacy fallback",
    "quick_fix": "Add Content-Security-Policy: frame-ancestors 'none' — it supersedes X-Frame-Options and gives more granular control over who can embed your page",
    "severity": "medium",
    "effort": "low",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/clickjacking_csp",
        "html_url": "https://codeclaritylab.com/glossary/clickjacking_csp",
        "json_url": "https://codeclaritylab.com/glossary/clickjacking_csp.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Clickjacking & CSP frame-ancestors](https://codeclaritylab.com/glossary/clickjacking_csp) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/clickjacking_csp"
            }
        }
    }
}