[5.x] Sanitize SVGs (#14077)

Author: jasonvarga

resources/js/components/SvgIcon.vue

@@ -5,6 +5,7 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 import { data_get } from  '../bootstrap/globals.js'
+import DOMPurify from 'dompurify';
 
 export default {
 
@@ -53,13 +54,13 @@ export default {
         evaluateIcon() {
             if (this.customIcon) {
                 return defineAsyncComponent(() => {
-                    return new Promise(resolve => resolve({ template: this.customIcon }));
+                    return new Promise(resolve => resolve({ template: DOMPurify.sanitize(this.customIcon) }));
                 });
             }
 
             if (this.name.startsWith('<svg')) {
                 return defineAsyncComponent(() => {
-                    return new Promise(resolve => resolve({ template: this.name }));
+                    return new Promise(resolve => resolve({ template: DOMPurify.sanitize(this.name) }));
                 });
             }
 

resources/js/components/nav/Branch.vue

@@ -5,8 +5,10 @@
         <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
             <div class="flex items-center flex-1" :class="{ 'opacity-50': isHidden || isInHiddenSection }">
                 <template v-if="! isSection && ! isChild">
-                    <i v-if="isAlreadySvg" class="w-4 h-4 rtl:ml-2 ltr:mr-2" v-html="icon"></i>
-                    <svg-icon v-else class="w-4 h-4 rtl:ml-2 ltr:mr-2" :name="'light/'+icon" />
+                    <svg-icon
+                        class="w-4 h-4 rtl:ml-2 ltr:mr-2"
+                        :name="isAlreadySvg ? icon : 'light/'+icon"
+                    />
                 </template>
 
                 <a

src/CP/Navigation/NavItem.php

@@ -3,6 +3,7 @@
 namespace Statamic\CP\Navigation;
 
 use Illuminate\Support\Collection;
+use Rhukster\DomSanitizer\DOMSanitizer;
 use Statamic\Facades\CP\Nav;
 use Statamic\Facades\URL;
 use Statamic\Statamic;
@@ -200,7 +201,22 @@ public function svg()
     {
         $value = $this->icon() ?? 'entries';
 
-        return Str::startsWith($value, '<svg') ? $value : Statamic::svg('icons/light/'.$value);
+        $svg = Str::startsWith($value, '<svg') ? $value : Statamic::svg('icons/light/'.$value);
+
+        return $this->sanitizeSvg($svg);
+    }
+
+    private function sanitizeSvg(string $svg): string
+    {
+        try {
+            $sanitizer = new DOMSanitizer(DOMSanitizer::SVG);
+
+            return $sanitizer->sanitize($svg, [
+                'remove-xml-tags' => ! Str::startsWith($svg, '<?xml'),
+            ]);
+        } catch (\Throwable $e) {
+            return '';
+        }
     }
 
     /**

tests/CP/Navigation/NavTest.php

@@ -130,14 +130,15 @@ public function it_can_create_a_nav_item_with_a_custom_inline_svg_icon()
         $this->actingAs(tap(User::make()->makeSuper())->save());
 
         Nav::utilities('Test')
-            ->icon('<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>');
+            ->icon('<svg onerror="foo"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>');
 
         $item = $this->build()->get('Utilities')->last();
 
-        $expected = '<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
+        $expectedIcon = '<svg onerror="foo"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
+        $this->assertEquals($expectedIcon, $item->icon());
 
-        $this->assertEquals($expected, $item->icon());
-        $this->assertEquals($expected, $item->svg());
+        $expectedSvg = '<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>';
+        $this->assertEquals($expectedSvg, $item->svg());
     }
 
     #[Test]