X-Frame-Option is dead, long live Content Security Policy!

Clickjacking, (A.K.A UI Redress attack) is an attack in which an attacker utilizes multiple transparent or opaque layers in order to trick a client into clicking on a button or link on a different page; they are then mislead to think they were clicking the top level page link. Accordingly, the attacker is “hijacking” clicks meant for their page and routing them to the other, probably owned by another application and/or domain. With a carefully crafted combination of stylesheets, iframes, and text boxes, users can also be led to believe they are typing in the password to their own email or bank account,rather than typing into an invisible frame controlled by the attacker.

Existing anti-clickjacking measures include frame-busting codes and X-Frame-Options, yet it cannot be used to protect resources where the set of origins that ought to be permitted and denied is unknown, where attacks may originate from origins expected to be permitted by a use scenario, or defend against timing-based attacks which include multiple windows rather than multiple frames. Frame-busting scripts also rely on browser behavior that has not been designed to provide a security ensure. As a consequence, such scripts may be unreliable if loaded inside a sandbox or otherwise disabled.

Content Security Policy (CSP) is a declarative policy that lets a web application restrict the behavior of a document, e.g. the origins where it can load its resources from or the ways it can execute scripts. By controlling the presentation or the interactivity of a resource when its interacts with the user, it may be used  in an ambiguous or deceitful context due to the spatial and/or transient contiguity with other content displayed by the user agent.

Multiple host-source values are allowed primarily to enable scenarios involving embedded application compoments that are multiple levels below the top-level browsing context. For example, consider a service application at https://service/api/embed/. The service allows this resource to be embedded by both merchant Paul and merchant Lisa , who compete with each other. Sending:

Content-Security-Policy: frame-options https://Paul https://Lisa would allow Paul to re-frame Lisa’s resource and create fraudulent clicks, perhaps discrediting Lisa with her customers or the service. If the service used additional information (e.g. as part of a URL like https://service/api/Embed?merchant=Lisa) to send individually-tailored headers listing only the host-source values needed by each merchant, this attack would be eliminated.

Other available policy headers within CSP:

  • To prevent the resource from being displayed in an embedded context, regardless of the origin attempting to do so, and all other values in the directive are ignored, you can use:

Content-Security-Policy: frame-options 'deny'

  • You can also instruct the user agent to apply the heuristic UI redressing protections to user input events, such as click, keypress, touch, and drag, before they are delivered to the resource, using the input-protection. For example, A resource wishes to block delivery of UI events to the DOM element with the id of “submitButton” and suggests a 15% tolerance threshold for determining obstruction:

Content-Security-Policy: input-protection element-id=submitButton tolerance=15

  • A resource wishes to receive reports when the UI Security heuristic is triggered for any element in the:

Content-Security-Policy-Report-Only: input-protection; report-uri https://example.com/csp-report?unique_id=12345

  • A resource wants to allow itself to be embedded by any resource between the protected resource and the top of the window frame tree (ancestor) that are same-origin or from the origin https://check.out.me:

Content-Security-Policy: frame-options 'self' https://check.out.me

  • An example violation of JSON reports that the user agent might send to a server when the protected resource violates a sample policy:
  "csp-report": {
    "document-uri": "http://example.org/page.html",
    "referrer": "http://evil.example.com/haxor.html",
    "blocked-event-type": "click",
    "blocked-event-client-x": "325",
    "blocked-event-client-y": "122",
    "touch-event": "false",
    "device-width": "800",
    "device-height": "300",
    "blocked-target-xpath": "/html[0]/body[0]/div[6]/form[2]/input[0]",
    "violated-directive": "input-protection",
    "original-policy": "input-protection; report-uri https://example.org/csp-report.cgi?unique_id=12345"

The updated Content Security Policy (CSP) has many more feature policy headers to help protecting against Clickjacking attacks. For more information please refer to W3C’s Directives for Content Security Policy.

3 replies
  1. Abhishek Bhatnagar
    Abhishek Bhatnagar says:

    +1 to above.
    frame-options does not exist.
    consider using frame-src as well


Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *