Security issue with _blank external links

General Discussion
1

I ran a detectify.com scan on my site and it’s highlighted an issue with opening external links as _blank (opening in a new tab).

There is a good description of the vulnerability here:

The solution is to add the following parameter to the link:

rel=“noopener noreferrer”

I notice there is an option to add ‘No follow’ in Blocs, but can we please also have the option to add this for external links (or perhaps just automate this for external links)?

1 Like
2

Hey @darren, that’s interesting. Thanks for sharing.

If you’re concerned you could probably add

 rel=“noopener noreferrer”

Using Custom Data Attributes in the sidebar.

3

thanks for sharing!

4

I will try this, thank you. I did wonder if it was possible via the CDA field, so I’ll give that a go.

5

Just tried this - page source looks good.

[EDIT - Not quite, see my next post]

6

Actually, this doesn’t work, as the attribute isn’t being added to the “< a >” block, as can be seen here:

<a href="https://facebook.com/xxxx"target="_blank"><span class="fa fa-facebook-square icon-md" rel="noopener noreferrer"></span></a>

<a href="https://twitter.com/xxxx" target="_blank"><span class="fa fa-twitter-square icon-md" rel="noopener noreferrer"></span></a> 

<a href="https://linkedin.com/company/xxxx" target="_blank"><span class="fa fa-linkedin-square icon-md" rel="noopener noreferrer"></span></a>

So, the security vulnerability is still being highlighted as follows, which isn’t great for a professional website where security is critical:

"In order to mitigate the issue, add the following attribue to your link(s): rel=“noopener noreferrer”

I therefore cannot find a solution to this, unless I remove the _blank target altogether. I think the proper solution is for Blocs to provide an option for this, or a way to make additions to the tag

7

Hey @darren. I see what you mean, it works for most other links in blocs, just not the ions as you can’t select the link.

2 other options.

  1. Hand code the icons with the code bric
  2. Use javascript

You could use javascript to search for all target="_blank" attributes and then add a new one. That would automate it for every _blank link.

You would use something like the following to find them I would image?

 document.querySelectorAll("[target="_blank"]")
8

Thanks for the suggestions. Sure it’s possible with hand coded insertions, although this isn’t ideal and just makes for added complication.

It seems for something like this, where it’s always going to be seen as a security issue for external links with a _blank target, that a cleaner solution be made abvailable via Blocs.

9

Until Blocs has that, those are two valid options in the mean time. (using Javascript is probably the easiest)

I did some reading on this, because it seems little talked about (in my circles anyway) and apparently its a non-issue if your linking to a trusted website, as the person exploiting the vulnerability has to have control of that page.

So with that in mind, icons to trusted social media sites would be a non-issue. And the CDA works on other links in Blocs fine.

Still submit a wish-list for it. Norm could probably put an optional tick box, like when you select new tab or apply it to every link?

10

Thanks, yeah I realise it’s not a genuine issue for trusted links, but it’s currently increasing our CVSS score which we report to clients. We have our own custom angular/JS website/platform, Blocs is used to generate our landing pages, so it would be nice to get a clean solution for this in the editor. We use Blocs for making quick and easy updates via Amazon S3, so we ideally don’t want to be making manual changes.

The code blocks would be a good temporary solution for now. I don’t really want to be messing around with JS for these pages.

11

Funny enough, I was reading through the comments on the original article you posted, and someone posted the javascript code I was suggesting.

Adding this to the project footer would give you peace of mind site wide anyway.

<script>
var elements = document.querySelectorAll( 'a[target]' ),
	i, rel;
if ( elements.length ) {
	for ( i = 0; i < elements.length; i++ ) {
		rel = elements[ i ].getAttribute('rel');
		elements[ i ].setAttribute( 'rel', 'noopener noreferrer' + ( rel ? ' ' + rel : '' ) );
	}
}
</script>
12

Thanks, I’ll give that a try.

13

I’ll get this support added for this, thanks for the heads up.

2 Likes
14

Much appreciated. It would be a big help!

15

This JS actually doesn’t work on Safari. There is also reference to that in the comments to the original post list.

Anyway, all is fine. I’ve removed the _blank external links now and will await an update to Blocs.

1 Like
16

That’s interesting. I tested it before I posted it and it worked fine in safari.

Looks like Norm is adding it anyway.

17

Maybe it’s just Detectify being overzealous, I’m not sure. The JS was showing in the page source just fine.

I added it to the ‘Project Footer’ section via a code widget ‘brick’, but anyway… happy to wait.

18

support for this is in the next build of 3.4.5.

3 Likes
19

Great Norm. Is this available in Blocs 3.4.5 b3? If so, where to find it/how to use it for better safety?

20

It’s in the next version coming today build 4, its part of the no follow function on interactions, so if you set the no follow check off and then back on again it adds the attributes to the link.

3 Likes