top-layer clickjacking

demonstrates how a top-layer popover combined with `pointer-events: none` can act as a visual lure that misdirects user clicks onto a different element underneath

⚠︎ Educational demo: the login form below is a no-op; its submit handler is suppressed and no values leave the page.

"Clickjacking" is an attack sometimes leveraged by compromised or malicious web pages or scripts. The goal is to get the user to interact with the host page in a way they otherwise wouldn't, typically by obscuring or masking the interface in some enticing way.

In the example below, the attacking "lure" (the yellow overlay) leverages the top layer concept, which paints above every other element on the page, regardless of normal stack order. The lure additionally employs a pointer-events: none CSS rule, which allows clicks to pass straight through to whatever sits underneath (the obscured target).

Try clicking the lure

Username

Password

Clicks that reached the form: 0

Clicks captured by the lure: 0

Lure opacity1.00Lure has pointer-events: none

Reclaim interval (ms)

Using the controls, you can examine how this attack works. A lure is typically fully opaque (despite being "hollow" to click actions), but you can adjust the opacity using the opacity slider. Additionally, you may toggle the pointer-events: none styling and watch the counters above after clicking to see where events ultimately land. Finally, you may use the buttons to simulate a script reclaiming the top layer (for example, if another legitimate top-layer element appears). This can be done once with the "Reclaim" button, or automatically at a specified interval.

Note that this is not the only method for executing a clickjacking attack, and is provided as a non-exhaustive example to defend against.

Click here, don't worry about it.

---