feat(embedabble-markdown-html): sanitize html for security

Altinn · Jul 10, 2024 · b21ea02 · b21ea02
1 parent 14f368a
commit b21ea02
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 8 deletions.
diff --git a/packages/embeddable-markdown-html/package.json b/packages/embeddable-markdown-html/package.json
@@ -12,6 +12,7 @@
     "mdast-util-to-hast": "^13.2.0",
     "rehype-parse": "^9.0.0",
     "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "unified": "^11.0.5"

diff --git a/packages/embeddable-markdown-html/src/html.tsx b/packages/embeddable-markdown-html/src/html.tsx
@@ -2,6 +2,7 @@ import { type ReactElement, useEffect, useState } from 'react';
 import * as prod from 'react/jsx-runtime';
 import rehypeParse, { type Options as RehypeParseOptions } from 'rehype-parse';
 import rehypeReact from 'rehype-react';
+import rehypeSanitize from 'rehype-sanitize';
 import { unified } from 'unified';
 
 // @ts-expect-error: the react types are missing.
@@ -17,6 +18,7 @@ export const Html: React.FC<{
   useEffect(() => {
     unified()
       .use(rehypeParse, {} as RehypeParseOptions)
+      .use(rehypeSanitize)
       .use(rehypeReact, production)
       .process(children)
       .then((vfile) => setReactContent(vfile.result as ReactElement))

diff --git a/packages/embeddable-markdown-html/tests/__snapshots__/html.spec.tsx.snap b/packages/embeddable-markdown-html/tests/__snapshots__/html.spec.tsx.snap
@@ -1,12 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Html > should render content 1`] = `
-<html>
-  <head />
-  <body>
-    <h1>
-       header 
-    </h1>
-  </body>
-</html>
+<h1>
+   header 
+</h1>
 `;
diff --git a/packages/embeddable-markdown-html/tests/html.spec.tsx b/packages/embeddable-markdown-html/tests/html.spec.tsx
@@ -13,4 +13,17 @@ describe('Html', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('should not render script tags', async () => {
+    const { container, getByText } = render(
+      <Html>{'<div><script>A dangerous script!</script><h1> header </h1></div>'}</Html>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('header')).toBeInTheDocument();
+
+      const scriptTags = container.querySelector('script');
+      expect(scriptTags).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml