From adc244e1bd13e4dc8806b49796a2f02fbf873586 Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Wed, 15 Feb 2023 18:38:42 +0100 Subject: [PATCH 1/3] Use outerHTML during sanitize to preserve html tag attribs Signed-off-by: Raghunandan --- .../src/reader/transformers/html/transformer.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/plugins/techdocs/src/reader/transformers/html/transformer.ts b/plugins/techdocs/src/reader/transformers/html/transformer.ts index a197a2d4b7..61498a37b0 100644 --- a/plugins/techdocs/src/reader/transformers/html/transformer.ts +++ b/plugins/techdocs/src/reader/transformers/html/transformer.ts @@ -15,12 +15,12 @@ */ import DOMPurify from 'dompurify'; -import { useMemo, useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; -import { useApi, configApiRef } from '@backstage/core-plugin-api'; +import { configApiRef, useApi } from '@backstage/core-plugin-api'; import { Transformer } from '../transformer'; -import { removeUnsafeLinks, removeUnsafeIframes } from './hooks'; +import { removeUnsafeIframes, removeUnsafeLinks } from './hooks'; /** * Returns html sanitizer configuration @@ -34,7 +34,7 @@ const useSanitizerConfig = () => { }; /** - * Returns a transformer that sanitizes the dom's internal html. + * Returns a transformer that sanitizes the dom */ export const useSanitizerTransformer = (): Transformer => { const config = useSanitizerConfig(); @@ -51,7 +51,8 @@ export const useSanitizerTransformer = (): Transformer => { DOMPurify.addHook('beforeSanitizeElements', removeUnsafeIframes(hosts)); } - return DOMPurify.sanitize(dom.innerHTML, { + // using outerHTML as we want to preserve the html tag attributes (lang) + return DOMPurify.sanitize(dom.outerHTML, { ADD_TAGS: tags, FORBID_TAGS: ['style'], WHOLE_DOCUMENT: true, From f320c299c67b3f1eea9752f25692483e2168504a Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Wed, 15 Feb 2023 18:47:18 +0100 Subject: [PATCH 2/3] Add changeset Signed-off-by: Raghunandan --- .changeset/ninety-turtles-wait.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ninety-turtles-wait.md diff --git a/.changeset/ninety-turtles-wait.md b/.changeset/ninety-turtles-wait.md new file mode 100644 index 0000000000..18f9dc70e9 --- /dev/null +++ b/.changeset/ninety-turtles-wait.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +The html tag attributes in the documentation content inserted to shadow DOM is preserved to improve accessibility From 7d0674b8539de4173418ae706b0e2765077d6af4 Mon Sep 17 00:00:00 2001 From: Raghunandan Date: Thu, 16 Feb 2023 18:37:32 +0100 Subject: [PATCH 3/3] trying to pass vale linter check Signed-off-by: Raghunandan --- .changeset/ninety-turtles-wait.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/ninety-turtles-wait.md b/.changeset/ninety-turtles-wait.md index 18f9dc70e9..683583528f 100644 --- a/.changeset/ninety-turtles-wait.md +++ b/.changeset/ninety-turtles-wait.md @@ -2,4 +2,4 @@ '@backstage/plugin-techdocs': patch --- -The html tag attributes in the documentation content inserted to shadow DOM is preserved to improve accessibility +The HTML tag attributes in the documentation content inserted to shadow DOM is preserved to improve accessibility