Clickjacking

Clickjacking (UI redressing) places a transparent iframe of a legitimate site over an attacker's visible page. The victim sees attractive UI but their clicks go through to hidden elements on the framed site.

Attack HTML:

<style>
  iframe {
    position: absolute;
    width: 500px;
    height: 500px;
    opacity: 0.0;  /* Invisible! */
    z-index: 2;
  }
  .decoy {
    position: absolute;
    z-index: 1;
  }
</style>
<div class="decoy">
  <button>Win a prize!</button>  <!-- Victim clicks this -->
</div>
<iframe src="https://victim-bank.com/confirm-transfer"></iframe>
<!-- Victim actually clicks the hidden "Confirm Transfer" button -->

Clickjacking can trick users into confirming transactions, changing account settings, enabling permissions, or clicking "Like" on social media (likejacking).

The defense is to prevent your pages from being framed by other origins entirely.

X-Frame-Options (older, widely supported):

X-Frame-Options: DENY
# Or allow same-origin framing:
X-Frame-Options: SAMEORIGIN

CSP frame-ancestors (modern, more flexible):

Content-Security-Policy: frame-ancestors 'none';
# Or allow self:
Content-Security-Policy: frame-ancestors 'self';
# Or allow specific trusted origins:
Content-Security-Policy: frame-ancestors 'self' https://trusted-parent.com;

Set in Express.js (using helmet):

const helmet = require("helmet");
app.use(helmet.frameguard({ action: "deny" }));
// Or manually:
app.use((req, res, next) => {
  res.setHeader("X-Frame-Options", "DENY");
  res.setHeader("Content-Security-Policy", "frame-ancestors 'none'");
  next();
});

Set both headers for maximum browser compatibility. CSP frame-ancestors overrides X-Frame-Options in browsers that support both.