In this section, we will see what the referrerpolicy attribute is and how to use it in HTML.

What is referrerpolicy Attribute in HTML <iframe> Tag?

When browsers send a request to the URL specified in the src attribute of an <iframe> element to get and load that content, browsers also send the URL from which the request is executed as a header named `referrer` (sic).

For example let’s say there’s a page with the URL www.example.com/reset-password/usernam-and-password-reset ; now on this page we have an <iframe> element and browsers want to load its content. So here browsers will send a request to that external resource to get the document but along with, they also send a header called referer (sic) with the value of “www.example.com/reset-password/usernam-and-password-reset” for this particular example, which is the page from which the request is executed.

For security reasons, this is a bad idea to let the target website (especially if it’s a third-party server) to get the address from which the request is sent from.

For example, in your URL there might be sensitive information and by allowing a third party to see this information, you’re potentially putting yourself in the danger of stealing information.

Now back to the referrerpolicy attribute: this attribute allows you to decide if your URL should be sent to the target link or not.

Based on the value that we set for referrerpolicy attribute, we can hide partially or the entire URL from the target website (Server).

HTML referrerpolicy Attribute in <iframe> Tag Syntax:

<iframe referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url"> </iframe>

<iframe> Tag referrerpolicy Attribute Values

This is the list of values that you can put as the value of referrerpolicy attribute:

Name	Description
no-referrer	No referrer information will be sent along with a request
no-referer-when-downgrage	Default. The referrer header will not be sent to origins without HTTPS
origin	Send only scheme, host, and port to the request client
origin-when-cross-origin	For cross-origin requests (when website A wants to send a request to website B): Send only scheme, host, and port. For same-origin requests (Website A requesting a page from the same website A): Also, include the path
unsafe-url	Send origin, path and query string (but not fragment, password, or username). This value is unsafe and it’s better not to use it.

Example: using referrerpolicy attribute in HTML <iframe> tag

See the Pen using referrerpolicy attribute in HTML <iframe> tag by Omid Dehghan (@odehghan) on CodePen.