sanitize-html 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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.
 

package/README.md

@@ -29,7 +29,7 @@ sanitize-html is intended for use with Node.js and supports Node 10+. All of its
 ### Regarding TypeScript
 
 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 
+```bash
 npm install -D @types/sanitize-html
 ```
 If `esModuleInterop=true` is not set in your `tsconfig.json` file, you have to import it with:
@@ -51,7 +51,7 @@ But, perhaps you'd like to display sanitized HTML immediately in the browser for
 * Install the package:
 
 ```bash
-npm install sanitize-html 
+npm install sanitize-html
 ```
 or
 ```
@@ -247,7 +247,7 @@ allowedClasses: {
 
 ### 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.
 
@@ -516,6 +516,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

@@ -315,6 +315,33 @@ function sanitizeHtml(html, options, _recursing) {
                 return;
               }
             }
+            if (name === 'script' && a === 'src') {
+              let allowed = true;
+
+              frame.innerText = '';
+
+              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 {
@@ -611,7 +638,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' }.
@@ -664,10 +691,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'.
@@ -676,7 +703,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);

package/package.json

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