Yogesh Chauhan's Blog

Safe Practice to add Links to cross-origin destination

in UI/UX on December 1, 2020

When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues.

For example:

1. The other page may run on the same process as your page.

If the other page is running a lot of JavaScript, your page’s performance may suffer.

2. The other page can access your window object with the window.opener property.

This may allow the other page to redirect your page to a malicious URL.

Solution

Adding rel="noopener" or rel="noreferrer" to your target="_blank" links avoids these issues.

How to improve your site’s performance and prevent security vulnerabilities 

Add rel="noopener" or rel="noreferrer" to each external link.

When you use target=”_blank”, always add rel=”noopener” or rel=”noreferrer”.

After doing that your link will look similar to this:


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

OR if you’ve used rel="noopener" then your link will look similar to this:


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

💡rel=”noopener” prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.

💡rel=”noreferrer” has the same effect but also prevents the Referer header from being sent to the new page. 

Credit: Web Dev


Most Read

#1 How to add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscellaneousHow to Validate User Name, Email Address and URL in PHP?PHPHow to add multiple Columns in CSS like Bootstrap?CSSHow to get Current Year, Month and Date in JavaScript?JavaScriptA Quick Guide to Object-Oriented Programming in PHPPHPWhat is Etrieve Flow?Miscellaneous