Trust HTML for rich text clipboard (#6755)

package.json

@@ -136,6 +136,7 @@
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
+    "@types/trusted-types": "^2.0.7",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "child-process-promise": "^2.2.1",

packages/lexical-clipboard/src/clipboard.ts

@@ -154,7 +154,10 @@ export function $insertDataTransferForRichText(
   if (htmlString) {
     try {
       const parser = new DOMParser();
-      const dom = parser.parseFromString(htmlString, 'text/html');
+      const dom = parser.parseFromString(
+        trustHTML(htmlString) as string,
+        'text/html',
+      );
       const nodes = $generateNodesFromDOM(editor, dom);
       return $insertGeneratedNodes(editor, nodes, selection);
     } catch {
@@ -192,6 +195,16 @@ export function $insertDataTransferForRichText(
   }
 }
 
+function trustHTML(html: string): string | TrustedHTML {
+  if (window.trustedTypes && window.trustedTypes.createPolicy) {
+    const policy = window.trustedTypes.createPolicy('lexical', {
+      createHTML: (input) => input,
+    });
+    return policy.createHTML(html);
+  }
+  return html;
+}
+
 /**
  * Inserts Lexical nodes into the editor using different strategies depending on
  * some simple selection-based heuristics. If you're looking for a generic way to