Repository: flavorjones/loofah (Ruby)

Issue:
CSS Scrubber is removing the builtin extended CSS color properties in `>= v2.9.0`
## Expected
When scrubbing HTML which makes use of the [builtin extended CSS color properties](https://www.w3.org/wiki/CSS/Properties/color/keywords#Extended_colors) in the `style` property they are not removed.

## Actual
[Builtin extended CSS color properties](https://www.w3.org/wiki/CSS/Properties/color/keywords#Extended_colors) included in the `style` property of HTML strings are being removed.

## Reproduction steps
_The issue looks to be introduced in [v2.9.0](https://github.com/flavorjones/loofah/releases/tag/v2.9.0)_

- Install [Loofa v2.8.0](https://github.com/flavorjones/loofah/releases/tag/v2.8.0)
- Run the following command in your ruby console
    - `Loofah.fragment('<div style="background-color: blue;">Test</div>').scrub!(:strip).to_s`
- You will get the following HTML string back `<div style=\"background:blue;\">Test</div>`
- Run the following command in your ruby console
    - `Loofah.fragment('<div style="background-color: lightblue;">Test</div>').scrub!(:strip).to_s`
- You will get the following HTML string back `<div style=\"background-color: lightblue;\">Test</div>`
- Install [Loofa v2.9.0](https://github.com/flavorjones/loofah/releases/tag/v2.9.0)
    - This can be any version `>= 2.9.0`
- Run the following command in your ruby console
    - `Loofah.fragment('<div style="background-color: blue;">Test</div>').scrub!(:strip).to_s`
- You will get the following HTML string back `<div style=\"background:blue;\">Test</div>`
- Run the following command in your ruby console
    - `Loofah.fragment('<div style="background-color: lightblue;">Test</div>').scrub!(:strip).to_s`
- You will get the following HTML string back `<div>Test</div>`
    - I would expect `<div style="background-color: lightblue;">Test</div>`


Discussion:
Hi, thanks for reporting this. For clarity, I think this is what you're saying is happening? (The code snippets above are inconsistent so I just want to make sure I understand.)

```ruby
#! /usr/bin/env ruby

require "bundler/inline"

gemfile do
  source "https://rubygems.org"
  gem "loofah", "= 2.8.0"
end


Loofah.fragment('<div style="background-color: blue;">Test</div>').scrub!(:strip).to_s
# => "<div style=\"background-color: blue;\">Test</div>"

Loofah.fragment('<div style="background-color: lightblue;">Test</div>').scrub!(:strip).to_s
# => "<div style=\"background-color: lightblue;\">Test</div>"
```

```ruby
#! /usr/bin/env ruby

require "bundler/inline"

gemfile do
  source "https://rubygems.org"
  gem "loofah", "= 2.18.0"
end


Loofah.fragment('<div style="background-color: blue;">Test</div>').scrub!(:strip).to_s
# => "<div style=\"background-color:blue;\">Test</div>"

Loofah.fragment('<div style="background-color: lightblue;">Test</div>').scrub!(:strip).to_s
# => "<div>Test</div>"
```

and we expect that `lightblue` should be an acceptable color in loofah 2.18.0 and behave the same as blue.

I'll investigate!
Looks like we just need to include the extended colors in `Loofah::HTML5::SafeList::ACCEPTABLE_CSS_KEYWORDS`.

```ruby
#! /usr/bin/env ruby

require "bundler/inline"

gemfile do
  source "https://rubygems.org"
  gem "loofah", "= 2.18.0"
end

Loofah.fragment('<div style="background-color: lightblue;">Test</div>').scrub!(:strip).to_s
# => "<div>Test</div>"

Loofah::HTML5::SafeList::ACCEPTABLE_CSS_KEYWORDS.add("lightblue")

Loofah.fragment('<div style="background-color: lightblue;">Test</div>').scrub!(:strip).to_s
# => "<div style=\"background-color:lightblue;\">Test</div>"
```

So you have a workaround right now if you need it. I'll schedule some work to add those colors and make a new release.
See #244
Thanks a bunch @flavorjones!! The quick turn around is SUPER appreciated!!!
v2.19.0 has been shipped! Happy hacking




Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52331f8..f45670c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## unreleased
+
+### Features
+
+* Allow SVG 1.0 color keyword names in CSS attributes. These colors are part of the [CSS Color Module Level 3](https://www.w3.org/TR/css-color-3/#svg-color) recommendation released 2022-01-18. [[#243](https://github.com/flavorjones/loofah/issues/243)]
+
+
 ## 2.18.0 / 2022-05-11
 
 ### Features
diff --git a/lib/loofah/html5/safelist.rb b/lib/loofah/html5/safelist.rb
index f98e23f..287b435 100644
--- a/lib/loofah/html5/safelist.rb
+++ b/lib/loofah/html5/safelist.rb
@@ -684,23 +684,16 @@ module SafeList
 
       ACCEPTABLE_CSS_KEYWORDS = Set.new([
                                           "!important",
-                                          "aqua",
                                           "auto",
-                                          "black",
                                           "block",
-                                          "blue",
                                           "bold",
                                           "both",
                                           "bottom",
-                                          "brown",
                                           "center",
                                           "collapse",
                                           "dashed",
                                           "dotted",
                                           "double",
-                                          "fuchsia",
-                                          "gray",
-                                          "green",
                                           "groove",
                                           "hidden",
                                           "inherit",
@@ -708,35 +701,196 @@ module SafeList
                                           "inset",
                                           "italic",
                                           "left",
-                                          "lime",
-                                          "maroon",
                                           "medium",
-                                          "navy",
                                           "none",
                                           "normal",
                                           "nowrap",
-                                          "olive",
                                           "outset",
                                           "pointer",
-                                          "purple",
-                                          "red",
                                           "revert",
                                           "ridge",
                                           "right",
                                           "separate",
-                                          "silver",
                                           "solid",
-                                          "teal",
                                           "thick",
                                           "thin",
                                           "top",
                                           "transparent",
                                           "underline",
                                           "unset",
-                                          "white",
-                                          "yellow",
                                         ])
 
+      # https://www.w3.org/TR/css-color-3/#html4
+      ACCEPTABLE_CSS_COLORS = Set.new([
+                                        "aqua",
+                                        "black",
+                                        "blue",
+                                        "fuchsia",
+                                        "gray",
+                                        "green",
+                                        "lime",
+                                        "maroon",
+                                        "navy",
+                                        "olive",
+                                        "purple",
+                                        "red",
+                                        "silver",
+                                        "teal",
+                                        "white",
+                                        "yellow",
+                                      ])
+
+      # https://www.w3.org/TR/css-color-3/#svg-color
+      ACCEPTABLE_CSS_EXTENDED_COLORS = Set.new([
+                                                 "aliceblue",
+                                                 "antiquewhite",
+                                                 "aqua",
+                                                 "aquamarine",
+                                                 "azure",
+                                                 "beige",
+                                                 "bisque",
+                                                 "black",
+                                                 "blanchedalmond",
+                                                 "blue",
+                                                 "blueviolet",
+                                                 "brown",
+                                                 "burlywood",
+                                                 "cadetblue",
+                                                 "chartreuse",
+                                                 "chocolate",
+                                                 "coral",
+                                                 "cornflowerblue",
+                                                 "cornsilk",
+                                                 "crimson",
+                                                 "cyan",
+                                                 "darkblue",
+                                                 "darkcyan",
+                                                 "darkgoldenrod",
+                                                 "darkgray",
+                                                 "darkgreen",
+                                                 "darkgrey",
+                                                 "darkkhaki",
+                                                 "darkmagenta",
+                                                 "darkolivegreen",
+                                                 "darkorange",
+                                                 "darkorchid",
+                                                 "darkred",
+                                                 "darksalmon",
+                                                 "darkseagreen",
+                                                 "darkslateblue",
+                                                 "darkslategray",
+                                                 "darkslategrey",
+                                                 "darkturquoise",
+                                                 "darkviolet",
+                                                 "deeppink",
+                                                 "deepskyblue",
+                                                 "dimgray",
+                                                 "dimgrey",
+                                                 "dodgerblue",
+                                                 "firebrick",
+                                                 "floralwhite",
+                                                 "forestgreen",
+                                                 "fuchsia",
+                                                 "gainsboro",
+                                                 "ghostwhite",
+                                                 "gold",
+                                                 "goldenrod",
+                                                 "gray",
+                                                 "green",
+                                                 "greenyellow",
+                                                 "grey",
+                                                 "honeydew",
+                                                 "hotpink",
+                                                 "indianred",
+                                                 "indigo",
+                                                 "ivory",
+                                                 "khaki",
+                                                 "lavender",
+                                                 "lavenderblush",
+                                                 "lawngreen",
+                                                 "lemonchiffon",
+                                                 "lightblue",
+                                                 "lightcoral",
+                                                 "lightcyan",
+                                                 "lightgoldenrodyellow",
+                                                 "lightgray",
+                                                 "lightgreen",
+                                                 "lightgrey",
+                                                 "lightpink",
+                                                 "lightsalmon",
+                                                 "lightseagreen",
+                                                 "lightskyblue",
+                                                 "lightslategray",
+                                                 "lightslategrey",
+                                                 "lightsteelblue",
+                                                 "lightyellow",
+                                                 "lime",
+                                                 "limegreen",
+                                                 "linen",
+                                                 "magenta",
+                                                 "maroon",
+                                                 "mediumaquamarine",
+                                                 "mediumblue",
+                                                 "mediumorchid",
+                                                 "mediumpurple",
+                                                 "mediumseagreen",
+                                                 "mediumslateblue",
+                                                 "mediumspringgreen",
+                                                 "mediumturquoise",
+                                                 "mediumvioletred",
+                                                 "midnightblue",
+                                                 "mintcream",
+                                                 "mistyrose",
+                                                 "moccasin",
+                                                 "navajowhite",
+                                                 "navy",
+                                                 "oldlace",
+                                                 "olive",
+                                                 "olivedrab",
+                                                 "orange",
+                                                 "orangered",
+                                                 "orchid",
+                                                 "palegoldenrod",
+                                                 "palegreen",
+                                                 "paleturquoise",
+                                                 "palevioletred",
+                                                 "papayawhip",
+                                                 "peachpuff",
+                                                 "peru",
+                                                 "pink",
+                                                 "plum",
+                                                 "powderblue",
+                                                 "purple",
+                                                 "red",
+                                                 "rosybrown",
+                                                 "royalblue",
+                                                 "saddlebrown",
+                                                 "salmon",
+                                                 "sandybrown",
+                                                 "seagreen",
+                                                 "seashell",
+                                                 "sienna",
+                                                 "silver",
+                                                 "skyblue",
+                                                 "slateblue",
+                                                 "slategray",
+                                                 "slategrey",
+                                                 "snow",
+                                                 "springgreen",
+                                                 "steelblue",
+                                                 "tan",
+                                                 "teal",
+                                                 "thistle",
+                                                 "tomato",
+                                                 "turquoise",
+                                                 "violet",
+                                                 "wheat",
+                                                 "white",
+                                                 "whitesmoke",
+                                                 "yellow",
+                                                 "yellowgreen",
+                                               ])
+
       # see https://www.quackit.com/css/functions/
       # omit `url` and `image` from that list
       ACCEPTABLE_CSS_FUNCTIONS = Set.new([
@@ -854,7 +1008,7 @@ module SafeList
       ALLOWED_ELEMENTS = ACCEPTABLE_ELEMENTS + MATHML_ELEMENTS + SVG_ELEMENTS
       ALLOWED_ATTRIBUTES = ACCEPTABLE_ATTRIBUTES + MATHML_ATTRIBUTES + SVG_ATTRIBUTES + ARIA_ATTRIBUTES
       ALLOWED_CSS_PROPERTIES = ACCEPTABLE_CSS_PROPERTIES
-      ALLOWED_CSS_KEYWORDS = ACCEPTABLE_CSS_KEYWORDS
+      ALLOWED_CSS_KEYWORDS = ACCEPTABLE_CSS_KEYWORDS + ACCEPTABLE_CSS_COLORS + ACCEPTABLE_CSS_EXTENDED_COLORS
       ALLOWED_CSS_FUNCTIONS = ACCEPTABLE_CSS_FUNCTIONS
       ALLOWED_SVG_PROPERTIES = ACCEPTABLE_SVG_PROPERTIES
       ALLOWED_PROTOCOLS = ACCEPTABLE_PROTOCOLS


Test patch:
diff --git a/test/html5/test_scrub_css.rb b/test/html5/test_scrub_css.rb
index 28de773..4929143 100644
--- a/test/html5/test_scrub_css.rb
+++ b/test/html5/test_scrub_css.rb
@@ -58,4 +58,22 @@ class UnitHTML5Scrub < Loofah::TestCase
       assert_empty(Loofah::HTML5::Scrub.scrub_css(%q(font-family:"AvenirNext-Regular';)))
     end
   end
+
+  describe "colors" do
+    it "allows basic and extended colors" do
+      text = %q(background-color:blue;)
+      assert_equal(text, Loofah::HTML5::Scrub.scrub_css(text))
+
+      text = %q(background-color:brown;)
+      assert_equal(text, Loofah::HTML5::Scrub.scrub_css(text))
+
+      text = %q(background-color:lightblue;)
+      assert_equal(text, Loofah::HTML5::Scrub.scrub_css(text))
+    end
+
+    it "does not allow non-colors" do
+      text = %q(background-color:blurple;)
+      assert_empty(Loofah::HTML5::Scrub.scrub_css(text))
+    end
+  end
 end