sanitize-html 2.3.3 → 2.5.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 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.
+- Documented that all text content is escaped. Thanks to Siddharth Singh.
+
+## 2.5.1 (2021-09-14):
+- The `allowedScriptHostnames` and `allowedScriptDomains` options now implicitly purge the inline content of all script tags, not just those with `src` attributes. This behavior was already strongly implied by the fact that they purged it in the case where a `src` attribute was actually present, and is necessary for the feature to provide any real security. Thanks to Grigorii Duca for pointing out the issue.
+
+## 2.5.0 (2021-09-08):
+
+- New `allowedScriptHostnames` option, it enables you to specify which hostnames are allowed in a script tag.
+- New `allowedScriptDomains` option, it enables you to specify which domains are allowed in a script tag. Thank you to [Yorick Girard](https://github.com/yorickgirard) for this and the `allowedScriptHostnames` contribution.
+- Updates whitelist to allowlist.
+
+## 2.4.0 (2021-05-19):
+- Added support for class names with wildcards in `allowedClasses`. Thanks to [zhangbenber](https://github.com/zhangbenber) for the contribution.
+
 ## 2.3.3 (2021-03-19):
 - Security fix: `allowedSchemes` and related options did not properly block schemes containing a hyphen, plus sign, period or digit, such as `ms-calculator:`. Thanks to Lukas Euler for pointing out the issue.
 - Added a security note about the known risks associated with using the `parser` option, especially `decodeEntities: false`. See the documentation.

package/README.md

@@ -21,14 +21,25 @@ The syntax of poorly closed `p` and `img` elements is cleaned up.
 Allowing particular urls as a `src` to an iframe tag by filtering hostnames is also supported.
 
 HTML comments are not preserved.
+Additionally, `sanitize-html` escapes _ALL_ text content - this means that ampersands, greater-than, and less-than signs are converted to their equivalent HTML character references (`&` --> `&amp;`, `<` --> `&lt;`, and so on). Additionally, in attribute values, quotation marks are escaped as well (`"` --> `&quot;`).
 
 ## Requirements
 
 sanitize-html is intended for use with Node.js and supports Node 10+. All of its npm dependencies are pure JavaScript. sanitize-html is built on the excellent `htmlparser2` module.
 
-### Regarding Typescript
+### Regarding TypeScript
 
-sanitize-html is not written in Typescript and there is no plan to directly support it. There is a community supported implementation, [`@types/sanitize-html`](https://www.npmjs.com/package/@types/sanitize-html), however. Any questions or problems while using that implementation should be directed to its maintainers as directed by that project's contribution guidelines.
+sanitize-html is not written in TypeScript and there is no plan to directly support it. There is a community supported typing definition, [`@types/sanitize-html`](https://www.npmjs.com/package/@types/sanitize-html), however.
+```bash
+npm install -D @types/sanitize-html
+```
+If `esModuleInterop=true` is not set in your `tsconfig.json` file, you have to import it with:
+
+```javascript
+import * as sanitizeHtml from 'sanitize-html';
+```
+
+Any questions or problems while using `@types/sanitize-html` should be directed to its maintainers as directed by that project's contribution guidelines.
 
 ## How to use
 
@@ -38,11 +49,14 @@ sanitize-html is not written in Typescript and there is no plan to directly supp
 
 But, perhaps you'd like to display sanitized HTML immediately in the browser for preview. Or ask the browser to do the sanitization work on every page load. You can if you want to!
 
-* Clone repository and install via npm
-* Run npm install and:
+* Install the package:
 
 ```bash
-npm install sanitize-html # yarn add sanitize-html
+npm install sanitize-html
+```
+or
+```
+yarn add sanitize-html
 ```
 
 The primary change in the 2.x version of sanitize-html is that it no longer includes a build that is ready for browser use. Developers are expected to include sanitize-html in their project builds (e.g., webpack) as they would any other dependency. So while sanitize-html is no longer ready to link to directly in HTML, developers can now more easily process it according to their needs.
@@ -69,7 +83,7 @@ npm install sanitize-html
 
 Import the module:
 
-```bash
+```js
 // In ES modules
 import sanitizeHtml from 'sanitize-html';
 
@@ -224,16 +238,17 @@ const clean = sanitizeHtml(dirty, {
 });
 ```
 
-Similar to `allowedAttributes`, you can use `*` as a tag name, to allow listed classes to be valid for any tag:
+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-*' ],
   '*': [ 'fancy', 'simple' ]
 }
 ```
 
 ### 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 whitelisted attributes from the global (`*`) attribute. Any other CSS classes are discarded.
+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.
 
 **You must also use `allowedAttributes`** to activate the `style` attribute for the relevant elements. Otherwise this feature will never come into play.
 
@@ -502,6 +517,32 @@ const clean = sanitizeHtml('<p><iframe src="https://us02web.zoom.us/embed/12345"
 });
 ```
 
+### Script Filters
+
+Similarly to iframes you can allow a script tag on a list of allowlisted domains
+
+```js
+const clean = sanitizeHtml('<script src="https://www.safe.authorized.com/lib.js"></script>', {
+    allowedTags: ['script'],
+    allowedAttributes: {
+        script: ['src']
+    },
+    allowedScriptDomains: ['authorized.com'],
+})
+```
+
+You can allow a script tag on a list of allowlisted hostnames too
+
+```js
+const clean = sanitizeHtml('<script src="https://www.authorized.com/lib.js"></script>', {
+    allowedTags: ['script'],
+    allowedAttributes: {
+        script: ['src']
+    },
+    allowedScriptHostnames: [ 'www.authorized.com' ],
+})
+```
+
 ### Allowed URL schemes
 
 By default, we allow the following URL schemes in cases where `href`, `src`, etc. are allowed:

package/index.js

@@ -81,6 +81,10 @@ const VALID_HTML_ATTRIBUTE_NAME = /^[^\0\t\n\f\r /<=>]+$/;
 // https://github.com/fb55/htmlparser2/issues/105
 
 function sanitizeHtml(html, options, _recursing) {
+  if (html == null) {
+    return '';
+  }
+
   let result = '';
   // Used for hot swapping the result variable with an empty string in order to "capture" the text written to it.
   let tempResult = '';
@@ -146,10 +150,13 @@ function sanitizeHtml(html, options, _recursing) {
           allowedAttributesMap[tag].push(obj);
         }
       });
-      allowedAttributesGlobMap[tag] = new RegExp('^(' + globRegex.join('|') + ')$');
+      if (globRegex.length) {
+        allowedAttributesGlobMap[tag] = new RegExp('^(' + globRegex.join('|') + ')$');
+      }
     });
   }
   const allowedClassesMap = {};
+  const allowedClassesGlobMap = {};
   each(options.allowedClasses, function(classes, tag) {
     // Implicitly allows the class attribute
     if (allowedAttributesMap) {
@@ -159,7 +166,18 @@ function sanitizeHtml(html, options, _recursing) {
       allowedAttributesMap[tag].push('class');
     }
 
-    allowedClassesMap[tag] = classes;
+    allowedClassesMap[tag] = [];
+    const globRegex = [];
+    classes.forEach(function(obj) {
+      if (typeof obj === 'string' && obj.indexOf('*') >= 0) {
+        globRegex.push(escapeStringRegexp(obj).replace(/\\\*/g, '.*'));
+      } else {
+        allowedClassesMap[tag].push(obj);
+      }
+    });
+    if (globRegex.length) {
+      allowedClassesGlobMap[tag] = new RegExp('^(' + globRegex.join('|') + ')$');
+    }
   });
 
   const transformTagsMap = {};
@@ -251,6 +269,13 @@ function sanitizeHtml(html, options, _recursing) {
         result = '';
       }
       result += '<' + name;
+
+      if (name === 'script') {
+        if (options.allowedScriptHostnames || options.allowedScriptDomains) {
+          frame.innerText = '';
+        }
+      }
+
       if (!allowedAttributesMap || has(allowedAttributesMap, name) || allowedAttributesMap['*']) {
         each(attribs, function(value, a) {
           if (!VALID_HTML_ATTRIBUTE_NAME.test(a)) {
@@ -301,6 +326,33 @@ function sanitizeHtml(html, options, _recursing) {
                 return;
               }
             }
+
+            if (name === 'script' && a === 'src') {
+
+              let allowed = true;
+
+              try {
+                const parsed = new URL(value);
+
+                if (options.allowedScriptHostnames || options.allowedScriptDomains) {
+                  const allowedHostname = (options.allowedScriptHostnames || []).find(function (hostname) {
+                    return hostname === parsed.hostname;
+                  });
+                  const allowedDomain = (options.allowedScriptDomains || []).find(function(domain) {
+                    return parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`);
+                  });
+                  allowed = allowedHostname || allowedDomain;
+                }
+              } catch (e) {
+                allowed = false;
+              }
+
+              if (!allowed) {
+                delete frame.attribs[a];
+                return;
+              }
+            }
+
             if (name === 'iframe' && a === 'src') {
               let allowed = true;
               try {
@@ -379,10 +431,17 @@ function sanitizeHtml(html, options, _recursing) {
             if (a === 'class') {
               const allowedSpecificClasses = allowedClassesMap[name];
               const allowedWildcardClasses = allowedClassesMap['*'];
+              const allowedSpecificClassesGlob = allowedClassesGlobMap[name];
+              const allowedWildcardClassesGlob = allowedClassesGlobMap['*'];
+              const allowedClassesGlobs = [ allowedSpecificClassesGlob, allowedWildcardClassesGlob ].filter(
+                function(t) {
+                  return t;
+                }
+              );
               if (allowedSpecificClasses && allowedWildcardClasses) {
-                value = filterClasses(value, deepmerge(allowedSpecificClasses, allowedWildcardClasses));
+                value = filterClasses(value, deepmerge(allowedSpecificClasses, allowedWildcardClasses), allowedClassesGlobs);
               } else {
-                value = filterClasses(value, allowedSpecificClasses || allowedWildcardClasses);
+                value = filterClasses(value, allowedSpecificClasses || allowedWildcardClasses, allowedClassesGlobs);
               }
               if (!value.length) {
                 delete frame.attribs[a];
@@ -590,7 +649,7 @@ function sanitizeHtml(html, options, _recursing) {
   }
 
   /**
-   * Filters user input css properties by whitelisted regex attributes.
+   * Filters user input css properties by allowlisted regex attributes.
    *
    * @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' }.
@@ -643,10 +702,10 @@ function sanitizeHtml(html, options, _recursing) {
 
   /**
     * Filters the existing attributes for the given property. Discards any attributes
-    * which don't match the whitelist.
+    * which don't match the allowlist.
     *
     * @param  {object} selectedRule             - Example: { color: red, font-family: helvetica }
-    * @param  {array} allowedDeclarationsList   - List of declarations which pass whitelisting.
+    * @param  {array} allowedDeclarationsList   - List of declarations which pass the allowlist.
     * @param  {object} attributeObject          - Object representing the current css property.
     * @property {string} attributeObject.type   - Typically 'declaration'.
     * @property {string} attributeObject.prop   - The CSS property, i.e 'color'.
@@ -655,7 +714,7 @@ function sanitizeHtml(html, options, _recursing) {
     */
   function filterDeclarations(selectedRule) {
     return function (allowedDeclarationsList, attributeObject) {
-      // If this property is whitelisted...
+      // If this property is allowlisted...
       if (has(selectedRule, attributeObject.prop)) {
         const matchesRegex = selectedRule[attributeObject.prop].some(function(regularExpression) {
           return regularExpression.test(attributeObject.value);
@@ -669,14 +728,16 @@ function sanitizeHtml(html, options, _recursing) {
     };
   }
 
-  function filterClasses(classes, allowed) {
+  function filterClasses(classes, allowed, allowedGlobs) {
     if (!allowed) {
       // The class attribute is allowed without filtering on this tag
       return classes;
     }
     classes = classes.split(/\s+/);
     return classes.filter(function(clss) {
-      return allowed.indexOf(clss) !== -1;
+      return allowed.indexOf(clss) !== -1 || allowedGlobs.some(function(glob) {
+        return glob.test(clss);
+      });
     }).join(' ');
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sanitize-html",
-  "version": "2.3.3",
-  "description": "Clean up user-submitted HTML, preserving whitelisted elements and whitelisted attributes on a per-element basis",
+  "version": "2.5.2",
+  "description": "Clean up user-submitted HTML, preserving allowlisted elements and allowlisted attributes on a per-element basis",
   "sideEffects": false,
   "main": "index.js",
   "files": [