Add target="_blank" to links in embedded tweets

[jwheare]

At irccloud.com we embed tweets linked in chat. We make sure all links sent in chat open in a new tab because our users don’t want their IRC client to close every time they click a link. I believe since the shadow DOM change, links in embedded tweets no longer open in the a new tab.

Rather than us having to modify the DOM after every embed, could you add target="_blank" to all links, or at least make it an option.

Thanks.

[jwheare]

Please also add rel=“noreferrer” to prevent cross origin location attacks: https://mathiasbynens.github.io/rel-noopener/

[CSherman]

We’re having a similar issue. Our potential solution is creating our own iframe to embed the tweets in. Is there any way that trying to use the shadow content could be an option that can be disabled?

[JakeHarding]

Ah thanks for reporting this. This is indeed a mistake on our part. When widgets are rendered in srcless iframes, we add <base target="_blank"> to HEAD. However we don’t do anything analogous when widgets are rendered using shadow DOM. I’ll try and get a fix out ASAP.

In the meantime, if this is a deal breaker for you, you can force embedded tweets to be rendered using srcless iframes using the technique I describe here. I would recommend only doing this as a temporary patch and removing it ASAP.

[jwheare]

As a workaround, at the moment we’re just doing something along the lines of:

twttr.widgets.createTweet(tweetId, container, function (widget) {
    var links = widget.shadowRoot.querySelectorAll('a');
    for (var link of links) {
        link.target = '_blank';
        link.rel = 'noreferrer';
    }
});

(apologies for errors, I just typed this out by hand)

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.