Merge pull request #634 from zhna123/empty-alt

Added 'allowedEmptyAttributes' option and kept empty 'alt' value by default

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## UNRELEASED
+
+- Introduced the `allowedEmptyAttributes` option, enabling explicit specification of empty string values for select attributes, with the default attribute set to `alt`.
+
 ## 2.11.0 (2023-06-21)
 
 - Fix to allow `false` in `allowedClasses` attributes. Thanks to [Kevin Jiang](https://github.com/KevinSJ) for this fix!

index.js

@@ -295,9 +295,11 @@ function sanitizeHtml(html, options, _recursing) {
             delete frame.attribs[a];
             return;
           }
-          // If the value is empty, and this is a known non-boolean attribute, delete it
+          // If the value is empty, check if the attribute is in the allowedEmptyAttributes array.
+          // If it is not in the allowedEmptyAttributes array, and it is a known non-boolean attribute, delete it
           // List taken from https://html.spec.whatwg.org/multipage/indices.html#attributes-3
-          if (value === '' && (options.nonBooleanAttributes.includes(a) || options.nonBooleanAttributes.includes('*'))) {
+          if (value === '' && (!options.allowedEmptyAttributes.includes(a)) &&
+            (options.nonBooleanAttributes.includes(a) || options.nonBooleanAttributes.includes('*'))) {
             delete frame.attribs[a];
             return;
           }
@@ -474,6 +476,8 @@ function sanitizeHtml(html, options, _recursing) {
             result += ' ' + a;
             if (value && value.length) {
               result += '="' + escapeHtml(value, true) + '"';
+            } else if (options.allowedEmptyAttributes.includes(a)) {
+              result += '=""';
             }
           } else {
             delete frame.attribs[a];
@@ -876,6 +880,9 @@ sanitizeHtml.defaults = {
     // these attributes would make sense if we did.
     img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
   },
+  allowedEmptyAttributes: [
+    'alt'
+  ],
   // 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' ],
   // URL schemes we permit

test/test.js

@@ -1616,4 +1616,37 @@ describe('sanitizeHtml', function() {
       nonBooleanAttributes: [ '*' ]
     }), '<input type="checkbox" />');
   });
+  it('should not remove empty alt attribute value by default', function() {
+    assert.equal(sanitizeHtml('<img alt="" src="https://example.com/" />', {
+      allowedAttributes: { img: [ 'alt', 'src' ] },
+      allowedTags: [ 'img' ]
+    }), '<img alt="" src="https://example.com/" />');
+  });
+  it('should convert the implicit empty alt attribute value to be an empty string by default', function() {
+    assert.equal(sanitizeHtml('<img alt src="https://example.com/" />', {
+      allowedAttributes: { img: [ 'alt', 'src' ] },
+      allowedTags: [ 'img' ]
+    }), '<img alt="" src="https://example.com/" />');
+  });
+  it('should not remove empty alt attribute value by default when an empty nonBooleanAttributes option passed in', function() {
+    assert.equal(sanitizeHtml('<img alt="" src="https://example.com/" />', {
+      allowedAttributes: { img: [ 'alt', 'src' ] },
+      allowedTags: [ 'img' ],
+      nonBooleanAttributes: []
+    }), '<img alt="" src="https://example.com/" />');
+  });
+  it('should not remove the empty attributes specified in allowedEmptyAttributes option', function() {
+    assert.equal(sanitizeHtml('<img alt="" src="" />', {
+      allowedAttributes: { img: [ 'alt', 'src' ] },
+      allowedTags: [ 'img' ],
+      allowedEmptyAttributes: [ 'alt', 'src' ]
+    }), '<img alt="" src="" />');
+  });
+  it('should remove all the empty attributes when an empty allowedEmptyAttributes option passed in', function() {
+    assert.equal(sanitizeHtml('<img alt="" src="https://example.com/" target="" />', {
+      allowedAttributes: { img: [ 'alt', 'src' ] },
+      allowedTags: [ 'img' ],
+      allowedEmptyAttributes: []
+    }), '<img src="https://example.com/" />');
+  });
 });