From 5ec3835b5b6ceec5b6507380d6d8d709256a8825 Mon Sep 17 00:00:00 2001 From: SURYA MANOHAR Date: Thu, 7 Nov 2024 09:36:48 +0530 Subject: [PATCH] Update_noopener_noreferrer.md I have just simplified the definitions to make them more understandable and added some examples for `noopener` and `noreferrer`. --- .../html-foundations/links-and-images.md | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/foundations/html_css/html-foundations/links-and-images.md b/foundations/html_css/html-foundations/links-and-images.md index d9cd6e62cc..4202b367d4 100644 --- a/foundations/html_css/html-foundations/links-and-images.md +++ b/foundations/html_css/html-foundations/links-and-images.md @@ -62,9 +62,29 @@ While `href` specifies the destination link, `target` specifies where the linked 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: +"Open Example" + +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: +"Visit Example" + +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.