Eleventy-plugin-target-safe NPM

Keep your outbound links safe

Link tags (<a>) with the target attribute may sometimes need a little extra care. This plugin is meant to do that for you automatically.

Usage

Install using your package manager of choice

pnpm install eleventy-plugin-target-safe

Then, include it in your .eleventy.js config file:

const eleventyTargetSafe = require("eleventy-plugin-target-safe");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(eleventyTargetSafe, {
    // config
  });
};

Example

<!-- before -->
<a target="_blank" href="https://website.com/">Unsafe Outbound Link</a>
<!-- after -->
<a target="_blank" href="https://website.com/" rel="noopener">Safe Outbound Link</a>

Config Options

Option	Type	Default	Explanation
opener	boolean	true	Adds traditional `rel="noopener"` attribute.
follower	boolean	false	`rel="nofollower"` useful for blogs that don't want site crawlers to follow outbound links.
referrer	boolean	false	`rel="noreferrer"` Read more here..

Considerations

The world of web development is constantly changing. It is entirely possible you are writing code with a bias from someone who read a StackOverflow question 10 years ago, and that code is now in the browser and you just don't know it. That's why I wanted to include these two articles that talk specifically about what the rel="noopener" attribute does, and come from sources that are reliable.

Check out this article by Jake Archibald. There is also this note on MDN, that in browsers today, adding target="_blank" implicitly adds rel="noopener".