diff --git a/.changeset/shy-geckos-leave.md b/.changeset/shy-geckos-leave.md new file mode 100644 index 0000000000..2824962bef --- /dev/null +++ b/.changeset/shy-geckos-leave.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Excludes svg styling from sanitization diff --git a/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx b/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx index a26757764c..ea609e04f8 100644 --- a/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx +++ b/plugins/techdocs/src/reader/transformers/html/transformer.sanitizer.test.tsx @@ -99,4 +99,25 @@ describe('Transformers > Html > Sanitizer Custom Elements', () => { expect(elements[1].hasAttribute('attribute3')).toEqual(false); expect(elements[1].hasAttribute('attribute4')).toEqual(false); }); + + it('should retain the dominant baseline attribute for svgs', async () => { + const { result } = renderHook(() => useSanitizerTransformer(), { wrapper }); + + const dirtyDom = document.createElement('html'); + dirtyDom.innerHTML = ` + + + + + Hej + + + `; + const clearDom = await result.current(dirtyDom); + + const elements = Array.from(clearDom.querySelectorAll('text')); + + expect(elements).toHaveLength(1); + expect(elements[0].hasAttribute('dominant-baseline')).toBe(true); + }); }); diff --git a/plugins/techdocs/src/reader/transformers/html/transformer.ts b/plugins/techdocs/src/reader/transformers/html/transformer.ts index 2004f941e3..42f34f0410 100644 --- a/plugins/techdocs/src/reader/transformers/html/transformer.ts +++ b/plugins/techdocs/src/reader/transformers/html/transformer.ts @@ -83,7 +83,7 @@ export const useSanitizerTransformer = (): Transformer => { return DOMPurify.sanitize(dom.outerHTML, { ADD_TAGS: tags, FORBID_TAGS: ['style'], - ADD_ATTR: ['http-equiv', 'content'], + ADD_ATTR: ['http-equiv', 'content', 'dominant-baseline'], WHOLE_DOCUMENT: true, RETURN_DOM: true, CUSTOM_ELEMENT_HANDLING: {