add flex properties to safelist

Author: miguel perez

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### Unreleased
+
+* Allow CSS properties `order`, `flex-direction`, `flex-grow`, `flex-wrap`, `flex-shrink`, `flex-flow`, `flex-basis`, `flex`m `justify-content`, `align-self`, `align-items`, and `align-content`. [[#190](https://github.com/flavorjones/loofah/issues/197)] (Thanks, [@miguelperez](https://github.com/miguelperez)!)
+
 ## 2.7.0 / 2020-08-26
 
 ### Features

lib/loofah/html5/safelist.rb

@@ -549,6 +549,9 @@ module SafeList
 
       ACCEPTABLE_CSS_PROPERTIES = Set.new([
                                             "azimuth",
+                                            "align-content",
+                                            "align-items",
+                                            "align-self",
                                             "background-color",
                                             "border-bottom-color",
                                             "border-collapse",
@@ -562,6 +565,13 @@ module SafeList
                                             "direction",
                                             "display",
                                             "elevation",
+                                            "flex",
+                                            "flex-basis",
+                                            "flex-direction",
+                                            "flex-flow",
+                                            "flex-grow",
+                                            "flex-shrink",
+                                            "flex-wrap",
                                             "float",
                                             "font",
                                             "font-family",
@@ -570,11 +580,13 @@ module SafeList
                                             "font-variant",
                                             "font-weight",
                                             "height",
+                                            "justify-content",
                                             "letter-spacing",
                                             "line-height",
                                             "list-style",
                                             "list-style-type",
                                             "max-width",
+                                            "order",
                                             "overflow",
                                             "page-break-after",
                                             "page-break-before",

test/html5/test_sanitizer.rb

@@ -398,6 +398,78 @@ def test_css_page_break_inside
   end
 
 
+  def test_css_align_content
+    html = '<div style="align-content:flex-start;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/align-content:flex-start/, sane.inner_html
+  end
+
+  def test_css_align_items
+    html = '<div style="align-items:stretch;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/align-items:stretch/, sane.inner_html
+  end
+
+  def test_css_align_self
+    html = '<div style="align-self:auto;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/align-self:auto/, sane.inner_html
+  end
+
+  def test_css_flex
+    html = '<div style="flex:none;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex:none/, sane.inner_html
+ end
+
+  def test_css_flex_basis
+    html = '<div style="flex-basis:auto;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex-basis:auto/, sane.inner_html
+  end
+
+  def test_css_flex_direction
+    html = '<div style="flex-direction:row;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex-direction:row/, sane.inner_html
+  end
+
+  def test_css_flex_flow
+    html = '<div style="flex-flow:column wrap;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex-flow:column wrap/, sane.inner_html
+  end
+
+  def test_css_flex_grow
+    html = '<div style="flex-grow:4;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex-grow:4/, sane.inner_html
+  end
+
+  def test_css_flex_shrink
+    html = '<div style="flex-shrink:3;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex-shrink:3/, sane.inner_html
+  end
+
+  def test_css_flex_wrap
+    html = '<div style="flex-wrap:wrap;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/flex-wrap:wrap/, sane.inner_html
+  end
+
+  def test_css_justify_content
+    html = '<div style="justify-content:flex-start;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/justify-content:flex-start/, sane.inner_html
+  end
+
+  def test_css_order
+    html = '<div style="order:5;"></div>'
+    sane = Nokogiri::HTML(Loofah.scrub_fragment(html, :escape).to_xml)
+    assert_match %r/order:5/, sane.inner_html
+ end
+
   def test_issue_90_slow_regex
     skip("timing tests are hard to make pass and have little regression-testing value")