Clickjacking: Kenapa Klik Tombol Bisa Membajak Aksimu | TampilKit Blog

Clickjacking: Kenapa Tombol 'Follow' yang Kamu Klik Bisa Berubah Jadi Tombol 'Transfer'?

Article Content

Bayangin Budi Klik Tombol 'Putar Video Hadiah'...

Bayangin Budi mendapat link undian berhadiah dari media sosial. Halamannya menampilkan tombol besar bertuliskan "Klik untuk Putar Video & Menangkan Hadiah". Budi mengklik tombol itu tanpa curiga.

Yang Budi tidak tahu: website jahat itu diam-diam menumpuk halaman Instagram asli di atasnya dalam sebuah </code> transparan, lalu memposisikan tombol "Follow" Instagram itu <strong>persis di koordinat yang sama</strong> dengan tombol "Putar Video" yang terlihat. Klik Budi yang dikira menekan tombol video, sebenarnya mendarat di tombol Follow yang tembus pandang di lapisan atasnya. Budi baru saja mem-follow akun spam tanpa sadar sama sekali!</p><h2>Masalahnya: Browser Mengizinkan Halaman Ditumpuk Diam-Diam</h2><p>Secara default, browser mengizinkan sebuah website A dimuat di dalam <code><iframe></code> milik website B, lalu diberi <code>opacity: 0</code> (transparan sempurna) dan ditumpuk tepat di atas tombol umpan milik website B. Korban <strong>melihat</strong> tombol B, tapi <strong>mengklik</strong> tombol A. Serangan ini disebut <strong>Clickjacking (UI Redress Attack)</strong>, dan jika halaman yang dibajak adalah halaman transfer bank atau ubah <em>password</em>, akibatnya bisa jauh lebih fatal daripada sekadar follow spam.</p><h2>Nah, Di Sinilah 'X-Frame-Options' dan 'CSP frame-ancestors' Masuk!</h2><p>Solusinya bukan di sisi korban, tapi di sisi <em>website</em> yang rentan (Instagram, bank, atau aplikasi kita sendiri) — <strong>melarang</strong> halamannya ditaruh di dalam <code><iframe></code> milik domain lain sama sekali.</p><pre><code>// Cara lama (masih didukung, tapi mulai ditinggalkan) response.setHeader("X-Frame-Options", "DENY"); // Cara modern & lebih fleksibel response.setHeader( "Content-Security-Policy", "frame-ancestors 'self'" );</code></pre><p>Header <code>X-Frame-Options: DENY</code> memberi tahu browser: <em>"Kalau ada website lain mencoba menaruh saya di dalam iframe, tolak mentah-mentah, jangan pernah dirender."</em> Begitu header ini terpasang, trik menumpuk halaman transparan tadi langsung gagal total — browser akan menampilkan area kosong, bukan halaman aslinya.</p><p><strong>Intinya:</strong> Kalau aplikasimu punya halaman sensitif (checkout, ubah profil, hapus akun), pastikan servernya mengirim header <code>X-Frame-Options</code> atau <code>Content-Security-Policy: frame-ancestors</code>. Banyak framework modern (Next.js, Express + Helmet) sudah memasangnya otomatis — tapi jangan asumsikan, selalu cek langsung di tab Network browser.</p></div></div><section class="mt-8 rounded-[2rem] border bg-slate-950 p-8 text-white"><h2 class="text-3xl font-black tracking-tight">Mau langsung pakai template?</h2><p class="mt-3 max-w-2xl leading-7 text-slate-300">Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.</p><a class="mt-6 inline-flex items-center justify-center gap-2 rounded-full bg-teal-500 px-7 py-4 text-sm font-black text-white transition hover:bg-teal-400" href="/templates">Browse Templates<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></section></article><aside class="h-fit space-y-5 lg:sticky lg:top-24"><div class="rounded-3xl border bg-white p-6 shadow-sm"><h2 class="text-lg font-black text-slate-950">Article Info</h2><div class="mt-5 space-y-4"><div class="flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0"><p class="text-sm font-bold text-slate-500">Category</p><p class="text-right text-sm font-black text-slate-950">Security</p></div><div class="flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0"><p class="text-sm font-bold text-slate-500">Author</p><p class="text-right text-sm font-black text-slate-950">super admin</p></div><div class="flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0"><p class="text-sm font-bold text-slate-500">Published</p><p class="text-right text-sm font-black text-slate-950">02 September 2026</p></div><div class="flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0"><p class="text-sm font-bold text-slate-500">Reading Time</p><p class="text-right text-sm font-black text-slate-950">2 min read</p></div></div></div><div class="rounded-3xl border bg-white p-6 shadow-sm"><h2 class="text-lg font-black text-slate-950">Tags</h2><div class="mt-4 flex flex-wrap gap-2"><a class="rounded-full bg-slate-100 px-3 py-1.5 text-xs font-black text-slate-600 transition hover:bg-teal-50 hover:text-teal-600" href="/blog?search=Security">Security</a></div></div><div class="rounded-3xl border bg-white p-6 shadow-sm"><h2 class="text-lg font-black text-slate-950">Related Articles</h2><div class="mt-5 space-y-4"><a class="block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30" href="/blog/risiko-keamanan-aplikasi-bisnis-dibuat-100-persen-ai-agent"><p class="text-sm font-black leading-6 text-slate-950">Aplikasi Bisnismu Dibuat 100% oleh AI Agent? Ini Risiko yang Sering Terlewat</p><p class="mt-2 text-xs font-bold text-slate-500">2 min read</p></a><a class="block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30" href="/blog/timing-attack-cara-hacker-menebak-password-dari-kecepatan-respons"><p class="text-sm font-black leading-6 text-slate-950">Timing Attack: Gimana Hacker Bisa Nebak Password Cuma dari Kecepatan Respons Server?</p><p class="mt-2 text-xs font-bold text-slate-500">2 min read</p></a><a class="block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30" href="/blog/samesite-cookie-kenapa-bisa-ke-csrf-dari-website-iseng"><p class="text-sm font-black leading-6 text-slate-950">SameSite Cookie: Kenapa Kamu Bisa Ke-transfer Cuma Gara-Gara Buka Website Iseng?</p><p class="mt-2 text-xs font-bold text-slate-500">2 min read</p></a><a class="block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30" href="/blog/rate-limiting-cara-mencegah-brute-force-di-api"><p class="text-sm font-black leading-6 text-slate-950">Rate Limiting: Kenapa API Butuh 'Polisi Tidur' Biar Gak Jebol Brute Force?</p><p class="mt-2 text-xs font-bold text-slate-500">2 min read</p></a></div></div></aside></div></div><footer class="border-t bg-white"><div class="h-1 w-full bg-gradient-to-r from-brand-cyan via-brand-green to-brand-blue"></div><div class="mx-auto w-[90%] max-w-[1600px] py-10 md:py-12"><div class="grid gap-10 lg:grid-cols-[1.2fr_repeat(4,0.85fr)]"><div><a class="inline-flex items-center gap-2 shrink-0" aria-label="TampilKit Home" href="/"><img alt="TampilKit" width="42" height="42" decoding="async" data-nimg="1" class="size-10 shrink-0" style="color:transparent" src="/brand/tampilkit-icon.svg"/><span class="text-lg font-black tracking-tight text-slate-950">Tampil<span class="text-brand-green">Kit</span></span></a><p class="mt-4 max-w-sm text-sm leading-6 text-slate-500">TampilKit adalah marketplace template website dan mobile app siap pakai untuk developer, designer, freelancer, startup, dan bisnis digital.</p></div><div><h3 class="text-sm font-black text-slate-950">Marketplace</h3><div class="mt-4 space-y-3"><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/templates">All Templates</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/account/downloads">My Downloads</a></div></div><div><h3 class="text-sm font-black text-slate-950">Resources</h3><div class="mt-4 space-y-3"><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/blog">Blog</a></div></div><div><h3 class="text-sm font-black text-slate-950">Company</h3><div class="mt-4 space-y-3"><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/about">About</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/contact">Contact</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/cek-sertifikat">Cek Sertifikat</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/privacy-policy">Privacy Policy</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/terms">Terms</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/license">License</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/refund-policy">Refund Policy</a><a class="block text-sm font-medium leading-5 text-slate-500 transition hover:text-brand-green-darker" href="/dmca">DMCA</a></div></div></div><div class="mt-10 flex flex-col justify-between gap-4 border-t pt-6 text-sm text-slate-500 md:flex-row md:items-center"><p>© 2026 TampilKit. All rights reserved.</p><div class="flex flex-wrap gap-4"><a class="transition hover:text-brand-green-darker" href="/privacy-policy">Privacy</a><a class="transition hover:text-brand-green-darker" href="/terms">Terms</a><a class="transition hover:text-brand-green-darker" href="/license">License</a></div></div></div></footer></main><div class="fixed right-5 z-[60] flex flex-col items-end gap-3 sm:bottom-6 sm:right-6 bottom-5"><button type="button" class="group relative inline-flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-brand-cyan via-brand-green to-brand-blue text-white shadow-2xl shadow-brand-blue/40 transition hover:-translate-y-0.5" aria-label="Buka chat dengan Kit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle h-6 w-6" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-amber-400 text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-2.5 w-2.5" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></span></button></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=3052611771610657&ev=PageView&noscript=1"/></noscript><script src="/_next/static/chunks/2iho8jepmwwua.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[79520,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"\"]\n3:I[39756,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"default\"]\n5:I[44462,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"ChatbotWidget\"]\n6:I[82323,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"AppToaster\"]\n7:I[54576,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"GoogleAnalytics\"]\ne:I[68027,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"default\",1]\n12:I[97367,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"OutletBoundary\"]\n13:\"$Sreact.suspense\"\n16:I[97367,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"ViewportBoundary\"]\n18:I[97367,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/036fq5jfg-x68.css\",\"style\"]\n:HL[\"/_next/static/chunks/2l5plfipzkzfx.css\",\"style\"]\n:HL[\"/_next/static/media/fba5a26ea33df6a3-s.p.18rizl4rsrl42.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n8:[\"$\",\"img\",null,{\"height\":\"1\",\"width\":\"1\",\"alt\":\"\",\"style\":{\"display\":\"none\"},\"src\":\"https://www.facebook.com/tr?id=3052611771610657\u0026ev=PageView\u0026noscript=1\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"clickjacking-kenapa-tombol-follow-berubah-jadi-transfer\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(public)\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"clickjacking-kenapa-tombol-follow-berubah-jadi-transfer\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/036fq5jfg-x68.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2l5plfipzkzfx.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0g9tflml8inii.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/14mrh2-p_w84d.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0-c8ezcyqh2n1.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"id\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"plus_jakarta_sans_47b565cc-module__PfUFua__className\",\"children\":[[\"$\",\"$L2\",null,{\"id\":\"google-adsense\",\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2667472823829922\",\"strategy\":\"afterInteractive\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$L2\",null,{\"id\":\"meta-pixel\",\"strategy\":\"afterInteractive\",\"children\":\"\\n !function(f,b,e,v,n,t,s)\\n {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\\n n.callMethod.apply(n,arguments):n.queue.push(arguments)};\\n if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\\n n.queue=[];t=b.createElement(e);t.async=!0;\\n t.src=v;s=b.getElementsByTagName(e)[0];\\n s.parentNode.insertBefore(t,s)}(window, document,'script',\\n 'https://connect.facebook.net/en_US/fbevents.js');\\n fbq('init', '3052611771610657');\\n fbq('track', 'PageView');\\n \"}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L5\",null,{}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{\"gaId\":\"G-ZZGP3Q9LJN\"}],[\"$\",\"noscript\",null,{\"children\":\"$8\"}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:props:children:2:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:0:props:children:1:props:children:props:children:2:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:props:children:2:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:0:props:children:1:props:children:props:children:2:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":\"$L9\",\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"$La\",{\"children\":[\"$Lb\",{},null,false,null]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,null],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[\"$Lf\",\"$L10\"]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"6bYtSYYdAeZAQLpF9Cka2\"}\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"$L4\",null,{}]\na:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nb:[\"$\",\"$1\",\"c\",{\"children\":[\"$L11\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3rvqvghngiy5_.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/3bi3crjyid3cf.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L12\",null,{\"children\":[\"$\",\"$13\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@14\"}]}]]}]\n15:[]\nc:\"$W15\"\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L16\",null,{\"children\":\"$L17\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L18\",null,{\"children\":[\"$\",\"$13\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L19\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nf:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/036fq5jfg-x68.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n10:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2l5plfipzkzfx.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n17:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"1a:I[27201,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\"],\"IconMark\"]\n14:null\n"])</script><script>self.__next_f.push([1,"19:[[\"$\",\"title\",\"0\",{\"children\":\"Clickjacking: Kenapa Klik Tombol Bisa Membajak Aksimu | TampilKit Blog | TampilKit\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Penjelasan Clickjacking (UI Redress Attack) dan cara mencegahnya menggunakan header X-Frame-Options dan Content-Security-Policy frame-ancestors.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"TampilKit\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"Security\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"TampilKit\"}],[\"$\",\"meta\",\"5\",{\"name\":\"google-adsense-account\",\"content\":\"ca-pub-2667472823829922\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Clickjacking: Kenapa Tombol 'Follow' yang Kamu Klik Bisa Berubah Jadi Tombol 'Transfer'? | TampilKit Blog\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Penjelasan Clickjacking (UI Redress Attack) dan cara mencegahnya menggunakan header X-Frame-Options dan Content-Security-Policy frame-ancestors.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://storage.tradercentury.com/tampilkit/blog/5354343c-f29c-4960-8316-5761493bdff9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Credential=admin%2F20260914%2Fus-east-1%2Fs3%2Faws4_request\u0026X-Amz-Date=20260914T211600Z\u0026X-Amz-Expires=86400\u0026X-Amz-SignedHeaders=host\u0026X-Amz-Signature=0e6f947c51230048d7b97a7ad28555521a2fcbb4e9e897ad5119443ad5a963b9\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:height\",\"content\":\"720\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:alt\",\"content\":\"Clickjacking: Kenapa Tombol 'Follow' yang Kamu Klik Bisa Berubah Jadi Tombol 'Transfer'?\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"Clickjacking: Kenapa Tombol 'Follow' yang Kamu Klik Bisa Berubah Jadi Tombol 'Transfer'? | TampilKit Blog\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"Penjelasan Clickjacking (UI Redress Attack) dan cara mencegahnya menggunakan header X-Frame-Options dan Content-Security-Policy frame-ancestors.\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image\",\"content\":\"https://storage.tradercentury.com/tampilkit/blog/5354343c-f29c-4960-8316-5761493bdff9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Credential=admin%2F20260914%2Fus-east-1%2Fs3%2Faws4_request\u0026X-Amz-Date=20260914T211600Z\u0026X-Amz-Expires=86400\u0026X-Amz-SignedHeaders=host\u0026X-Amz-Signature=0e6f947c51230048d7b97a7ad28555521a2fcbb4e9e897ad5119443ad5a963b9\"}],[\"$\",\"link\",\"17\",{\"rel\":\"shortcut icon\",\"href\":\"/brand/tampilkit-icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"18\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.2vob68tjqpejf.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/brand/tampilkit-icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/brand/favicon-192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/brand/favicon-512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"apple-touch-icon\",\"href\":\"/brand/favicon-192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"$L1a\",\"23\",{}]]\n"])</script><script>self.__next_f.push([1,"1b:I[87668,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\",\"/_next/static/chunks/3rvqvghngiy5_.js\",\"/_next/static/chunks/3bi3crjyid3cf.js\"],\"SiteHeader\"]\n1c:I[22016,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\",\"/_next/static/chunks/3rvqvghngiy5_.js\",\"/_next/static/chunks/3bi3crjyid3cf.js\"],\"\"]\n1d:I[5014,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\",\"/_next/static/chunks/3rvqvghngiy5_.js\",\"/_next/static/chunks/3bi3crjyid3cf.js\"],\"default\"]\n:HL[\"https://storage.tradercentury.com/tampilkit/blog/5354343c-f29c-4960-8316-5761493bdff9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Credential=admin%2F20260914%2Fus-east-1%2Fs3%2Faws4_request\u0026X-Amz-Date=20260914T211600Z\u0026X-Amz-Expires=86400\u0026X-Amz-SignedHeaders=host\u0026X-Amz-Signature=0e6f947c51230048d7b97a7ad28555521a2fcbb4e9e897ad5119443ad5a963b9\",\"image\"]\n"])</script><script>self.__next_f.push([1,"11:[\"$\",\"main\",null,{\"className\":\"min-h-screen bg-white text-slate-950\",\"children\":[[\"$\",\"$L1b\",null,{}],[\"$\",\"section\",null,{\"className\":\"border-b bg-[radial-gradient(circle_at_top_right,#ccfbf1,transparent_30%),linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)]\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-[90%] max-w-[1600px] py-10 md:py-14\",\"children\":[[\"$\",\"$L1c\",null,{\"href\":\"/blog\",\"className\":\"inline-flex items-center gap-2 text-sm font-bold text-slate-600 transition hover:text-teal-600\",\"children\":[[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left h-4 w-4\"}],\"Back to blog\"]}],[\"$\",\"div\",null,{\"className\":\"mt-8 max-w-4xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-5 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 rounded-full border bg-white px-3 py-1 text-xs font-black text-slate-600\",\"children\":[[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\",\"key\":\"vktsd0\"}],[\"circle\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\",\"key\":\"kqv944\"}]],\"className\":\"lucide-tag h-3 w-3 text-teal-600\"}],\"Security\"]}],[]]}],[\"$\",\"h1\",null,{\"className\":\"text-4xl font-black tracking-tight text-slate-950 md:text-6xl\",\"children\":\"Clickjacking: Kenapa Tombol 'Follow' yang Kamu Klik Bisa Berubah Jadi Tombol 'Transfer'?\"}],[\"$\",\"p\",null,{\"className\":\"mt-5 max-w-3xl text-lg leading-8 text-slate-600\",\"children\":\"Budi mengklik tombol 'Putar Video' di sebuah website hadiah undian. Tanpa sadar, klik itu sebenarnya mendarat di tombol tak kasat mata milik website lain yang sedang bersembunyi tepat di atasnya.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex flex-wrap items-center gap-4 text-sm font-bold text-slate-600\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-2\",\"children\":[[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"8\",\"r\":\"5\",\"key\":\"1hypcn\"}],[\"path\",{\"d\":\"M20 21a8 8 0 0 0-16 0\",\"key\":\"rfgkzh\"}]],\"className\":\"lucide-user-round h-4 w-4 text-teal-600\"}],\"super admin\"]}],[\"$\",\"span\",null,{\"className\":\"text-slate-300\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-2\",\"children\":[[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M8 2v4\",\"key\":\"1cmpym\"}],[\"path\",{\"d\":\"M16 2v4\",\"key\":\"4m81vk\"}],[\"rect\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\",\"key\":\"1hopcy\"}],[\"path\",{\"d\":\"M3 10h18\",\"key\":\"8toen8\"}],[\"path\",{\"d\":\"M8 14h.01\",\"key\":\"6423bh\"}],[\"path\",{\"d\":\"M12 14h.01\",\"key\":\"1etili\"}],[\"path\",{\"d\":\"M16 14h.01\",\"key\":\"1gbofw\"}],[\"path\",{\"d\":\"M8 18h.01\",\"key\":\"lrp35t\"}],[\"path\",{\"d\":\"M12 18h.01\",\"key\":\"mhygvu\"}],[\"path\",{\"d\":\"M16 18h.01\",\"key\":\"kzsmim\"}]],\"className\":\"lucide-calendar-days h-4 w-4 text-teal-600\"}],\"02 September 2026\"]}],[\"$\",\"span\",null,{\"className\":\"text-slate-300\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-2\",\"children\":[[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock h-4 w-4 text-teal-600\"}],\"2 min read\"]}]]}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"mx-auto w-[90%] max-w-[1600px] py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-8 lg:grid-cols-[1fr_340px]\",\"children\":[[\"$\",\"article\",null,{\"children\":[[\"$\",\"img\",null,{\"src\":\"https://storage.tradercentury.com/tampilkit/blog/5354343c-f29c-4960-8316-5761493bdff9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Credential=admin%2F20260914%2Fus-east-1%2Fs3%2Faws4_request\u0026X-Amz-Date=20260914T211600Z\u0026X-Amz-Expires=86400\u0026X-Amz-SignedHeaders=host\u0026X-Amz-Signature=0e6f947c51230048d7b97a7ad28555521a2fcbb4e9e897ad5119443ad5a963b9\",\"alt\":\"Clickjacking: Kenapa Tombol 'Follow' yang Kamu Klik Bisa Berubah Jadi Tombol 'Transfer'?\",\"className\":\"h-[300px] w-full rounded-[2rem] border object-cover shadow-sm md:h-[460px]\"}],[\"$\",\"div\",null,{\"className\":\"mt-8 rounded-[2rem] border bg-white p-6 shadow-sm md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 inline-flex items-center gap-2 rounded-full bg-teal-50 px-4 py-2 text-sm font-black text-teal-700\",\"children\":[\"$L1e\",\"Article Content\"]}],\"$L1f\"]}],\"$L20\"]}],\"$L21\"]}]}],\"$L22\"]}]\n"])</script><script>self.__next_f.push([1,"27:I[76910,[\"/_next/static/chunks/0g9tflml8inii.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/0-c8ezcyqh2n1.js\",\"/_next/static/chunks/3rvqvghngiy5_.js\",\"/_next/static/chunks/3bi3crjyid3cf.js\"],\"SiteFooter\"]\n1e:[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 7v14\",\"key\":\"1akyts\"}],[\"path\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\",\"key\":\"ruj8y\"}]],\"className\":\"lucide-book-open h-4 w-4\"}]\n23:T80b,"])</script><script>self.__next_f.push([1," max-w-none text-slate-700 [\u0026_h1]:mb-6 [\u0026_h1]:mt-10 [\u0026_h1]:text-4xl [\u0026_h1]:font-black [\u0026_h1]:tracking-tight [\u0026_h1]:text-slate-950 [\u0026_h2]:mb-5 [\u0026_h2]:mt-10 [\u0026_h2]:text-3xl [\u0026_h2]:font-black [\u0026_h2]:tracking-tight [\u0026_h2]:text-slate-950 [\u0026_h3]:mb-4 [\u0026_h3]:mt-8 [\u0026_h3]:text-2xl [\u0026_h3]:font-black [\u0026_h3]:tracking-tight [\u0026_h3]:text-slate-950 [\u0026_h4]:mb-3 [\u0026_h4]:mt-6 [\u0026_h4]:text-xl [\u0026_h4]:font-black [\u0026_h4]:text-slate-950 [\u0026_p]:mb-5 [\u0026_p]:text-base [\u0026_p]:leading-8 [\u0026_p]:text-slate-600 [\u0026_a]:font-black [\u0026_a]:text-teal-600 [\u0026_a]:underline [\u0026_strong]:font-black [\u0026_strong]:text-slate-950 [\u0026_ul]:mb-6 [\u0026_ul]:ml-6 [\u0026_ul]:list-disc [\u0026_ul]:space-y-2 [\u0026_ul]:text-slate-600 [\u0026_ol]:mb-6 [\u0026_ol]:ml-6 [\u0026_ol]:list-decimal [\u0026_ol]:space-y-2 [\u0026_ol]:text-slate-600 [\u0026_li]:leading-8 [\u0026_blockquote]:my-6 [\u0026_blockquote]:rounded-2xl [\u0026_blockquote]:border-l-4 [\u0026_blockquote]:border-teal-500 [\u0026_blockquote]:bg-slate-50 [\u0026_blockquote]:px-5 [\u0026_blockquote]:py-4 [\u0026_blockquote]:font-medium [\u0026_blockquote]:text-slate-600 [\u0026_p_code]:rounded-lg [\u0026_p_code]:bg-slate-100 [\u0026_p_code]:px-2 [\u0026_p_code]:py-1 [\u0026_p_code]:font-mono [\u0026_p_code]:text-sm [\u0026_p_code]:font-bold [\u0026_p_code]:text-slate-900 [\u0026_li_code]:rounded-lg [\u0026_li_code]:bg-slate-100 [\u0026_li_code]:px-2 [\u0026_li_code]:py-1 [\u0026_li_code]:font-mono [\u0026_li_code]:text-sm [\u0026_li_code]:font-bold [\u0026_li_code]:text-slate-900 [\u0026_blockquote_code]:rounded-lg [\u0026_blockquote_code]:bg-white [\u0026_blockquote_code]:px-2 [\u0026_blockquote_code]:py-1 [\u0026_blockquote_code]:font-mono [\u0026_blockquote_code]:text-sm [\u0026_blockquote_code]:font-bold [\u0026_blockquote_code]:text-slate-900 [\u0026_pre]:my-7 [\u0026_pre]:max-w-full [\u0026_pre]:overflow-x-auto [\u0026_pre]:rounded-2xl [\u0026_pre]:border [\u0026_pre]:border-slate-800 [\u0026_pre]:bg-slate-950 [\u0026_pre]:p-0 [\u0026_pre]:shadow-sm [\u0026_pre_code]:block [\u0026_pre_code]:min-w-max [\u0026_pre_code]:whitespace-pre [\u0026_pre_code]:rounded-none [\u0026_pre_code]:bg-transparent [\u0026_pre_code]:p-5 [\u0026_pre_code]:font-mono [\u0026_pre_code]:text-sm [\u0026_pre_code]:font-medium [\u0026_pre_code]:leading-7 [\u0026_pre_code]:text-slate-100 [\u0026_img]:my-8 [\u0026_img]:rounded-2xl [\u0026_img]:border [\u0026_img]:shadow-sm "])</script><script>self.__next_f.push([1,"24:Ta89,"])</script><script>self.__next_f.push([1,"\u003ch2\u003eBayangin Budi Klik Tombol 'Putar Video Hadiah'...\u003c/h2\u003e\u003cp\u003eBayangin Budi mendapat link undian berhadiah dari media sosial. Halamannya menampilkan tombol besar bertuliskan \u003cstrong\u003e\"Klik untuk Putar Video \u0026 Menangkan Hadiah\"\u003c/strong\u003e. Budi mengklik tombol itu tanpa curiga.\u003c/p\u003e\u003cp\u003eYang Budi tidak tahu: \u003cem\u003ewebsite jahat\u003c/em\u003e itu diam-diam menumpuk halaman \u003cstrong\u003eInstagram asli\u003c/strong\u003e di atasnya dalam sebuah \u003ccode\u003e\u003ciframe\u003e\u003c/code\u003e transparan, lalu memposisikan tombol \"Follow\" Instagram itu \u003cstrong\u003epersis di koordinat yang sama\u003c/strong\u003e dengan tombol \"Putar Video\" yang terlihat. Klik Budi yang dikira menekan tombol video, sebenarnya mendarat di tombol Follow yang tembus pandang di lapisan atasnya. Budi baru saja mem-follow akun spam tanpa sadar sama sekali!\u003c/p\u003e\u003ch2\u003eMasalahnya: Browser Mengizinkan Halaman Ditumpuk Diam-Diam\u003c/h2\u003e\u003cp\u003eSecara default, browser mengizinkan sebuah website A dimuat di dalam \u003ccode\u003e\u003ciframe\u003e\u003c/code\u003e milik website B, lalu diberi \u003ccode\u003eopacity: 0\u003c/code\u003e (transparan sempurna) dan ditumpuk tepat di atas tombol umpan milik website B. Korban \u003cstrong\u003emelihat\u003c/strong\u003e tombol B, tapi \u003cstrong\u003emengklik\u003c/strong\u003e tombol A. Serangan ini disebut \u003cstrong\u003eClickjacking (UI Redress Attack)\u003c/strong\u003e, dan jika halaman yang dibajak adalah halaman transfer bank atau ubah \u003cem\u003epassword\u003c/em\u003e, akibatnya bisa jauh lebih fatal daripada sekadar follow spam.\u003c/p\u003e\u003ch2\u003eNah, Di Sinilah 'X-Frame-Options' dan 'CSP frame-ancestors' Masuk!\u003c/h2\u003e\u003cp\u003eSolusinya bukan di sisi korban, tapi di sisi \u003cem\u003ewebsite\u003c/em\u003e yang rentan (Instagram, bank, atau aplikasi kita sendiri) — \u003cstrong\u003emelarang\u003c/strong\u003e halamannya ditaruh di dalam \u003ccode\u003e\u003ciframe\u003e\u003c/code\u003e milik domain lain sama sekali.\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e// Cara lama (masih didukung, tapi mulai ditinggalkan)\nresponse.setHeader(\u0026quot;X-Frame-Options\u0026quot;, \u0026quot;DENY\u0026quot;);\n\n// Cara modern \u0026amp; lebih fleksibel\nresponse.setHeader(\n \u0026quot;Content-Security-Policy\u0026quot;,\n \u0026quot;frame-ancestors \u0026#039;self\u0026#039;\u0026quot;\n);\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eHeader \u003ccode\u003eX-Frame-Options: DENY\u003c/code\u003e memberi tahu browser: \u003cem\u003e\"Kalau ada website lain mencoba menaruh saya di dalam iframe, tolak mentah-mentah, jangan pernah dirender.\"\u003c/em\u003e Begitu header ini terpasang, trik menumpuk halaman transparan tadi langsung gagal total — browser akan menampilkan area kosong, bukan halaman aslinya.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eIntinya:\u003c/strong\u003e Kalau aplikasimu punya halaman sensitif (checkout, ubah profil, hapus akun), pastikan servernya mengirim header \u003ccode\u003eX-Frame-Options\u003c/code\u003e atau \u003ccode\u003eContent-Security-Policy: frame-ancestors\u003c/code\u003e. Banyak framework modern (Next.js, Express + Helmet) sudah memasangnya otomatis — tapi jangan asumsikan, selalu cek langsung di tab Network browser.\u003c/p\u003e"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"div\",null,{\"className\":\"$23\",\"dangerouslySetInnerHTML\":{\"__html\":\"$24\"}}]\n20:[\"$\",\"section\",null,{\"className\":\"mt-8 rounded-[2rem] border bg-slate-950 p-8 text-white\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-3xl font-black tracking-tight\",\"children\":\"Mau langsung pakai template?\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 max-w-2xl leading-7 text-slate-300\",\"children\":\"Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.\"}],[\"$\",\"$L1c\",null,{\"href\":\"/templates\",\"className\":\"mt-6 inline-flex items-center justify-center gap-2 rounded-full bg-teal-500 px-7 py-4 text-sm font-black text-white transition hover:bg-teal-400\",\"children\":[\"Browse Templates\",[\"$\",\"$L1d\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right h-4 w-4\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"aside\",null,{\"className\":\"h-fit space-y-5 lg:sticky lg:top-24\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded-3xl border bg-white p-6 shadow-sm\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-lg font-black text-slate-950\",\"children\":\"Article Info\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-bold text-slate-500\",\"children\":\"Category\"}],[\"$\",\"p\",null,{\"className\":\"text-right text-sm font-black text-slate-950\",\"children\":\"Security\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-bold text-slate-500\",\"children\":\"Author\"}],[\"$\",\"p\",null,{\"className\":\"text-right text-sm font-black text-slate-950\",\"children\":\"super admin\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-bold text-slate-500\",\"children\":\"Published\"}],[\"$\",\"p\",null,{\"className\":\"text-right text-sm font-black text-slate-950\",\"children\":\"02 September 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-start justify-between gap-4 border-b pb-4 last:border-b-0 last:pb-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-bold text-slate-500\",\"children\":\"Reading Time\"}],[\"$\",\"p\",null,{\"className\":\"text-right text-sm font-black text-slate-950\",\"children\":\"2 min read\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"rounded-3xl border bg-white p-6 shadow-sm\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-lg font-black text-slate-950\",\"children\":\"Tags\"}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-2\",\"children\":[[\"$\",\"$L1c\",\"Security\",{\"href\":\"/blog?search=Security\",\"className\":\"rounded-full bg-slate-100 px-3 py-1.5 text-xs font-black text-slate-600 transition hover:bg-teal-50 hover:text-teal-600\",\"children\":\"Security\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"rounded-3xl border bg-white p-6 shadow-sm\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-lg font-black text-slate-950\",\"children\":\"Related Articles\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 space-y-4\",\"children\":[[\"$\",\"$L1c\",\"a98bc898-b431-425d-bbf0-d549f7216796\",{\"href\":\"/blog/risiko-keamanan-aplikasi-bisnis-dibuat-100-persen-ai-agent\",\"className\":\"block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-black leading-6 text-slate-950\",\"children\":\"Aplikasi Bisnismu Dibuat 100% oleh AI Agent? Ini Risiko yang Sering Terlewat\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-xs font-bold text-slate-500\",\"children\":\"2 min read\"}]]}],[\"$\",\"$L1c\",\"9c6282fc-6ded-40a8-b826-1a543c4de101\",{\"href\":\"/blog/timing-attack-cara-hacker-menebak-password-dari-kecepatan-respons\",\"className\":\"block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-black leading-6 text-slate-950\",\"children\":\"Timing Attack: Gimana Hacker Bisa Nebak Password Cuma dari Kecepatan Respons Server?\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-xs font-bold text-slate-500\",\"children\":\"2 min read\"}]]}],[\"$\",\"$L1c\",\"1e8571d0-7b83-4ff0-b989-a2d2232b3cca\",{\"href\":\"/blog/samesite-cookie-kenapa-bisa-ke-csrf-dari-website-iseng\",\"className\":\"block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-black leading-6 text-slate-950\",\"children\":\"SameSite Cookie: Kenapa Kamu Bisa Ke-transfer Cuma Gara-Gara Buka Website Iseng?\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-xs font-bold text-slate-500\",\"children\":\"2 min read\"}]]}],[\"$\",\"$L1c\",\"30cc86f2-5ac4-4293-9a19-8de8627cae76\",{\"href\":\"/blog/rate-limiting-cara-mencegah-brute-force-di-api\",\"className\":\"block rounded-2xl border bg-white p-4 transition hover:border-teal-200 hover:bg-teal-50/30\",\"children\":[\"$L25\",\"$L26\"]}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"22:[\"$\",\"$L27\",null,{}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"p\",null,{\"className\":\"text-sm font-black leading-6 text-slate-950\",\"children\":\"Rate Limiting: Kenapa API Butuh 'Polisi Tidur' Biar Gak Jebol Brute Force?\"}]\n26:[\"$\",\"p\",null,{\"className\":\"mt-2 text-xs font-bold text-slate-500\",\"children\":\"2 min read\"}]\n"])</script></body></html>