Allow select custom CSS properties (#37237).

Patch by Jens Krämer.



git-svn-id: https://svn.redmine.org/redmine/trunk@21850 e93f8b46-1217-0410-a6f0-8f06a7374b81

lib/redmine/wiki_formatting/common_mark/sanitization_filter.rb

@@ -27,6 +27,18 @@ module Redmine
           "a" => %w(href).freeze,
         }.freeze
 
+        ALLOWED_CSS_PROPERTIES = %w[
+          color background-color
+          width
+          height
+          padding padding-left padding-right padding-top padding-bottom
+          margin margin-left margin-right margin-top margin-bottom
+          border border-left border-right border-top border-bottom border-radius border-style border-collapse border-spacing
+          font font-style font-variant font-weight font-stretch font-size line-height font-family
+          text-align
+          float
+        ].freeze
+
         def allowlist
           @allowlist ||= customize_allowlist(super.deep_dup)
         end
@@ -40,6 +52,9 @@ module Redmine
           allowlist[:attributes][:all].delete("name")
           allowlist[:attributes]["a"].push("name")
 
+          allowlist[:attributes][:all].push("style")
+          allowlist[:css] = { properties: ALLOWED_CSS_PROPERTIES }
+
           # allow class on code tags (this holds the language info from fenced
           # code bocks and has the format language-foo)
           allowlist[:attributes]["code"] = %w(class)

test/unit/lib/redmine/wiki_formatting/common_mark/sanitization_filter_test.rb

@@ -93,6 +93,10 @@ if Object.const_defined?(:CommonMarker)
     # samples taken from the Sanitize test suite
     # rubocop:disable Layout/LineLength
     STRINGS = [
+      [
+        '<span style="color: #333; background: url(\'https://example.com/evil.svg\')">hello</span>"',
+        '<span style="color: #333; ">hello</span>"'
+      ],
       [
         '<b>Lo<!-- comment -->rem</b> <a href="pants" title="foo" style="text-decoration: underline;">ipsum</a> <a href="http://foo.com/"><strong>dolor</strong></a> sit<br/>amet <style>.foo { color: #fff; }</style> <script>alert("hello world");</script>',
         '<b>Lorem</b> <a href="pants" title="foo">ipsum</a> <a href="http://foo.com/"><strong>dolor</strong></a> sit<br>amet .foo { color: #fff; } '