X-Frame-Options Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify X-Frame-Options header

The X-Frame-Options is an HTTP response header that is used to indicate whether a browser should be allowed to render a page within a frame or iframe. Its main function is to prevent clickjacking attacks, which trick a user into clicking something different than what the user perceives the page to be. X-Frame-Options can be used to ensure that content cannot be embedded into other sites via iframe, preventing a malicious site from manipulating the appearance of the content.

Syntax

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM uriCopy

Directives

Two major directives apply to the X-Frame-Options header:

DENY: No rendering within a frame is allowed.

SAMEORIGIN: The rendering of a page may only happen in a frame on the same origin as the page itself.

ALLOW-FROM uri: A specific webpage can be displayed in a frame.

Examples

Utilizing the X-Frame-Options header could look like:

X-Frame-Options: DENYCopy

This would block all attempts to load the page in an iframe.

X-Frame-Options: SAMEORIGINCopy

This would allow the page to be loaded in an iframe, but only on the same domain.

X-Frame-Options: ALLOW-FROM http://example.com/Copy

This would allow the page to be loaded in an iframe, but only on the specified origin.

Browser Compatibility

How to modify X-Frame-Options header

ModHeader is a browser extension that lets you modify your HTTP request and response headers. Here is how to use it to modify the X-Frame-Options header:

1. Install and open ModHeader in your Chrome browser.
2. Click on the 'Request' drop-down in ModHeader interface and select 'Response' to modify response headers.
3. Click on the plus (+) sign to add a 'Response Header'.
4. In the name section, enter X-Frame-Options and in the value section, enter the directive for your requirement (e.g., DENY, SAMEORIGIN, or ALLOW-FROM uri).

This can help you test and ensure the correct X-Frame-Options are being set for your website, improving the security of your content. It can also allow you to tweak and experiment with settings during the development process.