eleventy-plugin-automatic-noopener

    2.0.1 • Public • Published

    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

    Install

    npm i eleventy-plugin-automatic-noopener

    DownloadsWeekly Downloads

    24

    Version

    2.0.1

    License

    MPL-2.0

    Unpacked Size

    32.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • jkc-codes