HTML _blank noopener noreferrer Problem

By Xah Lee. Date: .

Another bout of the complexity and tedium of software engineering. How 10 minute job became 4 hours.

HTML _blank noopener noreferrer problem

Summary: when you have a link that open in a new window, for example

<a target="_blank" href="https://en.wikipedia.org/wiki/Geometry">Geometry</a>

the destination site, in our case, Wikipedia, can use JavaScript to make your browser change link site to a fake banking site or other.

in order to prevent that, you need to add a rel="noopener", like this:

<a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Geometry">Geometry</a>

In short, you shoud always have rel="noopener" target="_blank" both together.

How 10 Minutes Job Became 4 Hours

i spend 2 hours to change all external links to open in a new windows. Then, a friend myrkraverk mentioned there's a security problem with _blank. Then, that made me spend another 2 hours to fix the problem. Faak the programers and faak their industry.

Here's various screenshots and stuff describing this software industry complexity.

Xah Discord 2021-02-11
Xah Discord 2021-02-11

Just updated about 10 thousand html files on my sites. Decided that all links, if not current domain, should opens a new tab. So it means add target="_blank" to links. Should be easy, but took 2 hours. Because, some link already has that, but at the end of the a tag, so i have to make them all consistent, that the blank attribute goes to front. Then also have to change 4 or 5 of my emacs commands that generate links. Did about maybe 40 calls to find replace scripts xah-find.el [see Emacs: xah-find.el, Find Replace in Pure Elisp] in elisp and also using golang one [see Golang: Find String (grep)].

And before doing this, had to git commit my sites first. Basically, little thing involves lots work. Most time consuming, perhaps 70% of the time spent, is to actually read what i've written some ten years ago and vaguely remember what it is talking about. Lol. For example, a link goes to gnu mailing list site in a article. I have to take few seconds to see what that link is, and what the article is talking out. If nothing out of curiosity of my old writings. Also there are tons of links to twitter and youtube. And most time consuming is dealing with lots links to odd sites. I have to look what that site is. Many of them are dead, of course. In that case, i have to change the link to dead link.

Am explaining why it's so time consuming, while one'd think perhaps it's just a find/replace which would run and finish in 5 seconds. About every month, this happens on other issues. Such as for example changing CSS systematically.

Then, came the problem:

xahlee discord 2021-02-11 ScS4m
xahlee discord 2021-02-11 ScS4m

friend myr told me there's a security problem with _blank. Then, i end up spending 2 more hours, reading about the issue and deciding and changing my site links accordingly.

Finding out what exactly is the problem

After reading several sites, here's a summary and spec and solution. I have to think decide what to do.

this site, described the problem well:

firefox kLHfGsj7ow wWDz7
https://web.dev/external-anchors-use-rel-noopener/

who is web.dev? apparently it seems to be Google's marketing site selling Google browser, by the technique of teaching web dev.

Since it's from Google, so it's trust worthy at least for the web technology info.

also, it say Google Chrome 88 is ok. So i take time to check when is Google Chrome 88, apparently it's only 1 month ago. That means, i cannot rely on do nothing. I have to do something if i wanna _blank.

Also, lots website mentioned noreferrer. So, let's look at the actual web spec to see what they say.

html noopener spec 2021-02-12
html noopener spec 2021-02-12
html noreferrer spec 2021-02-12
html noreferrer spec 2021-02-12

So now i have to make a decision on what to do. Should i maybe just remove all the damn _blank? But open a new window is very useful. Should i use noreferrer? Or just the more esoteric noopener? The noreferrer is attractive, since i don't want the YouTube Facebook twitter github etc mainstream empire faaks smelling my site. Initially, i decided to use noreferrer.

xah emacs 47k links changed 2021-02-12
xah emacs 47k links changed 2021-02-12

47 thousand link changed.

Then i realized, that may be a problem for my links to amazon or paypal or patreon. Because, with no referrer, they might suspect you are hacking them get referral money.

so change all 47k links again.

also i need to update 5 or so my emacs commands that generate links to also use the noopener.

xah emacs lisp blank noopener 2021-02-12
xah emacs lisp blank noopener 2021-02-12

I also need to update my sitemap generating script that generates a html sitemap. [see Golang: Generate Sitemap] (by the way, after 2 or 3 loop of code change and run, finally decided to remove the _blank for my own sitemap page, because if you use _blank, it opens a new window and immediately switch to that window. that defeats the purpose of opening new window, because you want to stay on the index page to open several. User can do that by control+click. )

In the end, 4 hours spent on what i thought is just 10 minutes.