Merge pull request #1115 from nelstrom/attribute-name-check-with-tagname

feat: add tagName parameter to attributeNameCheck

Author: cure53

README.md

@@ -230,6 +230,8 @@ const clean = DOMPurify.sanitize(dirty, {ALLOW_DATA_ATTR: false});
 // The same goes for their attributes. By default, the built-in or configured allow.list is used.
 //
 // You can use a RegExp literal to specify what is allowed or a predicate, examples for both can be seen below.
+// When using a predicate function for attributeNameCheck, it can optionally receive the tagName as a second parameter
+// for more granular control over which attributes are allowed for specific elements.
 // The default values are very restrictive to prevent accidental XSS bypasses. Handle with great care!
 
 const clean = DOMPurify.sanitize(
@@ -264,6 +266,26 @@ const clean = DOMPurify.sanitize(
         },
     }
 ); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>
+
+// Example with attributeNameCheck receiving tagName as a second parameter
+const clean = DOMPurify.sanitize(
+    '<element-one attribute-one="1" attribute-two="2"></element-one><element-two attribute-one="1" attribute-two="2"></element-two>',
+    {
+        CUSTOM_ELEMENT_HANDLING: {
+            tagNameCheck: (tagName) => tagName.match(/^element-(one|two)$/),
+            attributeNameCheck: (attr, tagName) => {
+                if (tagName === 'element-one') {
+                    return ['attribute-one'].includes(attr);
+                } else if (tagName === 'element-two') {
+                    return ['attribute-two'].includes(attr);
+                } else {
+                    return false;
+                }
+            },
+            allowCustomizedBuiltInElements: false,
+        },
+    }
+); // <element-one attribute-one="1"></element-one><element-two attribute-two="2"></element-two>
 ```
 ### Control behavior relating to URI values
 ```js

dist/purify.cjs.d.ts

@@ -76,7 +76,7 @@ interface Config {
          * Regular expression or function to match to allowed attributes.
          * Default is null (disallow any attributes not on the allow list).
          */
-        attributeNameCheck?: RegExp | ((attributeName: string) => boolean) | null | undefined;
+        attributeNameCheck?: RegExp | ((attributeName: string, tagName?: string) => boolean) | null | undefined;
         /**
          * Allow custom elements derived from built-ins if they pass `tagNameCheck`. Default is false.
          */

dist/purify.cjs.js

@@ -76,7 +76,7 @@ interface Config {
          * Regular expression or function to match to allowed attributes.
          * Default is null (disallow any attributes not on the allow list).
          */
-        attributeNameCheck?: RegExp | ((attributeName: string) => boolean) | null | undefined;
+        attributeNameCheck?: RegExp | ((attributeName: string, tagName?: string) => boolean) | null | undefined;
         /**
          * Allow custom elements derived from built-ins if they pass `tagNameCheck`. Default is false.
          */

dist/purify.cjs.js.map

@@ -996,7 +996,7 @@ function createDOMPurify() {
       // First condition does a very basic check if a) it's basically a valid custom element tagname AND
       // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
       // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
-      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||
+      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) ||
       // Alternative, second condition checks if it's an `is`-attribute, AND
       // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
       lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {