feat(options): add CSP support with trustedTypePolicy (#2220)

* CSP based on ideas from #1123

* Use types from html-dom-parser

* Lint fixes

* Update dom package

* Restore gitignore

Author: remdex

__tests__/options/trusted-type-policy.test.ts

@@ -0,0 +1,25 @@
+import htmlToDOM from 'html-dom-parser';
+
+import parse from '../../src';
+
+vi.mock('html-dom-parser', () => ({
+  default: vi.fn(() => []),
+}));
+
+describe('trustedTypePolicy option', () => {
+  it('passes trustedTypePolicy to html-dom-parser', () => {
+    const trustedTypePolicy = {
+      createHTML: vi.fn((input: string) => input),
+    };
+
+    parse('<div>test</div>', { trustedTypePolicy });
+
+    expect(htmlToDOM).toHaveBeenCalledWith(
+      '<div>test</div>',
+      expect.objectContaining({
+        lowerCaseAttributeNames: false,
+        trustedTypePolicy,
+      }),
+    );
+  });
+});

examples/webpack/src/index.js

@@ -3,4 +3,10 @@ import parse from 'html-react-parser';
 
 const root = createRoot(document.getElementById('root'));
 
-root.render(parse('<h1>HTMLReactParser loaded with Webpack</h1>'));
+let trustedHtml = (window.trustedTypes && window.trustedTypes.createPolicy)
+                ? window.trustedTypes.createPolicy('csp-react-html', {createHTML: function(s) { return s; }})
+                : null;
+
+root.render(parse('<h1>HTMLReactParser loaded with Webpack</h1>',{
+   trustedTypePolicy : trustedHtml
+}));

package-lock.json

@@ -61,7 +61,7 @@
   ],
   "dependencies": {
     "domhandler": "6.0.1",
-    "html-dom-parser": "7.0.1",
+    "html-dom-parser": "7.1.0",
     "react-property": "2.0.2",
     "style-to-js": "1.1.21"
   },

package.json

@@ -31,8 +31,10 @@ export default function HTMLReactParser(
     return [];
   }
 
-  return domToReact(
-    htmlToDOM(html, options?.htmlparser2 ?? domParserOptions),
-    options,
-  );
+  const htmlToDOMOptions = {
+    ...(options?.htmlparser2 ?? domParserOptions),
+    trustedTypePolicy: options?.trustedTypePolicy,
+  };
+
+  return domToReact(htmlToDOM(html, htmlToDOMOptions), options);
 }

src/index.ts

@@ -1,10 +1,11 @@
 import type { DomHandlerOptions } from 'domhandler';
-import type { DOMNode } from 'html-dom-parser';
+import type { DOMNode, TrustedTypePolicy } from 'html-dom-parser';
 import type { ParserOptions } from 'htmlparser2';
 import type { JSX, ReactNode } from 'react';
 
 export interface HTMLReactParserOptions {
   htmlparser2?: ParserOptions & DomHandlerOptions;
+  trustedTypePolicy?: TrustedTypePolicy;
 
   library?: {
     /* eslint-disable @typescript-eslint/no-explicit-any */