[{"data":1,"prerenderedAt":192},["ShallowReactive",2],{"blog-vulnerabilities/clickjacking":3},{"id":4,"title":5,"body":6,"category":171,"date":172,"dateModified":173,"description":174,"draft":175,"extension":176,"faq":177,"featured":175,"headerVariant":178,"image":177,"keywords":177,"meta":179,"navigation":180,"ogDescription":181,"ogTitle":177,"path":182,"readTime":183,"schemaOrg":184,"schemaType":185,"seo":186,"sitemap":187,"stem":188,"tags":189,"twitterCard":190,"__hash__":191},"blog/blog/vulnerabilities/clickjacking.md","Clickjacking Explained",{"type":7,"value":8,"toc":164},"minimark",[9,16,21,24,28,43,47,102,111,133,152],[10,11,12],"tldr",{},[13,14,15],"p",{},"Clickjacking embeds your site in an invisible iframe on a malicious page. Users think they're clicking something on the attacker's page but actually click buttons on your hidden site. Prevent it by adding X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' headers.",[17,18,20],"h2",{"id":19},"what-is-clickjacking","What Is Clickjacking?",[13,22,23],{},"Clickjacking (also called UI redressing) tricks users into clicking something different from what they perceive. Attackers embed your legitimate page in an invisible iframe and overlay their own UI elements positioned exactly where your buttons are.",[17,25,27],{"id":26},"how-clickjacking-works","How Clickjacking Works",[29,30,32],"code-block",{"label":31},"Malicious page embedding your site",[33,34,39],"pre",{"className":35,"code":37,"language":38},[36],"language-text","\u003C!-- Attacker's malicious page -->\n\u003Cstyle>\n  iframe {\n    position: absolute;\n    opacity: 0;  /* Invisible! */\n    z-index: 2;\n  }\n  .fake-button {\n    position: absolute;\n    top: 100px;\n    left: 200px;  /* Positioned over your real button */\n  }\n\u003C/style>\n\n\u003Cp>Click here to win a prize!\u003C/p>\n\u003Cdiv class=\"fake-button\">CLAIM PRIZE\u003C/div>\n\n\u003Ciframe src=\"https://yoursite.com/delete-account\">\u003C/iframe>\n\n\u003C!-- User clicks \"CLAIM PRIZE\" but actually clicks \"Delete Account\" on your site -->\n","text",[40,41,37],"code",{"__ignoreMap":42},"",[17,44,46],{"id":45},"how-to-prevent-clickjacking","How to Prevent Clickjacking",[48,49,50,66],"table",{},[51,52,53],"thead",{},[54,55,56,60,63],"tr",{},[57,58,59],"th",{},"Header",[57,61,62],{},"Value",[57,64,65],{},"Effect",[67,68,69,81,91],"tbody",{},[54,70,71,75,78],{},[72,73,74],"td",{},"X-Frame-Options",[72,76,77],{},"DENY",[72,79,80],{},"Cannot be framed by any site",[54,82,83,85,88],{},[72,84,74],{},[72,86,87],{},"SAMEORIGIN",[72,89,90],{},"Only your domain can frame it",[54,92,93,96,99],{},[72,94,95],{},"Content-Security-Policy",[72,97,98],{},"frame-ancestors 'none'",[72,100,101],{},"Modern alternative to X-Frame-Options",[29,103,105],{"label":104},"Adding headers in Next.js",[33,106,109],{"className":107,"code":108,"language":38},[36],"// next.config.js\nconst securityHeaders = [\n  {\n    key: 'X-Frame-Options',\n    value: 'DENY'\n  },\n  {\n    key: 'Content-Security-Policy',\n    value: \"frame-ancestors 'none'\"\n  }\n];\n\nmodule.exports = {\n  async headers() {\n    return [{ source: '/:path*', headers: securityHeaders }];\n  }\n};\n",[40,110,108],{"__ignoreMap":42},[112,113,114,121],"faq-section",{},[115,116,118],"faq-item",{"question":117},"Should I use X-Frame-Options or CSP frame-ancestors?",[13,119,120],{},"Use both for maximum compatibility. X-Frame-Options works in older browsers, while CSP frame-ancestors is the modern standard and offers more flexibility.",[115,122,124],{"question":123},"What if I need to embed my site somewhere?",[13,125,126,127],{},"Use CSP frame-ancestors with specific allowed domains: frame-ancestors 'self' ",[128,129,130],"a",{"href":130,"rel":131},"https://trusted-partner.com",[132],"nofollow",[134,135,136,142,147],"related-articles",{},[137,138],"related-card",{"description":139,"href":140,"title":141},"Complete header guide","/blog/how-to/add-security-headers","Add Security Headers",[137,143],{"description":144,"href":145,"title":146},"Related attack type","/blog/vulnerabilities/csrf","CSRF Explained",[137,148],{"description":149,"href":150,"title":151},"All recommended headers","/blog/best-practices/headers","Security Headers Best Practices",[153,154,157,161],"cta-box",{"href":155,"label":156},"/","Start Free Scan",[17,158,160],{"id":159},"check-your-headers","Check Your Headers",[13,162,163],{},"Our scanner verifies your clickjacking protection headers.",{"title":42,"searchDepth":165,"depth":165,"links":166},2,[167,168,169,170],{"id":19,"depth":165,"text":20},{"id":26,"depth":165,"text":27},{"id":45,"depth":165,"text":46},{"id":159,"depth":165,"text":160},"vulnerabilities","2026-01-13","2026-02-04","Clickjacking tricks users into clicking hidden elements on your site embedded in malicious pages. Learn how to prevent it with X-Frame-Options and CSP headers.",false,"md",null,"red",{"noindex":180},true,"Learn how clickjacking attacks work and how to protect your site with frame headers.","/blog/vulnerabilities/clickjacking","5 min read","[object Object]","TechArticle",{"title":5,"description":174},{"loc":182},"blog/vulnerabilities/clickjacking",[],"summary_large_image","lcewaJPrrbq45Bi8sICiJuPgp4x03M2UBvzpR2ocNYg",1775843926956]