Hasty Treat - Target=_blank security issue? What's the deal with noopener and noreferrer?

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes Barracuda Bos and Scott El Toro Loco Tolinski.

Welcome to Syntax.

Yes. Yes. Yes. It is the Syntax podcast. My name is Scott Tolinski. I'm a developer from Denver, Colorado, and with me JS always is the Wes Bos.

Ho.

Hey, yo. Hey, yo.

This episode is a Monday Sanity treat, and we're gonna be talking about nooper and, no referrer, also known as no opener and, no referrer. When I see those 2 words, they just turn into jelly in my brain, and I don't even read the whole word. Knoepner. Knoepner. And we're gonna be talking about security. What's the issue with that? If you've worked in any front end framework, you probably know with, that you can't just link off to the sites with a blank without using one of these tags. We're gonna talk about what they are, why it is, what the whole reasoning behind that is, and maybe just a little bit of the the the depths there. It's just gonna be a fun one. This episode is sponsored by Century.

Node, unfortunately, this is not a bug that will show up in your Century logs. But if it did, it would pop in there. It would show up. You'd be able to track it. You'd be able to attach a GitHub issue with one click. In fact, that's probably my favorite thing in Century. I have so many favorite features to Century because I use it every darn day. It's one of those apps I almost never Vercel, but let's see. I just pop open Century right now.

I have an error that's coming up, and it says Deno series found.

What I can do is I can say, okay. This is happening on this URL in particular, and I want people to take a look at this error. So what I do is I in my Sentry, and I I just click the box that literally says create issue. And all it does is create a GitHub issue, and I don't even have to leave Sentry.

All I have to do is click the plus. I can even assign it to somebody directly. I can add all those things that you know and love from GitHub, and it will create a link directly to this issue so that anybody who is attempting to solve this issue can find it directly in your Sentry, get the air logs, get, what happened, the breadcrumbs, and all that stuff, fix that issue, solve it, and then we can mark it as resolved. It's so fun and easy. So if you wanna try Century, head on to Century dot I o. Use the coupon code Sanity treat, all lowercase, all one word, and you are going to get 2 months for free. So thank you so much for Century for sponsoring this episode.

Wes, I know you got curious about this, which is a funny thing, though. When somebody says, you know, do something, instead of just saying, Wes. You said, I need to understand this, which to me Yeah. That's a that's a great skill to have. Sometimes I I just read things. People say do this, and I say, okay. I'll do it. Yeah. Other times, you really wanna know the the details. And I'm I'm really impressed that you you took this deep dive here. Oh, good. Yeah. I saw a tweet from Adam Argyle,

and he just, like, posted the CSS trick that you can put 2 exclamation marks in front of any link that doesn't have these attributes. And I thought, like, okay. But, like, why? Like, that's kind of annoying that we have to do this. Like, why is this a thing, and why hasn't the browser fixed it? So if you haven't heard of this before, if you have a link that has a target of underscore blank, that meaning it will open in a new tab or window.

If you do that, the website that you link to, whether it's your own website or it's another domain website, will have access to the window of the opener website. So if we have scott.com and Scott links to wes.com and Scott says araf equals wes.com, target equals blank, and I pnpm that open, now wes.com will have access to the entire window of scott.com.

And that's a huge security vulnerability because then someone could any like, any website you literally link to could maliciously then reach back into the other website and scrape data, change the page, you name it. Right? So this popped up, I don't know, maybe a year or 2 ago. And since then, we've been getting ESLint rules pop in any time on GitHub. If you sneeze at underscore blank, somebody will come with a pull request adding these 2 attributes of rel no opener and rel no referrer.

And what these do is, first, rel no opener will ensure that the website that you've linked to normally, you can just access the opener website, meaning scott.com links to wes.com.

On wes.com, I'd be able to access scott.comviawindow.opener.

So I could say, like, window.opener.document, and that will give me the document of the opened website. So just adding a rel of no opener will make that null, and then a rel of no referrer will go 1 step further and, strip any referring headers.

And we'll talk about the the ups and downs of that. So that's that's what you have to do right now with underscore blank things. Otherwise, other websites could do it. And I thought, like, okay. Like like, why is this is obviously a security issue in the browser. Why don't browsers just fix it? And I asked on Twitter, like, what are any valid use cases for this thing? Because the reason they're probably not fixing it is because it will probably break a whole bunch of websites out there because you can't just change how JavaScript and how JavaScript works. And I was, like, thinking, like, Wes websites do use this? And the only one that I could think about first of all, there's plenty of, like, pirated websites where you try to download something, you click it, and it changes the page on you and then opens up something else in a new tab. Mhmm. And, like, the only, like, one that is legitimate that I could think of would be a RetailMeNot.

Here, Wes use RetailMeNot to get, like, a coupon code for something. Yeah. It were yeah. Like, RetailMeNot was, like, the funny because it was one of those things that I felt like worked until companies found out about it. Because, like, the moment companies found out about it, they were just like, let let me, publish embedded marketing into the site. Yeah. Like, oh, you can only get this coupon. I've got to be set up for our mailing list now all of a sudden. Like, I I I really liked Retail Me Node when it was just like, oh, here's a coupon. Underground. Got it. Yeah. Underground.

So what they do is if there's a coupon code, you have to click to reveal it. And by clicking it, it sends you to the website. So if I'm trying to buy something from the Gap, what it does is it opens the coupon code in a new tab and then changes the current tab to gap.com, and that gives them the referrer so that they can get any affiliate dollars from that. And I was like, okay. That's kind of a a okay use case for it, but they're they're sort of leaning on that. And then I think everything else I've seen, maybe like a this used to be really popular where you click a link and it would open up a pop up window.

And then what you did in that pop up window, you still want to control what's happening on the main tab of the website.

Mhmm. I only really only see this in, like, banking websites that are very old, and I don't think this is so much of a issue anymore.

I think it's a relic of the pre framework days because now you can just, you know, not refresh the whole page when you do page transitions and things like that. And I remember that was, like, a huge thing when we we were like, this is, like, sort of related when we were working on our agency website, and we had this, like, fun little feature that was, like, the agency juke jukebox where everybody could put, like, a song of the month on and and, you know, you could hear music from the, the agency workers. Right? There's only, like, 12 of us there. So it Wes really, like, curated and cool. The old way they did it was that pop up window. Right? Yep. And I remember when we went to do the new site, we did it in Angular, I believe. It might have been Angular Node. And when we did this in Angular one, it was so fancy to be able to have the jukebox just be a part of the site and live on the site and not be refreshed per page, we didn't have to bump it onto its own window. That was, like, the perfect use case for that.

I forgot about that. Yeah. You can use just run the player in the pop up. So there's a really good example if you go to, the show notes. Matthias Bynens has a really good example about how it works on the same origin as well as cross origin. So and it's interesting because Chorus even if you have Chorus set up on your website, Chorus does not apply here, which means you could potentially leak your entire document. So, my question is is okay. So every time we have a target equals underscore blank, we have to now add these 2 rels, which I never remember what they are. Why doesn't the browser just fix that? And it it looks like they actually are fixing it. So I did a couple tests. Safari has for about a year or so.

By default, any underscore blank link will also infer the no opener, and I believe the no no. I think just no opener. No. I'm not sure if it's the no referrer or not. So it'll do that by default, and I believe Firefox now does this too because I was trying to make it work on Firefox, and I couldn't.

And by putting no opener on a link, it just sets the window dot refer to null, and you're just not access to not able to access anything on it. It does currently still work. This is, what, June 26th we're recording.

Does currently still exist in Chrome. And I would expect the same thing in Brave and IE because they are both based on that.

So I bet in a couple of years, we'll have to stop using these annoying things whenever we want a target equals new underscore blank.

Fascinating.

There's so many times we hit these problems in web dev, and, like, so many people just deal with these little minor inconveniences, right, of having to do this stuff or add these little caveats, but we often forget about, like, the load. It all it all comes onto our our brains. Right? It's like you have to remember. Now all of a sudden, it's just 1 additional thing you have to learn and Node more additional thing that is something that occupies space in your brain. But, like, why? Why? Why do we have to why do we have to deal with this? And I think not enough people ask, like, why can't this just be done for us enough? You know? Yeah. Yeah. That's exactly. And, also, like,

people are just adding it blind. I'm like, well, doesn't that, like, break some stuff? Like, is that bad for SEO or analytics? But why does it even exist? Yeah. Yeah. And so no refer does hurt your analytics because if you put no no refer on a link, when somebody visits that website, it's not going to tell you which website referred you to them. And it's just going to there's, like, a header that you can pull, and it would just tell you straight up that someone went directly to your website. So if you're looking at your analytics, you say, wow. All of these people are typing in this long ass blog post URL. That's weird, and it's likely, no, that the links to that page are being stripped of the refer. So in some cases, you probably do. It it certainly could be a security issue, but having a refer leaking what URL links to whatever. But if you need that information, especially if you're doing something like referrals like, I have specifically, I have a referral program myself. And if people were to pop this attribute on my referral links, I wouldn't be able oh, sorry. No. I would. I still would be able to to track it because the URLs with my referral program have specific data in them as to who is referring. You see, if you ever look at our referral link, you'll see the the person's name in the link, and that's how it's tracked. So it's not based on people linking it from a a referrer header. You do yours as a query string. Right? Yeah. It's not not a query string, but it's just like a a param an express param A param? In the URL, like a prem matching.

Yeah. But that's what I've learned about this. So if you do have a target equals underscore blank, you probably still do want to add Ralno Nupiner and Nupeferrer to it. But I bet Yeah. In about a year, we'll we'll be able to stop doing that.

Well, I I look forward to the day that I then have to go then make the modification of my code now. Beautiful. Such a small thing, but it's bugged me for a while. I thought, There's so many times that little things like that pop into my brain where I get curious about something, and then it just be it's a perfect opportunity to to learn out loud and to say,

hey. Other people might be interested in this too. I think it's the power of, learning in public. So awesome. I'm so I'm so glad you did this because it taught me a whole lot about this as well. I've always just been like, yep. We'll add. Yeah. We have something in my family where we just say it can't be Node, where, like, somebody asks, like, a really simple question. Like, why does drinking water upside down get rid of hiccups? And we all ESLint around and go, can't be known. Like, if only there were some sort of resource out there that we could look this information up, but can't be known. Some giant catalog of information

you can type in and or ask even with your voice.

It's Encarta. That's what we're talking about. Encarta.

Thank you so much for tuning in, and we'll catch you on Wednesday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.