Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

cyber security
cyber attack

How X-Frame-Options prevents clickjacking

Omer Kamran

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Clickjacking attacks misguide the user into clicking on invisible pages that are present on dummy pages that trigger certain actions that the user didn't intend to perform.

Prevention

HTML has options to disable elements that are responsible for such attacks. This HTML response header, known as, X-Frame-Options either disallows the browser to render a page in the X-Frame elements or blocks requests that are not made from the same origin, using the Same Origin Policy.

The HTML elements vulnerable to clickjacking attacks include:

  • <frame>
  • <iframe>
  • <embed>
  • <object>

Syntax

The two options that the user can set with X-Frame-Options are as follows:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
  • DENY: This prevents the browser from rendering any frames at all in the vulnerable HTML elements as mentioned above.
  • SAMEORIGIN: The frame tags can still be used as long as the site of the frame is the same as the one rendering the frame.

Note: Another option that was deprecated later on was ALLOW-FROM-uri, which allowed requests from the specified uri and blocked requests not made from the whitelisted ones. This option no longer works in modern browsers.

Example

We can use the HTML meta tag along with it's http-equiv attribute to set this header. This is demonstrated below:

<meta http-equiv="X-Frame-Options" content="sameorigin" />

RELATED TAGS

cyber security
cyber attack

CONTRIBUTOR

Omer Kamran
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring