fix: Don't use innerHTML to populate drag item (DH-18645) (#2378)

- We were using `innerHTML` with the text of the name of the file to
create the drag placeholder content
- Instead, inject the name using `innerText` so it is escaped properly
- Tested by naming a file `<img src=q onerror=prompt(1)>.py`, and then
attempting to move it. It no longer triggered the popup.

Author: mofojed

packages/file-explorer/src/FileList.tsx

@@ -198,7 +198,10 @@ export function FileList(props: FileListProps): JSX.Element {
       itemList.current?.resetMouseState();
 
       const newDragPlaceholder = document.createElement('div');
-      newDragPlaceholder.innerHTML = `<div class="dnd-placeholder-content">${getDragPlaceholderText()}</div>`;
+      const dndPlaceholderContent = document.createElement('div');
+      dndPlaceholderContent.className = 'dnd-placeholder-content';
+      dndPlaceholderContent.innerText = getDragPlaceholderText() ?? '';
+      newDragPlaceholder.appendChild(dndPlaceholderContent);
       newDragPlaceholder.className = 'file-list-dnd-placeholder';
       document.body.appendChild(newDragPlaceholder);
       e.dataTransfer.setDragImage(newDragPlaceholder, 0, 0);