Tribute Page (Molly Nilsson) feedback needed! :)

Hey there! I’m looking forward to receive any constructive criticism for my tribute page.
I picked Molly Nilsson, 'cause she is my favourite singer.

I decided not to use Bootstrap, since this is new to me - I’ve learned flexbox before.
Let me know! <3 <3

Here we go: https://codepen.io/lucadebort/pen/WdRjQe

Hi @lucadebort,

  • Target blank vulnerability
<a href="http://darkskiesassociation.org/" target="_blank">

MDN documentation:

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

Note: When using target, consider adding rel=“noopener noreferrer”
to avoid exploitation of the window.opener API.

About rel=noopener

TL;DR If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.

Target="_blank" - the most underestimated vulnerability ever

People using target=‘_blank’ links usually have no idea about this curious fact:
The page we’re linking to gains partial access to the linking page via the window.opener object.
The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalf… Users trust the page that is already opened, they won’t get suspicious.

How to fix
Add this to your outgoing links.

rel="noopener"

Update: FF does not support “noopener” so add this.

rel="noopener noreferrer"

Remember, that every time you open a new window via window.open(); you’re also “vulnerable” to this, so always reset the “opener” property

var newWnd = window.open();
newWnd.opener = null;

Cheers and happy coding :slight_smile:

1 Like