htmlnano 2.0.3 → 2.1.0

package/lib/modules/minifyJs.mjs

@@ -0,0 +1,121 @@
+import { isEventHandler, optionalImport } from '../helpers.mjs';
+import { redundantScriptTypes } from './removeRedundantAttributes.mjs';
+
+/** Minify JS with Terser */
+export default async function minifyJs (tree, options, terserOptions) {
+    const terser = await optionalImport('terser');
+
+    if (!terser) return tree;
+
+    let promises = [];
+    tree.walk(node => {
+        const nodeAttrs = node.attrs || {};
+
+        /**
+         * Skip SRI
+         *
+         * If the input <script /> has an SRI attribute, it means that the original <script /> could be trusted,
+         * and should not be altered anymore.
+         *
+         * htmlnano is exactly an MITM that SRI is designed to protect from. If htmlnano or its dependencies get
+         * compromised and introduces malicious code, then it is up to the original SRI to protect the end user.
+         *
+         * So htmlnano will simply skip <script /> that has SRI.
+         * If developers do trust htmlnano, they should generate SRI after htmlnano modify the <script />.
+         */
+        if ('integrity' in nodeAttrs) {
+            return node;
+        }
+
+        if (node.tag && node.tag === 'script') {
+            const mimeType = nodeAttrs.type || 'text/javascript';
+            if (redundantScriptTypes.has(mimeType) || mimeType === 'module') {
+                promises.push(processScriptNode(node, terserOptions, terser));
+            }
+        }
+
+        if (node.attrs) {
+            promises = promises.concat(processNodeWithOnAttrs(node, terserOptions, terser));
+        }
+
+        return node;
+    });
+
+    return Promise.all(promises).then(() => tree);
+}
+
+
+function stripCdata (js) {
+    const leftStrippedJs = js.replace(/\/\/\s*<!\[CDATA\[/, '').replace(/\/\*\s*<!\[CDATA\[\s*\*\//, '');
+    if (leftStrippedJs === js) {
+        return js;
+    }
+
+    const strippedJs = leftStrippedJs.replace(/\/\/\s*\]\]>/, '').replace(/\/\*\s*\]\]>\s*\*\//, '');
+    return leftStrippedJs === strippedJs ? js : strippedJs;
+}
+
+
+function processScriptNode (scriptNode, terserOptions, terser) {
+    let js = (scriptNode.content || []).join('').trim();
+    if (!js) {
+        return scriptNode;
+    }
+
+    // Improve performance by avoiding calling stripCdata again and again
+    let isCdataWrapped = false;
+    if (js.includes('CDATA')) {
+        const strippedJs = stripCdata(js);
+        isCdataWrapped = js !== strippedJs;
+        js = strippedJs;
+    }
+
+    return terser
+        .minify(js, terserOptions)
+        .then(result => {
+            if (result.error) {
+                throw new Error(result.error);
+            }
+            if (result.code === undefined) {
+                return;
+            }
+
+            let content = result.code;
+            if (isCdataWrapped) {
+                content = '/*<![CDATA[*/' + content + '/*]]>*/';
+            }
+
+            scriptNode.content = [content];
+        });
+}
+
+
+function processNodeWithOnAttrs (node, terserOptions, terser) {
+    const jsWrapperStart = 'a=function(){';
+    const jsWrapperEnd = '};a();';
+
+    const promises = [];
+    for (const attrName of Object.keys(node.attrs || {})) {
+        if (!isEventHandler(attrName)) {
+            continue;
+        }
+
+        // For example onclick="return false" is valid,
+        // but "return false;" is invalid (error: 'return' outside of function)
+        // Therefore the attribute's code should be wrapped inside function:
+        // "function _(){return false;}"
+        let wrappedJs = jsWrapperStart + node.attrs[attrName] + jsWrapperEnd;
+        let promise = terser
+            .minify(wrappedJs, terserOptions)
+            .then(({ code }) => {
+                let minifiedJs = code.substring(
+                    jsWrapperStart.length,
+                    code.length - jsWrapperEnd.length
+                );
+                node.attrs[attrName] = minifiedJs;
+            });
+        promises.push(promise);
+    }
+
+    return promises;
+}

package/lib/modules/{minifyJson.js → minifyJson.cjs}

@@ -7,6 +7,10 @@ exports.onContent = onContent;
 const rNodeAttrsTypeJson = /(\/|\+)json/;
 function onContent() {
   return (content, node) => {
+    // Skip SRI, reasons are documented in "minifyJs" module
+    if (node.attrs && 'integrity' in node.attrs) {
+      return content;
+    }
     if (node.attrs && node.attrs.type && rNodeAttrsTypeJson.test(node.attrs.type)) {
       try {
         // cast minified JSON to an array

package/lib/modules/minifyJson.mjs

@@ -0,0 +1,21 @@
+const rNodeAttrsTypeJson = /(\/|\+)json/;
+
+export function onContent() {
+    return (content, node) => {
+        // Skip SRI, reasons are documented in "minifyJs" module
+        if (node.attrs && 'integrity' in node.attrs) {
+            return content;
+        }
+
+        if (node.attrs && node.attrs.type && rNodeAttrsTypeJson.test(node.attrs.type)) {
+            try {
+                // cast minified JSON to an array
+                return [JSON.stringify(JSON.parse((content || []).join('')))];
+            } catch (error) {
+                // Invalid JSON
+            }
+        }
+
+        return content;
+    };
+}

package/lib/modules/minifySvg.cjs

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = minifySvg;
+var _helpers = require("../helpers.cjs");
+/** Minify SVG with SVGO */
+async function minifySvg(tree, options, svgoOptions = {}) {
+  const svgo = await (0, _helpers.optionalImport)('svgo');
+  if (!svgo) return tree;
+  tree.match({
+    tag: 'svg'
+  }, node => {
+    let svgStr = tree.render(node, {
+      closingSingleTag: 'slash',
+      quoteAllAttributes: true
+    });
+    try {
+      const result = svgo.optimize(svgStr, svgoOptions);
+      node.tag = false;
+      node.attrs = {};
+      // result.data is a string, we need to cast it to an array
+      node.content = [result.data];
+      return node;
+    } catch (error) {
+      console.error('htmlnano fails to minify the svg:');
+      console.error(error);
+      if (error.name === 'SvgoParserError') {
+        console.error(error.toString());
+      }
+      // We return the node as-is
+      return node;
+    }
+  });
+  return tree;
+}

package/lib/modules/minifySvg.mjs

@@ -0,0 +1,30 @@
+import { optionalImport } from '../helpers.mjs';
+
+/** Minify SVG with SVGO */
+export default async function minifySvg(tree, options, svgoOptions = {}) {
+    const svgo = await optionalImport('svgo');
+
+    if (!svgo) return tree;
+
+    tree.match({tag: 'svg'}, node => {
+        let svgStr = tree.render(node, { closingSingleTag: 'slash', quoteAllAttributes: true });
+        try {
+            const result = svgo.optimize(svgStr, svgoOptions);
+            node.tag = false;
+            node.attrs = {};
+            // result.data is a string, we need to cast it to an array
+            node.content = [result.data];
+            return node;
+        } catch (error) {
+            console.error('htmlnano fails to minify the svg:');
+            console.error(error);
+            if (error.name === 'SvgoParserError') {
+                console.error(error.toString());
+            }
+            // We return the node as-is
+            return node;
+        }
+    });
+
+    return tree;
+}

package/lib/modules/{minifyUrls.js → minifyUrls.cjs}

@@ -4,11 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = minifyUrls;
-var _helpers = require("../helpers");
-const RelateUrl = (0, _helpers.optionalRequire)('relateurl');
-const srcset = (0, _helpers.optionalRequire)('srcset');
-const terser = (0, _helpers.optionalRequire)('terser');
-
+var _helpers = require("../helpers.cjs");
 // Adopts from https://github.com/kangax/html-minifier/blob/51ce10f4daedb1de483ffbcccecc41be1c873da2/src/htmlminifier.js#L209-L221
 const tagsHaveUriValuesForAttributes = new Set(['a', 'area', 'link', 'base', 'object', 'blockquote', 'q', 'del', 'ins', 'form', 'input', 'head', 'audio', 'embed', 'iframe', 'img', 'script', 'track', 'video']);
 const tagsHasHrefAttributes = new Set(['a', 'area', 'link', 'base']);
@@ -53,7 +49,10 @@ let relateUrlInstance;
 let STORED_URL_BASE;
 
 /** Convert absolute url into relative url */
-function minifyUrls(tree, options, moduleOptions) {
+async function minifyUrls(tree, options, moduleOptions) {
+  const RelateUrl = await (0, _helpers.optionalImport)('relateurl');
+  const srcset = await (0, _helpers.optionalImport)('srcset');
+  const terser = await (0, _helpers.optionalImport)('terser');
   let promises = [];
   const urlBase = processModuleOptions(moduleOptions);
 
@@ -84,7 +83,7 @@ function minifyUrls(tree, options, moduleOptions) {
       const attrNameLower = attrName.toLowerCase();
       if (isUriTypeAttribute(node.tag, attrNameLower)) {
         if (isJavaScriptUrl(attrValue)) {
-          promises.push(minifyJavaScriptUrl(node, attrName));
+          promises.push(minifyJavaScriptUrl(node, attrName, terser));
         } else {
           if (relateUrlInstance) {
             // FIXME!
@@ -125,7 +124,7 @@ function isJavaScriptUrl(url) {
 }
 const jsWrapperStart = 'function a(){';
 const jsWrapperEnd = '}a();';
-function minifyJavaScriptUrl(node, attrName) {
+function minifyJavaScriptUrl(node, attrName, terser) {
   if (!terser) return Promise.resolve();
   let result = node.attrs[attrName];
   if (result) {

package/lib/modules/minifyUrls.mjs

@@ -0,0 +1,229 @@
+import { optionalImport } from '../helpers.mjs';
+
+// Adopts from https://github.com/kangax/html-minifier/blob/51ce10f4daedb1de483ffbcccecc41be1c873da2/src/htmlminifier.js#L209-L221
+const tagsHaveUriValuesForAttributes = new Set([
+    'a',
+    'area',
+    'link',
+    'base',
+    'object',
+    'blockquote',
+    'q',
+    'del',
+    'ins',
+    'form',
+    'input',
+    'head',
+    'audio',
+    'embed',
+    'iframe',
+    'img',
+    'script',
+    'track',
+    'video',
+]);
+
+const tagsHasHrefAttributes = new Set([
+    'a',
+    'area',
+    'link',
+    'base'
+]);
+
+const attributesOfImgTagHasUriValues = new Set([
+    'src',
+    'longdesc',
+    'usemap'
+]);
+
+const attributesOfObjectTagHasUriValues = new Set([
+    'classid',
+    'codebase',
+    'data',
+    'usemap'
+]);
+
+const tagsHasCiteAttributes = new Set([
+    'blockquote',
+    'q',
+    'ins',
+    'del'
+]);
+
+const tagsHasSrcAttributes = new Set([
+    'audio',
+    'embed',
+    'iframe',
+    'img',
+    'input',
+    'script',
+    'track',
+    'video',
+    /**
+     * https://html.spec.whatwg.org/#attr-source-src
+     *
+     * Although most of browsers recommend not to use "src" in <source>,
+     * but technically it does comply with HTML Standard.
+     */
+    'source'
+]);
+
+const isUriTypeAttribute = (tag, attr) => {
+    return (
+        tagsHasHrefAttributes.has(tag) && attr === 'href' ||
+        tag === 'img' && attributesOfImgTagHasUriValues.has(attr) ||
+        tag === 'object' && attributesOfObjectTagHasUriValues.has(attr) ||
+        tagsHasCiteAttributes.has(tag) && attr === 'cite' ||
+        tag === 'form' && attr === 'action' ||
+        tag === 'input' && attr === 'usemap' ||
+        tag === 'head' && attr === 'profile' ||
+        tag === 'script' && attr === 'for' ||
+        tagsHasSrcAttributes.has(tag) && attr === 'src'
+    );
+};
+
+const isSrcsetAttribute = (tag, attr) => {
+    return (
+        tag === 'source' && attr === 'srcset' ||
+        tag === 'img' && attr === 'srcset' ||
+        tag === 'link' && attr === 'imagesrcset'
+    );
+};
+
+const processModuleOptions = options => {
+    // FIXME!
+    // relateurl@1.0.0-alpha only supports URL while stable version (0.2.7) only supports string
+    // should convert input into URL instance after relateurl@1 is stable
+    if (typeof options === 'string') return options;
+    if (options instanceof URL) return options.toString();
+
+    return false;
+};
+
+const isLinkRelCanonical = ({ tag, attrs }) => {
+    // Return false early for non-"link" tag
+    if (tag !== 'link') return false;
+
+    for (const [attrName, attrValue] of Object.entries(attrs)) {
+        if (attrName.toLowerCase() === 'rel' && attrValue === 'canonical') return true;
+    }
+
+    return false;
+};
+
+const JAVASCRIPT_URL_PROTOCOL = 'javascript:';
+
+let relateUrlInstance;
+let STORED_URL_BASE;
+
+/** Convert absolute url into relative url */
+export default async function minifyUrls(tree, options, moduleOptions) {
+    const RelateUrl = await optionalImport('relateurl');
+    const srcset = await optionalImport('srcset');
+    const terser = await optionalImport('terser');
+
+    let promises = [];
+
+    const urlBase = processModuleOptions(moduleOptions);
+
+    // Invalid configuration, return tree directly
+    if (!urlBase) return tree;
+
+    /** Bring up a reusable RelateUrl instances (only once)
+     *
+     * STORED_URL_BASE is used to invalidate RelateUrl instances,
+     * avoiding require.cache acrossing multiple htmlnano instance with different configuration,
+     * e.g. unit tests cases.
+     */
+    if (!relateUrlInstance || STORED_URL_BASE !== urlBase) {
+        if (RelateUrl) {
+            relateUrlInstance = new RelateUrl(urlBase);
+        }
+        STORED_URL_BASE = urlBase;
+    }
+
+    tree.walk(node => {
+        if (!node.attrs) return node;
+
+        if (!node.tag) return node;
+
+        if (!tagsHaveUriValuesForAttributes.has(node.tag)) return node;
+
+        // Prevent link[rel=canonical] being processed
+        // Can't be excluded by isUriTypeAttribute()
+        if (isLinkRelCanonical(node)) return node;
+
+        for (const [attrName, attrValue] of Object.entries(node.attrs)) {
+            const attrNameLower = attrName.toLowerCase();
+
+            if (isUriTypeAttribute(node.tag, attrNameLower)) {
+                if (isJavaScriptUrl(attrValue)) {
+                    promises.push(minifyJavaScriptUrl(node, attrName, terser));
+                } else {
+                    if (relateUrlInstance) {
+                        // FIXME!
+                        // relateurl@1.0.0-alpha only supports URL while stable version (0.2.7) only supports string
+                        // the WHATWG URL API is very strict while attrValue might not be a valid URL
+                        // new URL should be used, and relateUrl#relate should be wrapped in try...catch after relateurl@1 is stable
+                        node.attrs[attrName] = relateUrlInstance.relate(attrValue);
+                    }
+                }
+
+                continue;
+            }
+
+            if (isSrcsetAttribute(node.tag, attrNameLower)) {
+                if (srcset) {
+                    try {
+                        const parsedSrcset = srcset.parse(attrValue, { strict: true });
+
+                        node.attrs[attrName] = srcset.stringify(parsedSrcset.map(srcset => {
+                            if (relateUrlInstance) {
+                                srcset.url = relateUrlInstance.relate(srcset.url);
+                            }
+
+                            return srcset;
+                        }));
+                    } catch (e) {
+                        // srcset will throw an Error for invalid srcset.
+                    }
+                }
+
+                continue;
+            }
+        }
+
+        return node;
+    });
+
+    if (promises.length > 0) return Promise.all(promises).then(() => tree);
+    return Promise.resolve(tree);
+}
+
+function isJavaScriptUrl(url) {
+    return typeof url === 'string' && url.toLowerCase().startsWith(JAVASCRIPT_URL_PROTOCOL);
+}
+
+const jsWrapperStart = 'function a(){';
+const jsWrapperEnd = '}a();';
+
+function minifyJavaScriptUrl(node, attrName, terser) {
+    if (!terser) return Promise.resolve();
+
+    let result = node.attrs[attrName];
+    if (result) {
+        result = jsWrapperStart + result.slice(JAVASCRIPT_URL_PROTOCOL.length) + jsWrapperEnd;
+
+        return terser
+            .minify(result, {}) // Default Option is good enough
+            .then(({ code }) => {
+                const minifiedJs = code.substring(
+                    jsWrapperStart.length,
+                    code.length - jsWrapperEnd.length
+                );
+                node.attrs[attrName] = JAVASCRIPT_URL_PROTOCOL + minifiedJs;
+            });
+    }
+
+    return Promise.resolve();
+}

package/lib/modules/{normalizeAttributeValues.js → normalizeAttributeValues.cjs}

@@ -63,11 +63,6 @@ const invalidValueDefault = {
     default: 'metadata',
     valid: ['subtitles', 'captions', 'descriptions', 'chapters', 'metadata']
   },
-  autocomplete: {
-    tag: null,
-    default: 'on',
-    valid: ['on', 'off']
-  },
   type: {
     tag: ['button'],
     default: 'submit',

package/lib/modules/normalizeAttributeValues.mjs

@@ -0,0 +1,140 @@
+const caseInsensitiveAttributes = {
+    autocomplete: ['form'],
+    charset: ['meta', 'script'],
+    contenteditable: null,
+    crossorigin: ['audio', 'img', 'link', 'script', 'video'],
+    dir: null,
+    draggable: null,
+    dropzone: null,
+    formmethod: ['button', 'input'],
+    inputmode: ['input', 'textarea'],
+    kind: ['track'],
+    method: ['form'],
+    preload: ['audio', 'video'],
+    referrerpolicy: null,
+    sandbox: ['iframe'],
+    spellcheck: null,
+    scope: ['th'],
+    shape: ['area'],
+    sizes: ['link'],
+    step: ['input'],
+    translate: null,
+    type: [
+        'a',
+        'link',
+        'button',
+        'embed',
+        'object',
+        'script',
+        'source',
+        'style',
+        'input',
+        'menu',
+        'menuitem'
+    ],
+    wrap: ['textarea']
+};
+
+// https://html.spec.whatwg.org/#invalid-value-default
+/** @typedef { [key: string]: { tag: null | string[], default: string, valid: string[] } } */
+const invalidValueDefault = {
+    crossorigin: {
+        tag: null,
+        default: 'anonymous',
+        valid: ['', 'anonymous', 'use-credentials']
+    },
+    // https://html.spec.whatwg.org/#referrer-policy-attributes
+    // The attribute's invalid value default and missing value default are both the empty string state.
+    referrerpolicy: {
+        tag: null,
+        default: '',
+        valid: ['', 'url', 'origin', 'no-referrer', 'no-referrer-when-downgrade', 'same-origin', 'origin-when-cross-origin', 'strict-origin-when-cross-origin', 'unsafe-url']
+    },
+    // https://html.spec.whatwg.org/#lazy-loading-attributes
+    loading: {
+        tag: ['img', 'iframe'],
+        default: 'eager',
+        valid: ['lazy', 'eager']
+    },
+    // https://html.spec.whatwg.org/#the-img-element
+    // https://html.spec.whatwg.org/#image-decoding-hint
+    decoding: {
+        tag: ['img'],
+        default: 'auto',
+        valid: ['auto', 'sync', 'async']
+    },
+    // https://html.spec.whatwg.org/#the-track-element
+    kind: {
+        tag: ['track'],
+        default: 'metadata',
+        valid: ['subtitles', 'captions', 'descriptions', 'chapters', 'metadata']
+    },
+    type: {
+        tag: ['button'],
+        default: 'submit',
+        valid: ['submit', 'reset', 'button']
+    },
+    wrap: {
+        tag: ['textarea'],
+        default: 'soft',
+        valid: ['soft', 'hard']
+    },
+    // https://html.spec.whatwg.org/#the-hidden-attribute
+    hidden: {
+        tag: null,
+        default: 'hidden',
+        valid: ['hidden', 'until-found']
+    },
+    // https://html.spec.whatwg.org/#autocapitalization
+    autocapitalize: {
+        tag: null,
+        default: 'sentences',
+        valid: ['none', 'off', 'on', 'sentences', 'words', 'characters']
+    },
+    // https://html.spec.whatwg.org/#the-marquee-element
+    behavior: {
+        tag: ['marquee'],
+        default: 'scroll',
+        valid: ['scroll', 'slide', 'alternate']
+    },
+    direction: {
+        tag: ['marquee'],
+        default: 'left',
+        valid: ['left', 'right', 'up', 'down']
+    }
+};
+
+export function onAttrs() {
+    return (attrs, node) => {
+        const newAttrs = attrs;
+
+        Object.entries(attrs).forEach(([attrName, attrValue]) => {
+            let newAttrValue = attrValue;
+
+            if (
+                Object.hasOwnProperty.call(caseInsensitiveAttributes, attrName)
+                && (
+                    caseInsensitiveAttributes[attrName] === null
+                    || caseInsensitiveAttributes[attrName].includes(node.tag)
+                )
+            ) {
+                newAttrValue = typeof attrValue.toLowerCase === 'function' ? attrValue.toLowerCase() : attrValue;
+            }
+
+            if (
+                Object.hasOwnProperty.call(invalidValueDefault, attrName)
+            ) {
+                const meta = invalidValueDefault[attrName];
+                if (meta.tag === null || (node && node.tag && meta.tag.includes(node.tag))) {
+                    if (!meta.valid.includes(newAttrValue)) {
+                        newAttrValue = meta.default;
+                    }
+                }
+            }
+
+            newAttrs[attrName] = newAttrValue;
+        });
+
+        return newAttrs;
+    };
+}

package/lib/modules/removeAttributeQuotes.mjs

@@ -0,0 +1,12 @@
+// Specification: https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
+// See also: https://github.com/posthtml/posthtml-render/pull/30
+// See also: https://github.com/posthtml/htmlnano/issues/6#issuecomment-707105334
+
+/** Disable quoteAllAttributes while not overriding the configuration */
+export default function removeAttributeQuotes(tree) {
+    if (tree.options && typeof tree.options.quoteAllAttributes === 'undefined') {
+        tree.options.quoteAllAttributes = false;
+    }
+
+    return tree;
+}

package/lib/modules/{removeComments.js → removeComments.cjs}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.onContent = onContent;
 exports.onNode = onNode;
-var _helpers = require("../helpers");
+var _helpers = require("../helpers.cjs");
 const MATCH_EXCERPT_REGEXP = /<!-- ?more ?-->/i;
 
 /** Removes HTML comments */