How to do it: Clickjacking

This version shows the written code and the rendered result together, using separated 3D cards for each layer.

Code first Rendered preview 3D cards
Back to demo
Safe lab preview: each card below shows a harmless mock layer and the exact code that renders it, so you can teach the structure visually.

Layer 1 — visible bait

This is the card people see and trust.

Rendered + Code
visible layer preview
Claim your gift
This is the harmless-looking surface the visitor believes they are clicking.
Continue

Code that renders the visible card

Teach this as the front layer the user can see.

<div class="baitBox">
  <strong>Claim your gift</strong>
  <div class="smallText">
    This is the harmless-looking surface.
  </div>
  <div class="baitBtn">Continue</div>
</div>

Layer 2 — hidden target

This is the real action aligned under the visible card.

Rendered + Code
hidden target preview
Front bait surface
Hidden target
This sits underneath the visible bait area.
Underlying action

Code that places the target underneath

Teach this as the second layer in the stack.

<div class="targetBox">
  <strong>Hidden target</strong>
  <div class="targetBtn">
    Underlying action
  </div>
</div>

.targetBox {
  position: absolute;
  right: 14px;
  top: 68px;
}

Layer 3 — transparent click zone

This is the alignment area that explains how the click gets redirected.

Rendered + Code
overlap preview
Visible button area
Real target
transparent click zone

Code that shows the overlap

Use this in the lesson to explain why positioning matters.

<div class="trapZone">
  transparent click zone
</div>

.trapZone {
  position: absolute;
  left: 120px;
  top: 120px;
  border: 2px dashed rgba(245,158,11,.55);
}

Defense — block the frame

This is the safe ending: stop framing so the layout trick cannot happen.

Rendered + Code
defense preview
Embedding blocked
Frame protections stop the page from loading inside another site.

Code that blocks the trick

Finish the teaching with the actual protection headers.

# Server-side protections
X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none';

# Result:
The page cannot be embedded inside another site.