sanitize-html 2.5.2 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 2.7.0 (2022-02-04)
+
+- Allows a more sensible set of default attributes on `<img />` tags. Thanks to [Zade Viggers](https://github.com/zadeviggers).
+
+## 2.6.1 (2021-12-08)
+
+- Fixes style filtering to retain `!important` when used.
+- Fixed trailing text bug on `transformTags` options that was reported on [issue #506](https://github.com/apostrophecms/sanitize-html/issues/506). Thanks to [Alex Rantos](https://github.com/alex-rantos).
+
+## 2.6.0 (2021-11-23)
+
+- Support for regular expressions in the `allowedClasses` option. Thanks to [Alex Rantos](https://github.com/alex-rantos).
+
+## 2.5.3 (2021-11-02):
+
+- Fixed bug introduced by klona 2.0.5, by removing klona entirely.
+
 ## 2.5.2 (2021-10-13):
 
 - Nullish HTML input now returns an empty string. Nullish value may be explicit `null`, `undefined` or implicit `undefined` when value is not provided. Thanks to Artem Kostiuk for the contribution.

package/README.md

@@ -128,10 +128,9 @@ allowedTags: [
 disallowedTagsMode: 'discard',
 allowedAttributes: {
   a: [ 'href', 'name', 'target' ],
-  // We don't currently allow img itself by default, but this
-  // would make sense if we did. You could add srcset here,
-  // and if you do the URL is checked for safety
-  img: [ 'src' ]
+  // We don't currently allow img itself by default, but
+  // these attributes would make sense if we did.
+  img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
 },
 // Lots of these won't come up by default because we don't allow them
 selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],
@@ -239,6 +238,7 @@ const clean = sanitizeHtml(dirty, {
 ```
 
 Similar to `allowedAttributes`, you can use `*` to allow classes with a certain prefix, or use `*` as a tag name to allow listed classes to be valid for any tag:
+
 ```js
 allowedClasses: {
   'code': [ 'language-*', 'lang-*' ],
@@ -246,6 +246,16 @@ allowedClasses: {
 }
 ```
 
+Furthermore, regular expressions are supported too:
+
+```js
+allowedClasses: {
+  p: [ /^regex\d{2}$/ ]
+}
+```
+
+> Note: It is advised that your regular expressions always begin with `^` so that you are requiring a known prefix. A regular expression with neither `^` nor `$` just requires that something appear in the middle.
+
 ### Allowed CSS Styles
 
 If you wish to allow specific CSS _styles_ on a particular element, you can do that with the `allowedStyles` option. Simply declare your desired attributes as regular expression options within an array for the given attribute. Specific elements will inherit allowlisted attributes from the global (`*`) attribute. Any other CSS classes are discarded.

package/index.js

@@ -1,6 +1,5 @@
 const htmlparser = require('htmlparser2');
 const escapeStringRegexp = require('escape-string-regexp');
-const { klona } = require('klona');
 const { isPlainObject } = require('is-plain-object');
 const deepmerge = require('deepmerge');
 const parseSrcset = require('parse-srcset');
@@ -157,6 +156,7 @@ function sanitizeHtml(html, options, _recursing) {
   }
   const allowedClassesMap = {};
   const allowedClassesGlobMap = {};
+  const allowedClassesRegexMap = {};
   each(options.allowedClasses, function(classes, tag) {
     // Implicitly allows the class attribute
     if (allowedAttributesMap) {
@@ -167,10 +167,13 @@ function sanitizeHtml(html, options, _recursing) {
     }
 
     allowedClassesMap[tag] = [];
+    allowedClassesRegexMap[tag] = [];
     const globRegex = [];
     classes.forEach(function(obj) {
       if (typeof obj === 'string' && obj.indexOf('*') >= 0) {
         globRegex.push(escapeStringRegexp(obj).replace(/\\\*/g, '.*'));
+      } else if (obj instanceof RegExp) {
+        allowedClassesRegexMap[tag].push(obj);
       } else {
         allowedClassesMap[tag].push(obj);
       }
@@ -432,12 +435,16 @@ function sanitizeHtml(html, options, _recursing) {
               const allowedSpecificClasses = allowedClassesMap[name];
               const allowedWildcardClasses = allowedClassesMap['*'];
               const allowedSpecificClassesGlob = allowedClassesGlobMap[name];
+              const allowedSpecificClassesRegex = allowedClassesRegexMap[name];
               const allowedWildcardClassesGlob = allowedClassesGlobMap['*'];
-              const allowedClassesGlobs = [ allowedSpecificClassesGlob, allowedWildcardClassesGlob ].filter(
-                function(t) {
+              const allowedClassesGlobs = [
+                allowedSpecificClassesGlob,
+                allowedWildcardClassesGlob
+              ]
+                .concat(allowedSpecificClassesRegex)
+                .filter(function (t) {
                   return t;
-                }
-              );
+                });
               if (allowedSpecificClasses && allowedWildcardClasses) {
                 value = filterClasses(value, deepmerge(allowedSpecificClasses, allowedWildcardClasses), allowedClassesGlobs);
               } else {
@@ -575,6 +582,7 @@ function sanitizeHtml(html, options, _recursing) {
         result = tempResult + escapeHtml(result);
         tempResult = '';
       }
+      addedText = false;
     }
   }, options.parser);
   parser.write(html);
@@ -650,18 +658,18 @@ function sanitizeHtml(html, options, _recursing) {
 
   /**
    * Filters user input css properties by allowlisted regex attributes.
+   * Modifies the abstractSyntaxTree object.
    *
    * @param {object} abstractSyntaxTree  - Object representation of CSS attributes.
    * @property {array[Declaration]} abstractSyntaxTree.nodes[0] - Each object cointains prop and value key, i.e { prop: 'color', value: 'red' }.
    * @param {object} allowedStyles       - Keys are properties (i.e color), value is list of permitted regex rules (i.e /green/i).
-   * @return {object}                    - Abstract Syntax Tree with filtered style attributes.
+   * @return {object}                    - The modified tree.
    */
   function filterCss(abstractSyntaxTree, allowedStyles) {
     if (!allowedStyles) {
       return abstractSyntaxTree;
     }
 
-    const filteredAST = klona(abstractSyntaxTree);
     const astRules = abstractSyntaxTree.nodes[0];
     let selectedRule;
 
@@ -676,24 +684,24 @@ function sanitizeHtml(html, options, _recursing) {
     }
 
     if (selectedRule) {
-      filteredAST.nodes[0].nodes = astRules.nodes.reduce(filterDeclarations(selectedRule), []);
+      abstractSyntaxTree.nodes[0].nodes = astRules.nodes.reduce(filterDeclarations(selectedRule), []);
     }
 
-    return filteredAST;
+    return abstractSyntaxTree;
   }
 
   /**
-   * Extracts the style attribues from an AbstractSyntaxTree and formats those
+   * Extracts the style attributes from an AbstractSyntaxTree and formats those
    * values in the inline style attribute format.
    *
    * @param  {AbstractSyntaxTree} filteredAST
-   * @return {string}             - Example: "color:yellow;text-align:center;font-family:helvetica;"
+   * @return {string}             - Example: "color:yellow;text-align:center !important;font-family:helvetica;"
    */
   function stringifyStyleAttributes(filteredAST) {
     return filteredAST.nodes[0].nodes
-      .reduce(function(extractedAttributes, attributeObject) {
+      .reduce(function(extractedAttributes, attrObject) {
         extractedAttributes.push(
-          attributeObject.prop + ':' + attributeObject.value
+          `${attrObject.prop}:${attrObject.value}${attrObject.important ? ' !important' : ''}`
         );
         return extractedAttributes;
       }, [])
@@ -772,10 +780,9 @@ sanitizeHtml.defaults = {
   disallowedTagsMode: 'discard',
   allowedAttributes: {
     a: [ 'href', 'name', 'target' ],
-    // We don't currently allow img itself by default, but this
-    // would make sense if we did. You could add srcset here,
-    // and if you do the URL is checked for safety
-    img: [ 'src' ]
+    // We don't currently allow img itself by default, but
+    // these attributes would make sense if we did.
+    img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
   },
   // Lots of these won't come up by default because we don't allow them
   selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanitize-html",
-  "version": "2.5.2",
+  "version": "2.7.0",
   "description": "Clean up user-submitted HTML, preserving allowlisted elements and allowlisted attributes on a per-element basis",
   "sideEffects": false,
   "main": "index.js",
@@ -27,15 +27,14 @@
     "escape-string-regexp": "^4.0.0",
     "htmlparser2": "^6.0.0",
     "is-plain-object": "^5.0.0",
-    "klona": "^2.0.3",
     "parse-srcset": "^1.0.2",
-    "postcss": "^8.0.2"
+    "postcss": "^8.3.11"
   },
   "devDependencies": {
     "eslint": "^7.3.1",
     "eslint-config-apostrophe": "^3.4.0",
     "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",