epiphany/node_modules/eleventy-plugin-automatic-noopener
2023-12-09 22:48:07 -08:00
..
components stylelint/eleventy config 2023-12-09 22:48:07 -08:00
index.js stylelint/eleventy config 2023-12-09 22:48:07 -08:00
LICENSE stylelint/eleventy config 2023-12-09 22:48:07 -08:00
package.json stylelint/eleventy config 2023-12-09 22:48:07 -08:00
README.md stylelint/eleventy config 2023-12-09 22:48:07 -08:00

Automatic Noopener

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

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