html-react-parser 6.0.0 → 6.1.0

package/README.md

@@ -43,6 +43,7 @@ parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
   - [library](#library)
   - [htmlparser2](#htmlparser2)
   - [trim](#trim)
+  - [trustedTypePolicy](#trustedtypepolicy)
 - [Migration](#migration)
   - [v5](#v5)
   - [v4](#v4)
@@ -208,7 +209,7 @@ parse('<br>', {
 
 > [!NOTE]
 >
-> The index will restart at 0 when traversing the node's children so don't rely on index being a unique key. See [#1259](https://github.com/remarkablemark/html-react-parser/issues/1259#issuecomment-1889574133).
+> The index will restart at 0 when traversing the node's children so don't rely on index being a unique key (see [#1259](https://github.com/remarkablemark/html-react-parser/issues/1259#issuecomment-1889574133)).
 
 #### replace with TypeScript
 
@@ -244,7 +245,7 @@ If you're having issues, take a look at our [Create React App example](./example
 
 #### replace element and children
 
-Replace the element and its children (see [demo](https://replit.com/@remarkablemark/html-react-parser-replace-example)):
+Replace the element and its children:
 
 ```tsx
 import parse, { domToReact } from 'html-react-parser';
@@ -335,7 +336,7 @@ parse(html, options);
 
 #### replace and remove element
 
-[Exclude](https://replit.com/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
+Exclude an element from rendering by replacing it with `<React.Fragment>`:
 
 ```tsx
 parse('<p><br id="remove"></p>', {
@@ -443,8 +444,29 @@ However, intentional whitespace may be stripped out:
 parse('<p> </p>', { trim: true }); // React.createElement('p')
 ```
 
+### trustedTypePolicy
+
+When running in a browser, you can pass a [Trusted Types](https://developer.mozilla.org/docs/Web/API/Trusted_Types_API) policy so the parser calls `trustedTypePolicy.createHTML` before assigning content to `innerHTML`:
+
+```ts
+parse('<div>Hello</div>', {
+  trustedTypePolicy: window.trustedTypes?.createPolicy('my-policy', {
+    createHTML(input) {
+      // apply sanitization logic here
+      return DOMPurify.sanitize(input);
+    },
+  }),
+});
+```
+
 ## Migration
 
+### v6
+
+Changed build target from `es5` to `es2016`.
+
+[html-dom-parser](https://github.com/remarkablemark/html-dom-parser) has been upgraded to [v7](https://github.com/remarkablemark/html-dom-parser/releases/tag/v7.0.0) and [domhandler](https://github.com/fb55/domhandler) has been upgraded to [v6](https://github.com/fb55/domhandler/releases/tag/v6.0.1).
+
 ### v5
 
 Migrated to TypeScript. CommonJS imports require the `.default` key:
@@ -505,27 +527,27 @@ Since [v1.1.1](https://github.com/remarkablemark/html-react-parser/releases/tag/
 
 ### Is this XSS safe?
 
-No, this library is _**not**_ [XSS (cross-site scripting)](https://wikipedia.org/wiki/Cross-site_scripting) safe. See [#94](https://github.com/remarkablemark/html-react-parser/issues/94).
+No, this library is **not** [XSS (cross-site scripting)](https://wikipedia.org/wiki/Cross-site_scripting) safe (see [#94](https://github.com/remarkablemark/html-react-parser/issues/94)). However, you can mitigate this risk by enforcing a Content Security Policy (CSP) with [Trusted Types](#trustedtypepolicy).
 
 ### Does invalid HTML get sanitized?
 
-No, this library does _**not**_ sanitize HTML. See [#124](https://github.com/remarkablemark/html-react-parser/issues/124), [#125](https://github.com/remarkablemark/html-react-parser/issues/125), and [#141](https://github.com/remarkablemark/html-react-parser/issues/141).
+No, this library does **not** sanitize HTML (see [#124](https://github.com/remarkablemark/html-react-parser/issues/124), [#125](https://github.com/remarkablemark/html-react-parser/issues/125), and [#141](https://github.com/remarkablemark/html-react-parser/issues/141)).
 
 ### Are `<script>` tags parsed?
 
-Although `<script>` tags and their contents are rendered on the server-side, they're not evaluated on the client-side. See [#98](https://github.com/remarkablemark/html-react-parser/issues/98).
+Although `<script>` tags and their contents are rendered on the server-side, they're not evaluated on the client-side (see [#98](https://github.com/remarkablemark/html-react-parser/issues/98)).
 
 ### Attributes aren't getting called
 
-The reason why your HTML attributes aren't getting called is because [inline event handlers](https://developer.mozilla.org/docs/Web/Guide/Events/Event_handlers) (e.g., `onclick`) are parsed as a _string_ rather than a _function_. See [#73](https://github.com/remarkablemark/html-react-parser/issues/73).
+The reason why your HTML attributes aren't getting called is because [inline event handlers](https://developer.mozilla.org/docs/Web/Guide/Events/Event_handlers) (e.g., `onclick`) are parsed as a _string_ rather than a _function_ (see [#73](https://github.com/remarkablemark/html-react-parser/issues/73)).
 
 ### Parser throws an error
 
-If the parser throws an error, check if your arguments are valid. See ["Does invalid HTML get sanitized?"](#does-invalid-html-get-sanitized).
+If the parser throws an error, check if your arguments are valid (see ["Does invalid HTML get sanitized?"](#does-invalid-html-get-sanitized)).
 
 ### Is SSR supported?
 
-Yes, server-side rendering on Node.js is supported by this library. See [demo](https://replit.com/@remarkablemark/html-react-parser-SSR).
+Yes, server-side rendering on Node.js is supported by this library:
 
 ### Elements aren't nested correctly
 
@@ -558,15 +580,15 @@ parse('<CustomElement>', options); // React.createElement('CustomElement')
 > Warning: <CustomElement> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
 > ```
 
-See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://replit.com/@remarkablemark/html-react-parser-62).
+See [#62](https://github.com/remarkablemark/html-react-parser/issues/62).
 
 ### TS Error: Property 'attribs' does not exist on type 'DOMNode'
 
-The TypeScript error occurs because `DOMNode` needs to be an instance of domhandler's `Element`. See [migration](#migration) or [#199](https://github.com/remarkablemark/html-react-parser/issues/199).
+The TypeScript error occurs because `DOMNode` needs to be an instance of domhandler's `Element` (see [migration](#migration) or [#199](https://github.com/remarkablemark/html-react-parser/issues/199)).
 
 ### Can I enable `trim` for certain elements?
 
-Yes, you can enable or disable [`trim`](#trim) for certain elements using the [`replace`](#replace) option. See [#205](https://github.com/remarkablemark/html-react-parser/issues/205).
+Yes, you can enable or disable [`trim`](#trim) for certain elements using the [`replace`](#replace) option (see [#205](https://github.com/remarkablemark/html-react-parser/issues/205)).
 
 ### Webpack build warnings
 
@@ -601,7 +623,7 @@ node_modules/htmlparser2/lib/index.d.ts:2:23 - error TS1005: ',' expected.
                         ~~~~~~~~~~~~~
 ```
 
-Then upgrade to the latest version of [typescript](https://www.npmjs.com/package/typescript). See [#748](https://github.com/remarkablemark/html-react-parser/issues/748).
+Then upgrade to the latest version of [typescript](https://www.npmjs.com/package/typescript) (see [#748](https://github.com/remarkablemark/html-react-parser/issues/748)).
 
 ## Performance