diff --git a/__tests__/options/trusted-type-policy.test.ts b/__tests__/options/trusted-type-policy.test.ts new file mode 100644 index 00000000..ec9be128 --- /dev/null +++ b/__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('
test
', { trustedTypePolicy }); + + expect(htmlToDOM).toHaveBeenCalledWith( + '
test
', + expect.objectContaining({ + lowerCaseAttributeNames: false, + trustedTypePolicy, + }), + ); + }); +}); diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js index ace2d1dc..b00a491d 100644 --- a/examples/webpack/src/index.js +++ b/examples/webpack/src/index.js @@ -3,4 +3,10 @@ import parse from 'html-react-parser'; const root = createRoot(document.getElementById('root')); -root.render(parse('

HTMLReactParser loaded with Webpack

')); +let trustedHtml = (window.trustedTypes && window.trustedTypes.createPolicy) + ? window.trustedTypes.createPolicy('csp-react-html', {createHTML: function(s) { return s; }}) + : null; + +root.render(parse('

HTMLReactParser loaded with Webpack

',{ + trustedTypePolicy : trustedHtml +})); diff --git a/package-lock.json b/package-lock.json index 207640ae..72eaafa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "license": "MIT", "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" }, @@ -4677,16 +4677,15 @@ } }, "node_modules/html-dom-parser": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-7.0.1.tgz", - "integrity": "sha512-loRBDTCY/05/jAC63J1X9ID+xjRucmpLkIcQO0IRbOubBo5ucnpUpyXXob9UMXOskMZlu7KPsDP/2KOMelzJNA==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-7.1.0.tgz", + "integrity": "sha512-83BgaFSW/Sj6QTotGenvPvKfGxFzpFfrJNYes77mzqnq+YjVm12d4qeG0+108w4ejnam/+nCnnLuyyJlXkuPtA==", "funding": [ { "type": "github", "url": "https://github.com/sponsors/remarkablemark" } ], - "license": "MIT", "dependencies": { "domhandler": "6.0.1", "htmlparser2": "12.0.0" diff --git a/package.json b/package.json index a2017515..20f5626a 100644 --- a/package.json +++ b/package.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" }, diff --git a/src/index.ts b/src/index.ts index a72bab8f..6ca7f508 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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); } diff --git a/src/types.ts b/src/types.ts index f1f91e9e..7055b2c3 100644 --- a/src/types.ts +++ b/src/types.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 */