DOMPurify sanitizing issue

[user96222]

For tracking purposes, we're setting the following value for the "trackingfeature" attribute in our JSP file: vm.put("trackingFeature", "aem:pagepreview") However, on page load, we’re seeing a warning that DOMPurify is sanitizing the "trackingfeature" attribute—most likely due to the colon (:) in the value. Is there any way to fix this issue—either by allowing colons in this specific attribute or by excluding "trackingfeature" from being sanitized?

[giuseppebag · Accepted solution]

You can configure DOMPurify to allow the trackingfeature attribute while retaining its sanitization for other attributes.

// Configure DOMPurify to allow the "trackingfeature" attribute with colons
DOMPurify.sanitize(dirtyHTML, {
    ADD_ATTR: ['trackingfeature'], // Explicitly allow the "trackingfeature" attribute
    ALLOW_UNKNOWN_PROTOCOLS: true  // Allow unknown protocols like "aem:"
});

This configuration ensures that the trackingfeature attribute is not stripped out during sanitization, and it allows colons in the attribute value by enabling ALLOW_UNKNOWN_PROTOCOLS. However, be cautious when enabling ALLOW_UNKNOWN_PROTOCOLS, as it could introduce security risks if misused.

Alternatively, you can use a hook to bypass sanitization for this specific attribute:

DOMPurify.addHook('uponSanitizeAttribute', function(node, data) {
  if (data.attrName === 'trackingfeature') {
    data.forceKeepAttr = true;
  }
});

This approach should ensures that the trackingfeature attribute is preserved exactly as it is, without being modified or removed by DOMPurify.

[AmitVishwakarma]

Hi @user96222 ,

When you want DOMPurify to preserve a custom attribute like trackingfeature with a colon in its value, you can use one of the following secure methods:

Option 1: Allow Attribute via Config

DOMPurify.sanitize(dirtyHTML, {
  ADD_ATTR: ['trackingfeature'],      // Allow this custom attribute
  ALLOW_UNKNOWN_PROTOCOLS: true       // Let values like "aem:pagepreview" pass
});

Note: Enabling ALLOW_UNKNOWN_PROTOCOLS can expose your app to risks if user-generated input is not validated. Use with care!

Option 2: Use a DOMPurify Hook (Recommended)

DOMPurify.addHook('uponSanitizeAttribute', function(node, data) {
  if (data.attrName === 'trackingfeature') {
    data.forceKeepAttr = true; // Keep it exactly as it is
  }
});

This approach is safer and more targeted. It keeps trackingfeature untouched without relaxing global security rules.

Regards,
Amit

[aanchal-sikka]

@user96222 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!