Clickjacking prevention
The Content Security Policy frame-ancestors
directive and the X-Frame-Options
header provide control over how your site may be embedded within an <iframe>
on another site. These features help prevent clickjacking.
Problem
Clickjacking is an attack whereby malicious sites trick users into clicking links or UI elements by making them appear like a trusted site the user is familiar with. This is usually done by embedding part or all of the trusted site into the malicious site via an <iframe>
. A button, link, or other UI feature is then positioned on top of that content to make the user think they are interacting with their trusted site, when in fact they are interacting with the malicious site.
Solution
Use the HTTP headers as required:
Content-Security-Policy: frame-ancestors
is preferred as it provides more granular control over site embedding. It is however not supported in IE11 and earlier, pre-Chromium versions of Edge, Safari 9.1 (desktop), and Safari 9.2 (iOS).X-Frame-Options
is less granular, but it is supported in the older browser set listed above.
The recommendation is to use both unless you know you don't need support for the older browser set.
You should deny all attempts to embed your site unless you really need to. When embedding is required, provide the minimum embedding allowance necessary. Sites that require the ability to be embedded in an <iframe>
must use JavaScript defenses and a robust Content-Security-Policy
to prevent clickjacking from malicious origins. Window.confirm()
can be used as part of your JavaScript defenses to inform the user of the action they are about to perform: See window.confirm()
Protection.
The equivalent options for each setting are as follows:
CSP value | X-Frame-Options value |
Description |
---|---|---|
frame-ancestors 'none' |
DENY |
Deny all embedding attempts. |
frame-ancestors 'self' |
SAMEORIGIN |
Allow only same-origin embedding attempts. |
frame-ancestors https://example.org |
ALLOWFROM https://example.org |
Allow embedding attempts from the specified domain. |
Note:
The X-Frame-Options: ALLOWFROM https://example.org
syntax is deprecated, and most browsers ignore it. You are recommend to set DENY
in such cases instead, and/or rely on the CSP equivalent.
Note:
Setting cookies with the SameSite
directive is also useful in clickjacking cases that rely on the user being authenticated.
Examples
Block the site from being embedded by using X-Frame-Options
and CSP:
Content-Security-Policy: frame-ancestors 'none'
X-Frame-Options: DENY
Allow the site to be embedded only on same-origin pages:
Content-Security-Policy: frame-ancestors 'self'
X-Frame-Options: SAMEORIGIN
Only allow example.org
to embed the site:
Content-Security-Policy: frame-ancestors https://example.org
# Block embedding in browsers that don't support CSP2
X-Frame-Options: DENY
See also
- Clickjacking Defense Cheat Sheet on
owasp.org
- Clickjacking Attacks and How to Prevent Them on
auth0.com
(2020)