DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

iamtito
iamtito

Posted on

Clickjacking attack Protection

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/

Top comments (0)

12 Gorgeous UI Components for Your Design Inspiration

>> Check out this classic DEV post <<