Prevent drop malicious content on the editor (#3319)

Introduced protection to prevent potentially harmful HTML content from being added to the editor through drag-and-drop. The DragAndDrop Plugin was implemented to manage external content drops, block the default drop action, sanitize any dropped content, and insert only the sanitized content into the editor.

Author: juliaroldi

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -62,6 +62,7 @@ import {
     AnnouncePlugin,
     AutoFormatPlugin,
     CustomReplacePlugin,
+    DragAndDropPlugin,
     EditPlugin,
     HiddenPropertyPlugin,
     HyperlinkPlugin,
@@ -577,6 +578,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                 }),
             pluginList.touch && new TouchPlugin(),
             pluginList.announce && new AnnouncePlugin(),
+            pluginList.dragAndDrop && new DragAndDropPlugin(),
         ].filter(x => !!x);
     }
 }

demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts

@@ -24,6 +24,7 @@ const initialState: OptionState = {
         hiddenProperty: true,
         touch: true,
         announce: true,
+        dragAndDrop: true,
     },
     defaultFormat: {
         fontFamily: 'Calibri',

demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts

@@ -26,6 +26,7 @@ export interface BuildInPluginList {
     hiddenProperty: boolean;
     touch: boolean;
     announce: boolean;
+    dragAndDrop: boolean;
 }
 
 export interface OptionState {

demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx

@@ -360,6 +360,7 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
                     {this.renderPluginItem('hiddenProperty', 'Hidden Property')}
                     {this.renderPluginItem('touch', 'Touch')}
                     {this.renderPluginItem('announce', 'Announce')}
+                    {this.renderPluginItem('dragAndDrop', 'DragAndDrop')}
                 </tbody>
             </table>
         );

demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts

@@ -5,6 +5,7 @@ import { OptionState } from '../OptionState';
 import { WatermarkCode } from './WatermarkCode';
 
 import {
+    DragAndDropPluginCode,
     EditPluginCode,
     PastePluginCode,
     TableEditPluginCode,
@@ -45,6 +46,7 @@ export class PluginsCode extends PluginsCodeBase {
             pluginList.watermark && new WatermarkCode(state.watermarkText),
             pluginList.markdown && new MarkdownCode(state.markdownOptions),
             pluginList.imageEditPlugin && new ImageEditPluginCode(),
+            pluginList.dragAndDrop && new DragAndDropPluginCode(),
         ]);
     }
 }

demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts

@@ -39,3 +39,9 @@ export class ImageEditPluginCode extends SimplePluginCode {
         super('ImageEditPlugin');
     }
 }
+
+export class DragAndDropPluginCode extends SimplePluginCode {
+    constructor() {
+        super('DragAndDropPlugin');
+    }
+}

packages/roosterjs-content-model-core/lib/corePlugin/domEvent/DOMEventPlugin.ts

@@ -85,7 +85,7 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
 
             // 4. Drag and Drop event
             dragstart: { beforeDispatch: this.onDragStart },
-            drop: { beforeDispatch: this.onDrop },
+            drop: { beforeDispatch: (event: DragEvent) => this.onDrop(event) },
 
             // 5. Pointer event
             pointerdown: { beforeDispatch: (event: PointerEvent) => this.onPointerDown(event) },
@@ -137,17 +137,23 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
         }
     };
 
-    private onDrop = () => {
-        const doc = this.editor?.getDocument();
-
-        doc?.defaultView?.requestAnimationFrame(() => {
-            if (this.editor) {
-                this.editor.takeSnapshot();
-                this.editor.triggerEvent('contentChanged', {
-                    source: ChangeSource.Drop,
+    private onDrop = (e: DragEvent) => {
+        if (this.editor) {
+            const beforeDropEvent = this.editor.triggerEvent('beforeDrop', {
+                rawEvent: e,
+            });
+            if (!beforeDropEvent?.rawEvent.defaultPrevented) {
+                const doc = this.editor.getDocument();
+                doc?.defaultView?.requestAnimationFrame(() => {
+                    if (this.editor) {
+                        this.editor.takeSnapshot();
+                        this.editor.triggerEvent('contentChanged', {
+                            source: ChangeSource.Drop,
+                        });
+                    }
                 });
             }
-        });
+        }
     };
 
     private onScroll = (e: Event) => {

packages/roosterjs-content-model-core/test/corePlugin/domEvent/DomEventPluginTest.ts

@@ -209,7 +209,6 @@ describe('DOMEventPlugin verify event handlers while disallow keyboard event pro
         expect(triggerEventSpy).toHaveBeenCalled();
     });
 
-
     it('verify input event for non-character value', () => {
         spyOn(eventUtils, 'isCharacterValue').and.returnValue(false);
         const stopPropagation = jasmine.createSpy();
@@ -282,7 +281,6 @@ describe('DOMEventPlugin verify event handlers while disallow keyboard event pro
         expect(stopPropagation).toHaveBeenCalled();
         expect(triggerEventSpy).toHaveBeenCalled();
     });
-
 });
 
 describe('DOMEventPlugin handle mouse down and mouse up event', () => {
@@ -553,18 +551,50 @@ describe('DOMEventPlugin handle other event', () => {
     it('Trigger onDrop event', () => {
         const takeSnapshotSpy = jasmine.createSpy('takeSnapshot');
         editor.takeSnapshot = takeSnapshotSpy;
+        const mockedEvent = {
+            dataTransfer: {
+                getData: () => '',
+            },
+            defaultPrevented: false,
+        } as any;
 
-        eventMap.drop.beforeDispatch();
+        triggerEvent.and.returnValue({ rawEvent: mockedEvent });
+
+        eventMap.drop.beforeDispatch(mockedEvent);
         expect(plugin.getState()).toEqual({
             isInIME: false,
             scrollContainer: scrollContainer,
             mouseDownX: null,
             mouseDownY: null,
             mouseUpEventListerAdded: false,
         });
+        expect(triggerEvent).toHaveBeenCalledWith('beforeDrop', {
+            rawEvent: mockedEvent,
+        });
         expect(takeSnapshotSpy).toHaveBeenCalledWith();
         expect(triggerEvent).toHaveBeenCalledWith('contentChanged', {
             source: ChangeSource.Drop,
         });
     });
+
+    it('Trigger onDrop event with defaultPrevented', () => {
+        const takeSnapshotSpy = jasmine.createSpy('takeSnapshot');
+        editor.takeSnapshot = takeSnapshotSpy;
+        const mockedEvent = {
+            dataTransfer: {
+                getData: () => '',
+            },
+            defaultPrevented: true,
+        } as any;
+
+        triggerEvent.and.returnValue({ rawEvent: mockedEvent });
+
+        eventMap.drop.beforeDispatch(mockedEvent);
+
+        expect(triggerEvent).toHaveBeenCalledWith('beforeDrop', {
+            rawEvent: mockedEvent,
+        });
+        expect(takeSnapshotSpy).not.toHaveBeenCalled();
+        expect(triggerEvent).not.toHaveBeenCalledWith('contentChanged', jasmine.anything());
+    });
 });

packages/roosterjs-content-model-plugins/lib/dragAndDrop/DragAndDropPlugin.ts

@@ -0,0 +1,96 @@
+import { handleDroppedContent } from './utils/handleDroppedContent';
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+
+/**
+ * Options for DragAndDrop plugin
+ */
+export interface DragAndDropOptions {
+    /**
+     * Forbidden elements that cannot be dropped in the editor
+     * @default ['iframe']
+     */
+    forbiddenElements?: string[];
+}
+
+const DefaultOptions = {
+    forbiddenElements: ['iframe'],
+};
+
+/**
+ * DragAndDrop plugin, handles ContentChanged event when change source is "Drop"
+ * to sanitize dropped content, similar to how PastePlugin sanitizes pasted content.
+ */
+export class DragAndDropPlugin implements EditorPlugin {
+    private editor: IEditor | null = null;
+    private forbiddenElements: string[] = [];
+    private isInternalDragging: boolean = false;
+    private disposer: (() => void) | null = null;
+
+    /**
+     * Construct a new instance of DragAndDropPlugin
+     */
+    constructor(options: DragAndDropOptions = DefaultOptions) {
+        this.forbiddenElements = options.forbiddenElements ?? [];
+    }
+
+    /**
+     * Get name of this plugin
+     */
+    getName() {
+        return 'DragAndDrop';
+    }
+
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor) {
+        this.editor = editor;
+        this.disposer = editor.attachDomEvent({
+            dragstart: {
+                beforeDispatch: _ev => {
+                    this.isInternalDragging = true;
+                },
+            },
+        });
+    }
+
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose() {
+        this.editor = null;
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+        this.isInternalDragging = false;
+        this.forbiddenElements = [];
+    }
+
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(event: PluginEvent) {
+        if (this.editor && event.eventType == 'beforeDrop') {
+            if (this.isInternalDragging) {
+                this.isInternalDragging = false;
+            } else {
+                const dropEvent = event.rawEvent;
+                const html = dropEvent.dataTransfer?.getData('text/html');
+
+                if (html) {
+                    handleDroppedContent(this.editor, dropEvent, html, this.forbiddenElements);
+                }
+            }
+            return;
+        }
+    }
+}

packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/cleanForbiddenElements.ts

@@ -0,0 +1,18 @@
+/**
+ * @internal
+ * Remove all forbidden elements from a parsed HTML document
+ * @param doc The parsed HTML document to clean
+ * @param forbiddenElements Array of tag names to remove (e.g., ['iframe', 'script'])
+ */
+export function cleanForbiddenElements(doc: Document, forbiddenElements: string[]): void {
+    if (forbiddenElements.length === 0) {
+        return;
+    }
+
+    const selector = forbiddenElements.join(',');
+    const elements = Array.from(doc.body.querySelectorAll(selector));
+
+    for (const element of elements) {
+        element.parentNode?.removeChild(element);
+    }
+}