Automatic Noopener

An 11ty plugin that automatically adds a rel="noopener" or rel="noreferrer" attribute to all unsafe external links.

• Installation
• Usage
  • PostHTML
• Configuration
  • ignore
  • elements
  • noopener
  • noreferrer
• Licence

Installation

npm install eleventy-plugin-automatic-noopener

Usage

In your Eleventy config file (.eleventy.js by default):

const automaticNoopener = require('eleventy-plugin-automatic-noopener');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(automaticNoopener);
}

PostHTML

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.

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

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,
  });
}

ignore

• 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.

elements

• 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'.

noopener

• 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.

noreferrer

• 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.

Licence

MPL-2.0