fix: render SVG code snippets in the Accessibility Analysis panel as images

The metabox's details panel previously injected an issue's raw SVG
markup straight into the panel's HTML. Convert it to a data: URI and
render it inside an <img> instead, the same technique already used for
inline SVGs in the issue modal's image finder (IssueImage.js) - this
keeps the metabox and the sidebar/modal consistent in how they display
this content, and matches how untrusted markup should be handled here.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: pattonwebz

admin/class-ajax.php

@@ -526,7 +526,15 @@ function ( $a, $b ) {
 								)
 							) . '" />';
 						} elseif ( $object_svg ) {
-							$html .= $object_svg;
+							// Rendered as an <img> via a data URI, not injected as inline markup -
+							// see edac_svg_markup_to_data_uri()'s docblock for why.
+							$html .= '<img src="' . esc_url( edac_svg_markup_to_data_uri( $object_svg ), [ 'data', 'http', 'https' ] ) . '" alt="' . esc_attr(
+								sprintf(
+									/* translators: %d: issue ID number */
+									__( 'image for issue %d', 'accessibility-checker' ),
+									$id
+								)
+							) . '" />';
 						}
 
 						$html .= '</div>';

includes/helper-functions.php

@@ -788,6 +788,26 @@ function edac_parse_html_for_media( $html ) {
 	];
 }
 
+/**
+ * Convert raw SVG markup into a data: URI safe for use as an <img> src.
+ *
+ * The source markup comes from scanned page code stored in the issues
+ * table, which can contain arbitrary attributes/children (e.g. <script>,
+ * on* handlers, <foreignObject>). Encoding it into a data URI and only
+ * ever placing that URI in an <img> src means the browser treats it as an
+ * image resource, not as markup to parse for scripting - the same
+ * technique already used for untrusted SVGs in the issue modal's image
+ * finder (see src/issueModal/components/IssueImage.js).
+ *
+ * @since x.x.x
+ *
+ * @param string $svg_markup Raw SVG markup.
+ * @return string Data URI string (unescaped - callers must esc_url()/esc_attr() it before output).
+ */
+function edac_svg_markup_to_data_uri( $svg_markup ) {
+	return 'data:image/svg+xml,' . rawurlencode( $svg_markup );
+}
+
 /**
  * Remove corrected posts
  *

tests/phpunit/helper-functions/SvgMarkupToDataUriTest.php

@@ -0,0 +1,61 @@
+<?php
+/**
+ * Class SvgMarkupToDataUriTest
+ *
+ * @package Accessibility_Checker
+ */
+
+/**
+ * Test cases for edac_svg_markup_to_data_uri() function.
+ */
+class SvgMarkupToDataUriTest extends WP_UnitTestCase {
+
+	/**
+	 * Tests that the function returns a data URI with the markup percent-encoded.
+	 */
+	public function test_encodes_markup_as_data_uri() {
+		$svg = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" /></svg>';
+
+		$this->assertSame(
+			'data:image/svg+xml,' . rawurlencode( $svg ),
+			edac_svg_markup_to_data_uri( $svg )
+		);
+	}
+
+	/**
+	 * Tests that no raw markup characters survive encoding - the whole point
+	 * is that the string is inert HTML once placed in an <img src> attribute.
+	 *
+	 * @dataProvider malicious_svg_data
+	 *
+	 * @param string $svg The malicious SVG markup to encode.
+	 */
+	public function test_strips_no_bytes_but_leaves_no_raw_markup_characters( $svg ) {
+		$data_uri = edac_svg_markup_to_data_uri( $svg );
+
+		$this->assertStringStartsWith( 'data:image/svg+xml,', $data_uri );
+		$this->assertStringNotContainsString( '<', $data_uri );
+		$this->assertStringNotContainsString( '>', $data_uri );
+		$this->assertStringNotContainsString( '"', $data_uri );
+		$this->assertStringNotContainsString( "'", $data_uri );
+
+		// The encoded payload still round-trips back to the original markup.
+		$this->assertSame(
+			$svg,
+			rawurldecode( substr( $data_uri, strlen( 'data:image/svg+xml,' ) ) )
+		);
+	}
+
+	/**
+	 * Data provider of SVG markup containing common XSS vectors.
+	 */
+	public function malicious_svg_data() {
+		return [
+			'onload handler'    => [ '<svg onload="alert(document.cookie)"></svg>' ],
+			'script child'      => [ '<svg><script>alert(1)</script></svg>' ],
+			'foreignObject'     => [ '<svg><foreignObject><img src=x onerror="alert(1)"></foreignObject></svg>' ],
+			'javascript: xlink' => [ '<svg><a xlink:href="javascript:alert(1)"><text>click</text></a></svg>' ],
+			'animate onbegin'   => [ '<svg><animate onbegin="alert(1)" attributeName="x" /></svg>' ],
+		];
+	}
+}