eleventy-plugin-target-safe
v0.6.0
Published
Automatically adds noopener to unsafe links
Downloads
13
Maintainers
Readme
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"
.
Future
- [ ] Forms and other potentially unsafe
target
elements - [ ] Review dependencies and see what can be removed
- [ ] ???