Merge pull request #5984 from dodona-edu/fix/svg-images

Allow using `use` tag in sanitized html
dodona-edu · Dec 4, 2024 · f97d88e · f97d88e
2 parents 3cad0b6 + 00cea2c
commit f97d88e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -135,7 +135,7 @@ def markdown_unsafe(source)
   def sanitize(html)
     @tags ||= Rails::Html::SafeListSanitizer.allowed_tags.to_a +
               %w[table thead tbody tr td th colgroup col style summary details img] +
-              %w[svg g style circle line rect path polygon polyline text defs]
+              %w[svg g style circle line rect path polygon polyline text defs use]
     @attributes ||= Rails::Html::SafeListSanitizer.allowed_attributes.to_a +
                     %w[style target data-bs-toggle data-parent data-tab data-line data-element id] +
                     %w[viewBox width height version style class transform id x y rx ry x1 y1 x2 y2 d points fill stroke stroke-width stroke-dasharray cx cy r font-size font-family font-weight font-variant textLength writing-mode glyph-orientation-vertical text-orientation color]

diff --git a/test/helpers/application_helper_test.rb b/test/helpers/application_helper_test.rb
@@ -74,14 +74,17 @@ class ApplicationHelperTest < ActiveSupport::TestCase
       <svg>
         <script>alert(1)</script>
         <use xlink:href="javascript:alert(1)"/>
+        <use xlink:href="test.svg"/>
+        <use href="javascript:alert(1)"/>
+        <use href="test.svg"/>
       </svg>
       <p>Hello
     HTML
     clean_html = sanitize dirty_html
 
     assert_no_match(/<script>/, clean_html)
     assert_no_match(/onerror/, clean_html)
-    assert_no_match(/<use/, clean_html)
+    assert_no_match(/xlink:href/, clean_html)
     assert_match(/<p>Hello/, clean_html)
   end
 
@@ -130,6 +133,8 @@ class ApplicationHelperTest < ActiveSupport::TestCase
             <polygon class="border" points="0,1 -0.5773,0 0,-1 0.5773,0 0,1" fill="none"></polygon>
           </g>
         </defs>
+        <use xlink:href="#diamond" x="50" y="50" fill="red"></use>
+        <use href="#diamond" x="50" y="50" fill="red"></use>
         <g id="group1" transform="translate(50,50)">
           <circle cx="0" cy="0" r="40" fill="none"></circle>
           <line class="test" x1="0" y1="0" x2="0" y2="-40"></line>