Render the SVG block in a shadow DOM by dkotter · Pull Request #328 · 10up/safe-svg

dkotter · 2026-09-01T19:04:54Z

Description of the Change

When rendering an SVG in our SVG block, we don't strip out any styles. This can result in someone adding styles that impact other areas of the page and by rendering the SVG, they can impact how the rest of the page looks.

To address this, this PR introduces new handling within the SVG block for any SVG that comes with it's own styles, wrapping those SVGs in a shadow DOM which keeps the styles isolated. This only applies to SVGs that come with styles (though can be turned on/off using the new safe_svg_inline_use_shadow_dom filter) so for majority of use cases, this won't change anything.

Note though for SVGs that do ship with their own styles, theme CSS will no longer be able to target them because of this shadow DOM. That styling will need to be done from within the SVG itself or you can opt out using the safe_svg_inline_use_shadow_dom filter.

In addition, replace the use of ReactSVG with our own custom InlineSvg component that will offer the same protections within the block editor.

We've also introduced the new removeRemoteReferences property of the sanitizer (coming in v1.0.0) and set that to false by default. This can be turned on with the new safe_svg_remove_remote_references filter, which will then strip out any remote references, making the SVG markup even more secure.

How to test the Change

NOTE: The code here is dependent on the update in #327 so that will either need merged first before testing this or you'll need to manually pull that change in locally when testing.

Basic testing across the plugin is desired here to ensure these changes don't break any existing functionality. Main thing to test is the SVG block.

Beyond that, the automated tests this PR ships with contains some SVG files you can use for testing to ensure the styles they load don't leak into the main document.

Changelog Entry

Added - New safe_svg_remove_remote_references filter to strip remote url(), @import and image-set() references, along with remote href targets, from uploaded SVGs. Off by default, because legitimate SVGs reference remote fonts and images but use this filter to turn it on

Added - New safe_svg_inline_use_shadow_dom filter to control which inline SVGs are isolated in a shadow root, and new safe_svg_inline_shadow_styles filter to adjust the CSS injected alongside them

Changed - Theme CSS can no longer target an inline SVG that carries its own <style> element, because stylesheets cannot reach into a shadow root. Style those SVGs from within the SVG itself, or opt out with the safe_svg_inline_use_shadow_dom filter. Inherited properties, including color/currentColor and custom properties, still apply as before, and SVGs without a <style> element are unaffected

Security - The Inline SVG block now renders SVGs that carry their own <style> element inside a shadow root, so their CSS is scoped to the block instead of applying to the whole page

Developer - Replaced the react-svg dependency with a small internal component, so the block editor preview isolates SVG CSS the same way the front end does

Credits

Props @darylldoyle, @dkotter

Checklist:

I agree to follow this project's Code of Conduct.
I have updated the documentation accordingly.
I have added Critical Flows, Test Cases, and/or End-to-End Tests to cover my change.
All new and existing tests pass.

…that to false. Add a filter around this so sites can opt-in to this security enhancement as desired

…ring those styles don't leak. Add a filter to turn this off

…t, as needed

…the editor. This adds the same isolation guard in the editor that we have on the frontend

…ky with the current utils package

dkotter · 2026-09-01T19:54:40Z

I have the new tests all passing here, we do have some existing test failures coming out of WP 7.1. I think these will be addressed once we can update to the latest Cypress Utils package (which I think is still stuck getting a proper release out). I did rewrite some of the new tests here to work around that, could do the same for the other failures but have left those alone for now

peterwilsoncc

This is testing well and looks good.

I've added a few notes inline but there's nothing major that I have picked up.

peterwilsoncc · 2026-09-02T04:25:20Z

+
+Mostly, yes. The Inline SVG block renders an SVG that carries its own `<style>` element inside a shadow root, because CSS inside an inline SVG is otherwise applied to the whole page rather than just the SVG. Stylesheets cannot reach into a shadow root, so theme CSS such as `.entry-content svg { fill: red; }` will not apply to those SVGs.
+
+Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered exactly as before and can be styled normally.


"exactly as before" doesn't really make sense to a new user.

Suggested change

Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered exactly as before and can be styled normally.

Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered without the shadow root and can be styled by theme stylesheets.

Resolved in 2e9fc51

peterwilsoncc · 2026-09-02T04:27:05Z

+		'safe_svg_inline_use_shadow_dom',
+		svg_has_stylesheet( $contents ),
+		$contents,
+		$attributes['imageID']


Let plugin know whether the SVG has a stylesheet.

Suggested change

$attributes['imageID']

$attributes['imageID'],

svg_has_stylesheet( $contents )

Resolved in b74d721 and 555721f

peterwilsoncc · 2026-09-02T04:52:36Z

+	/**
+	 * Test that SVGs carrying a stylesheet are recognised.
+	 */
+	public function test_svg_has_stylesheet() {


Nit: might be nice to use a data provider here so the test completes for each item even if a previous one fails.

Resolved in 555721f

peterwilsoncc · 2026-09-02T04:52:53Z

+	/**
+	 * Test that SVGs without a stylesheet are left alone.
+	 */
+	public function test_svg_has_no_stylesheet() {


as above re data provider.

Resolved in 555721f

peterwilsoncc · 2026-09-02T04:54:49Z

+
+Mostly, yes. The Inline SVG block renders an SVG that carries its own `<style>` element inside a shadow root, because CSS inside an inline SVG is otherwise applied to the whole page rather than just the SVG. Stylesheets cannot reach into a shadow root, so theme CSS such as `.entry-content svg { fill: red; }` will not apply to those SVGs.
+
+Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered exactly as before and can be styled normally.


Suggested change

Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered exactly as before and can be styled normally.

Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered without the shadow root and can be styled by theme stylesheets.

Resolved in 2e9fc51

…et twice

peterwilsoncc

This looks good to me and is testing well.

Testing notes:

styled SVGs uploaded on the develop branch are rendered in shadow DOM on this branch
styles within SVGs can no longer effect the site styles (I was testing with body {background: grey;}
SVGs without style elements render without a shadow DOM on this branch
CSS vars and current color are applied to the SVG

dkotter added 8 commits September 1, 2026 12:32

Set the removeRemoteReferences property on the sanitizer and default …

9e67670

…that to false. Add a filter around this so sites can opt-in to this security enhancement as desired

Update documentation in readmes

f63a70f

Remove the react-svg package as we no longer use it

5abea40

Wrap the block output in a shadow dom if it has it's own styles, assu…

f9b53da

…ring those styles don't leak. Add a filter to turn this off

Register a front-end script that moves older markup into a shadow roo…

7592693

…t, as needed

Introduce a InlineSvg component and use that instead of react SVG in …

f957348

…the editor. This adds the same isolation guard in the editor that we have on the frontend

Add tests to cover changes

a69786e

Add a couple helpful comments

1e05b86

dkotter added this to the 2.5.0 milestone Sep 1, 2026

dkotter self-assigned this Sep 1, 2026

dkotter requested a review from jeffpaul as a code owner September 1, 2026 19:04

github-actions Bot added the needs:code-review This requires code review. label Sep 1, 2026

jeffpaul requested a review from peterwilsoncc September 1, 2026 19:05

jeffpaul added this to Open Source Practice Sep 1, 2026

jeffpaul moved this to Code Review in Open Source Practice Sep 1, 2026

dkotter added 2 commits September 1, 2026 13:32

Globally disable the welcome guide in tests to help with flakiness

a97111c

Rewrite tests to avoid having to use the block editor UI which is fla…

dd02235

…ky with the current utils package

dkotter mentioned this pull request Sep 1, 2026

Update SVG Sanitizer library from v0.22.0 to v1.0.0 #327

Merged

2 of 4 tasks

peterwilsoncc reviewed Sep 2, 2026

View reviewed changes

dkotter added 4 commits September 2, 2026 08:23

Merge branch 'develop' into update/shadow-dom

bcc00fb

Update readmes slightly

2e9fc51

Pass the stylesheet value into the filter

b74d721

Modify tests a bit to use data providers. Don't call svg_has_styleshe…

555721f

…et twice

dkotter mentioned this pull request Sep 2, 2026

Release version 2.5.0 #331

Closed

18 tasks done

dkotter requested a review from peterwilsoncc September 2, 2026 14:37

peterwilsoncc approved these changes Sep 2, 2026

View reviewed changes

github-project-automation Bot moved this from Code Review to QA Testing in Open Source Practice Sep 2, 2026

Merge branch 'develop' into update/shadow-dom

f370464

peterwilsoncc merged commit 8c4f029 into develop Sep 4, 2026
15 checks passed

peterwilsoncc deleted the update/shadow-dom branch September 4, 2026 00:29

github-project-automation Bot moved this from QA Testing to Done in Open Source Practice Sep 4, 2026

dkotter mentioned this pull request Sep 24, 2026

Simplify our logic that finds and attaches shadow roots #343

Open

1 of 4 tasks

Navigation Menu

Render the SVG block in a shadow DOM - #328

Render the SVG block in a shadow DOM#328
peterwilsoncc merged 15 commits into
developfrom
update/shadow-dom

dkotter commented Sep 1, 2026 •

edited

Loading

Uh oh!

dkotter commented Sep 1, 2026

Uh oh!

peterwilsoncc left a comment

Uh oh!

peterwilsoncc Sep 2, 2026

Uh oh!

dkotter Sep 2, 2026

Uh oh!

peterwilsoncc Sep 2, 2026

Uh oh!

dkotter Sep 2, 2026

Uh oh!

peterwilsoncc Sep 2, 2026

Uh oh!

dkotter Sep 2, 2026

Uh oh!

peterwilsoncc Sep 2, 2026

Uh oh!

dkotter Sep 2, 2026

Uh oh!

peterwilsoncc Sep 2, 2026

Uh oh!

dkotter Sep 2, 2026

Uh oh!

peterwilsoncc left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		Mostly, yes. The Inline SVG block renders an SVG that carries its own `<style>` element inside a shadow root, because CSS inside an inline SVG is otherwise applied to the whole page rather than just the SVG. Stylesheets cannot reach into a shadow root, so theme CSS such as `.entry-content svg { fill: red; }` will not apply to those SVGs.

		Inherited properties still cross the boundary, so setting `color` on an ancestor and using `currentColor` inside the SVG works, as do CSS custom properties. SVGs that do not contain a `<style>` element are rendered exactly as before and can be styled normally.

	$attributes['imageID']
	$attributes['imageID'],
	svg_has_stylesheet( $contents )

Conversation

dkotter commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the Change

How to test the Change

Changelog Entry

Credits

Checklist:

Uh oh!

dkotter commented Sep 1, 2026

Uh oh!

peterwilsoncc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

peterwilsoncc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dkotter commented Sep 1, 2026 •

edited

Loading