Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

. #29056

Closed
wants to merge 1 commit into from
Closed

. #29056

Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions foundations/html_css/html-foundations/links-and-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,29 @@ While `href` specifies the destination link, `target` specifies where the linked

<span id="target-security"></span>You may have noticed that we snuck in the `rel` attribute above. This attribute is used to describe the relation between the current page and the linked document.

The `noopener` value prevents the opened link from gaining access to the webpage from which it was opened.
`noopener` : The `noopener` attribute ensures that a link opened in a new tab or window cannot interact with or access the original page. Without it, the new page can use JavaScript to manipulate the original page, which might pose a security risk.

The `noreferrer` value prevents the opened link from knowing which webpage or resource has a link (or 'reference') to it. The `noreferrer` value also includes the `noopener` behaviour and thus can be used by itself as well.
For example:
"<a href="https://example.com" target="_blank" rel="noopener">Open Example</a>"

In this code:

target="_blank": opens the link in a new tab.
rel="noopener": prevents the new tab from accessing the original page, ensuring security.

Without `noopener`, the new tab could use JavaScript to interact with the original page, which might not be safe.

`noreferrer`: The `noreferrer` attribute provides both privacy and security. It prevents the new page from knowing where the user came from (hiding the referrer) and also includes the behavior of `noopener`, preventing the new page from accessing the original page.

For example:
"<a href="https://example.com" target="_blank" rel="noreferrer">Visit Example</a>"

In this Example:

target="_blank": opens the link in a new tab.
rel="noreferrer": ensures the new page cannot see the referring page's address (privacy) and prevents it from accessing the original page (security).

By just using rel="noreferrer", you automatically get the benefits of both privacy and security!

Why do we need this added behaviour for opening links in new tabs? Security reasons. The prevention of access that is caused by `noopener` prevents [phishing attacks](https://www.ibm.com/topics/phishing) where the opened link may change the original webpage to a different one to trick users. This is referred to as [tabnabbing](https://owasp.org/www-community/attacks/Reverse_Tabnabbing). Adding the `noreferrer` value can be done if you wish to not let the opened link know that your webpage links to it.

Expand Down
Loading