Merge pull request #244 from flavorjones/243-extended-css-colors

feat: support SVG 1.0 extended color keywords
flavorjones · Sep 13, 2022 · b0832f1 · b0832f1
2 parents a0caaf0 + 4d517ac
commit b0832f1
Show file tree

Hide file tree

Showing 3 changed files with 197 additions and 18 deletions.
diff --git 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
@@ -684,59 +684,213 @@ 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",
                                           "initial",
                                           "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

diff --git 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