Repository: apostrophecms/sanitize-html (js)

Issue:
allow '!important' for style attributes
Hey everyone,

I am currently trying to allow the important flag for CSS Attribute inside the style attribute for tags. I did not manage to get it work, the sanitizer always removes the '!important'.

Here is a code sandbox: https://codesandbox.io/s/wizardly-agnesi-64lc2?file=/src/index.js

I tried to use allowStyles but could not figure out the right config, the docs do not mention this specific case.

Looking forward to your answers!

Max


## Details

**Version of Node.js:**
14 LTS

**Server Operating System:**
Linux


Pull request description:
Fixes important stripping
Resolves #487 

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ec3c55..7e5489a 100644
--- 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
index 3f0ff55..648ec1b 100644
--- 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;
       }, [])


Test patch:
diff --git a/test/test.js b/test/test.js
index 5b343c1..868b3ef 100644
--- 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>', {