DEV Community

loading...

Clickjacking attack Protection

iamtito profile image iamtito ・2 min read

Clickjacking, also known as a “UI redress attack” is a malicious technique for tricking a user into clicking on something different from what the user perceives, the attacker tricks the users with invisible or disguised webpage elements. This example from OWASP clearly explains it "imagine an attacker who builds a web site that has a button on it that says “click here for a free iPod”. However, on top of that web page, the attacker has loaded an iframe with your mail account and lined up exactly the “delete all messages” button directly on top of the “free iPod” button. The victim tries to click on the “free iPod” button but instead actually clicked on the invisible “delete all messages” button. In essence, the attacker has “hijacked” the user’s click, hence the name “Clickjacking”."

Preventing Clickjacking

Sending the proper Content Security Policy (CSP) frame-ancestors directive response headers that instruct the browser to not allow framing from other domains. (This replaces the older X-Frame-Options HTTP headers.)

Content Security Policy replaced the X-Frame-Options, this sends an instruction to the browser to not allow iframe from other domains. However, you can set this up for some exceptions in your application server config

Apache Config

Deny

Header always append X-Frame-Options DENY

Will be configured as

Header always append Content-Security-Policy "frame-ancestors 'deny'

DENY all but not self

Header always append X-Frame-Options SAMEORIGIN

functions as

Header always append Content-Security-Policy "frame-ancestors 'self' 

Allow self and multiple domains

Header always append Content-Security-Policy "frame-ancestors 'self' https://www.example1.com/ https://example2.com/;"

Nginx Config

Deny All

add_header Content-Security-Policy "frame-ancestors none;";

DENY all but not self

add_header Content-Security-Policy "frame-ancestors 'self';";

Allow from multiple domains

add_header Content-Security-Policy "frame-ancestors self example1.com example2.com;";

Test

👇click on HTML and change the domain to your domain

Tools for checking your headers

Reference and helpful links:

https://owasp.org/www-community/attacks/Clickjacking
https://www.keycdn.com/blog/http-security-headers
https://content-security-policy.com/examples/

Discussion

pic
Editor guide