11ty plugin for automatically adding a rel='noopener' or rel='noreferrer' attribute to all unsafe external links.
npm install eleventy-plugin-automatic-noopenerrel="noopener" or rel="noreferrer" attribute to all unsafe external links.
shell
npm install eleventy-plugin-automatic-noopener
`
Usage
In your Eleventy config file (.eleventy.js by default):
`js
const automaticNoopener = require('eleventy-plugin-automatic-noopener');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(automaticNoopener);
}
`
$3
If you're already using PostHTML you can reduce build times by using the posthtml export as a plugin to your existing PostHTML syntax tree. It provides a stand-alone PostHTML version of Automatic Noopener that can even be used outside of Eleventy.
The optional parser export further reduces build times when using PostHTML with Eleventy's --watch or --serve arguments. Parsing your options outside of the transform will mean it's only done once at the start of watching or serving rather than every time Eleventy builds.
`js
const posthtml = require('posthtml');
const anotherPostHTMLPlugin = require('another-posthtml-plugin');
const { posthtml: automaticNoopener, parser } = require('eleventy-plugin-automatic-noopener');
const options = parser({noreferrer: true});
module.exports = function(eleventyConfig) {
eleventyConfig.addTransform('posthtml', function(HTMLString, outputPath) {
if(outputPath && outputPath.endsWith('.html')) {
return posthtml([automaticNoopener(options), anotherPostHTMLPlugin()])
.process(HTMLString)
.then(result => result.html));
}
else {
return HTMLString;
}
});
}
`
Configuration
`js
const automaticNoopener = require('eleventy-plugin-automatic-noopener');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(automaticNoopener, {
ignore: /^https?:\/\/google\.com(\/|$)/i,
elements: ['a', 'area', 'form'],
noopener: true,
noreferrer: false,
});
}
`
$3
- Default: null
- Accepts: Regular Expression
Any URLs that match the given regular expression will not cause rel="noopener" or rel="noreferrer" attributes to be added to their corresponding element.
$3
- Default: ['a', 'area', 'form']
- Accepts: Array of Strings
The elements to add rel="noopener" or rel="noreferrer" to. Strings must be 'a', 'area' or 'form'.
$3
- Default: True
- Accepts: Boolean
Add a rel="noopener" attribute to all elements with unsafe external links that don't have a rel="noreferrer" or rel="opener" attribute on them. Ignored if noreferrer is true.
$3
- Default: False
- Accepts: Boolean
Add a rel="noreferrer" attribute to all elements with external links that don't have a rel="opener"` attribute on them.