Why Add Noopener & Noreferrer To Your Links?

target="_blank" is an a tag attribute that causes a link to open up in a new tab.

There is also target="blank" thus without the underscore _, this causes every link you click on from the parent page to open up in the same new tab. Infact you can set target to any value and all links with the same value will be previewed using the same browser tab.

E.g.:

✅ Wrap📋
01: <a href="https://example.com" target="value1">Click me (value 1)</a><br>
02: <a href="https://example.com" target="value1">Click me 2 (value 1)</a><br>
03: <a href="https://example.com" target="value2">Click me 3 (value 2)<a><br>

Click me (value 1)
Click me 2 (value 1)
Click me 3 (value 2)

In the example above links 1 and 2 will open up in the same tab because they have the same target value of value1.

Anyways enough of that, lets look at the problem with opening up links externally. The page that was just opened i.e. example.com will have some level of access to the parent page.

For example the site that was just opened can change the path of the parent site using window.opener.location.replace('malicious-url.com'). This means if the owner of example.com knew what the parent or referer site looked like it could create a malicious clone and redirect the user there without them knowing.

To prevent this we can prevent the child page from gaining access to the opener object by adding the rel="noopener" attribute to our a tag. Also by adding rel="noreferrer" the child page cannot tell where the visitor came from in the first place.

In the end your link should look something like this:

✅ Wrap📋
01: <a href="https://example.com" rel="noopener noreferrer" target="value2">Click me<a>

Here is another article you might like 😊 A row must be an array or a TableSeparator instance | Laravel artisan fix