Fixes important stripping (#522)

apostrophecms · Dec 7, 2021 · da9767f · da9767f
1 parent d077c9f
commit da9767f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## UNRELEASED
 
+- Fixes style filtering to retain `!important` when used.
 - Fixed trailing text bug on `transformTags` options that was reported on [issue #506](https://github.com/punkave/sanitize-html/issues/506). Thanks to [Alex Rantos](https://github.com/alex-rantos).
 
 ## 2.6.0 (2021-11-23)

diff --git a/index.js b/index.js
@@ -691,17 +691,17 @@ function sanitizeHtml(html, options, _recursing) {
   }
 
   /**
-   * Extracts the style attribues from an AbstractSyntaxTree and formats those
+   * Extracts the style attributes from an AbstractSyntaxTree and formats those
    * values in the inline style attribute format.
    *
    * @param  {AbstractSyntaxTree} filteredAST
-   * @return {string}             - Example: "color:yellow;text-align:center;font-family:helvetica;"
+   * @return {string}             - Example: "color:yellow;text-align:center !important;font-family:helvetica;"
    */
   function stringifyStyleAttributes(filteredAST) {
     return filteredAST.nodes[0].nodes
-      .reduce(function(extractedAttributes, attributeObject) {
+      .reduce(function(extractedAttributes, attrObject) {
         extractedAttributes.push(
-          attributeObject.prop + ':' + attributeObject.value
+          `${attrObject.prop}:${attrObject.value}${attrObject.important ? ' !important' : ''}`
         );
         return extractedAttributes;
       }, [])

diff --git a/test/test.js b/test/test.js
@@ -912,6 +912,21 @@ describe('sanitizeHtml', function() {
       }), '<span style="color:blue"></span>'
     );
   });
+  it('Should support !important styles', function() {
+    assert.equal(
+      sanitizeHtml('<span style=\'color: blue !important\'></span>', {
+        allowedTags: false,
+        allowedAttributes: {
+          span: [ 'style' ]
+        },
+        allowedStyles: {
+          span: {
+            color: [ /blue/ ]
+          }
+        }
+      }), '<span style="color:blue !important"></span>'
+    );
+  });
   it('Should allow a specific style from global', function() {
     assert.equal(
       sanitizeHtml('<span style=\'color: yellow; text-align: center; font-family: helvetica\'></span>', {