target='_blank'
attribute without rel='noopener noreferrer'
JS-042218 <p className="text-sm lg:text-lg m-auto">Matthew Hosier</p>
19 <p><a href="https://github.com/https123456789" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Ben Landon</a></p>
20 <p className="text-sm lg:text-lg m-auto">Aryan Upadhyaya</p>
21 <p><a href="https://github.com/DevBro123" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Deven McWhirk</a></p>22 </div>
23 </div>
24 )
16 <p className="text-lg col-span-1 lg:col-span-2 font-semibold mb-2">Authors</p>
17 <p><a href="https://github.com/LGgameLAB" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Luke Gonsalves</a></p>
18 <p className="text-sm lg:text-lg m-auto">Matthew Hosier</p>
19 <p><a href="https://github.com/https123456789" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Ben Landon</a></p>20 <p className="text-sm lg:text-lg m-auto">Aryan Upadhyaya</p>
21 <p><a href="https://github.com/DevBro123" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Deven McWhirk</a></p>
22 </div>
14 <img class="max-h-28 mx-auto col-span-2" src="/images/SpelunkingStudios.webp"/>
15 <div className="grid grid-cols-1 lg:grid-cols-2 inline-block">
16 <p className="text-lg col-span-1 lg:col-span-2 font-semibold mb-2">Authors</p>
17 <p><a href="https://github.com/LGgameLAB" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Luke Gonsalves</a></p>18 <p className="text-sm lg:text-lg m-auto">Matthew Hosier</p>
19 <p><a href="https://github.com/https123456789" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Ben Landon</a></p>
20 <p className="text-sm lg:text-lg m-auto">Aryan Upadhyaya</p>
6 <div className="grid grid-cols-1 inline-block">
7 <p className="text-lg col-span-1 font-semibold mb-2">Links</p>
8 <p><Link href="/download" target="_blank"><a className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">Download</a></Link></p>
9 <p><a href="https://github.com/LGgameLAG/The-Caverns" target="_blank" className="text-sm lg:text-lg m-auto transition ease-in-out duration-100 hover:text-sky-600 hover:underline dark:hover:text-sky-300">GitHub Repository</a></p>10 <p className="whitespace-pre"> </p>
11 <p className="whitespace-pre lg:whitespace-normal"> </p>
12 <p className="whitespace-pre lg:whitespace-normal"> </p>
When creating a JSX element with a tag, it is often desired to have the link open in a new tab using the target='_blank'
attribute. Using this attribute unaccompanied by rel='noreferrer'
, however, is a severe security vulnerability.
Using target='_blank'
links grants the page we are linking to a partial access to the source page via the window.opener
object.
The newly opened tab can then change the window.opener.location
to some phishing page. Or execute some JavaScript on the opener page on their behalf.
Since the users trust the page that is already opened, they won't get suspicious and this might result in a security risk.
// Bad: Example 1
var Hello = <a target='_blank' href="http://example.com/"></a>
// Bad: Example 2
var Hello = <a target='_blank' href={dynamicLink}></a>
// Example 1
var Hello = <p target="_blank"></p>
// Example 2
var Hello = <a target="_blank" rel="noreferrer" href="http://example.com"></a>
// Example 3
var Hello = <a target="_blank" rel="noopener noreferrer" href="http://example.com"></a>
// Example 4
var Hello = <a target="_blank" href="relative/path/in/the/host"></a>
// Example 5
var Hello = <a target="_blank" href="/absolute/path/in/the/host"></a>
// Example 6
var Hello = <a></a>