Eleventy: Plugin: add rel=noopener on all external links

[zachleat]

eleventy-plugin-rss already transforms all urls to absolute urls for the RSS feed. Reuse a bunch of that, probably. https://github.com/11ty/eleventy-plugin-rss/blob/master/src/htmlToAbsoluteUrls.js

[zachleat]

This repository is now using lodash style issue management for enhancements (see https://twitter.com/samselikoff/status/991395669016436736)

This means enhancement issues will now be closed instead of leaving them open. The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

[Ryuno-Ki]

How would you define „external” links? All which have a domain in them? (That is, all which aren't relative or absolute)

[Snugug]

Hey all! If people are still looking for a solution to this, I've just published https://www.npmjs.com/package/eleventy-plugin-safe-external-links that'll allow you to add noopener and/or noreferrer to any link matching a given RegExp pattern, so you can define your own external links (by default, assumes links starting with http(s)://

[binyamin]

On my site, I use client-side JS to modify links when the page loads.
example

// Mark external links
if(document.querySelectorAll("a[href]").length > 0) {
    document.querySelectorAll("a[href]").forEach(l => {
        const isLinkLocal = (new URL(l.href)).hostname === location.hostname;

        if(!isLinkLocal && !l.relList.contains("referrer")) {
            l.relList.add("external");
            l.relList.add("noreferrer");
            l.relList.add("noopener")
            l.target = "_blank"
        };
    })
}

[nhoizey]

@binyamin if you do it during the build, it is done once for all your users, and they don't have this additional JS to run, it might enhance performance at least on low end mobile devices.