FIX: avoid dangling base64 images on rich editor (#36615)

renato · web-flow · commit add6bdca3296 · 2025-12-10T23:07:12.000-03:00
When using the rich editor, when you paste an HTML containing a base64
image, the `dataImageUploader` ProseMirror plugin triggers uploads for
each image and replaces it inline after completed.

Uploads won't succeed if `authorized_extensions` doesn't allow any image
extensions, and in this case the base64 images are kept in the document,
an unintended outcome.

This PR updates the `dataImageUploader` handler to replace any base64
images by an "image" string before starting any upload process.
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
@@ -3158,6 +3158,8 @@ en:
         add_to_grid: "Add to grid"
         move_outside_grid: "Move outside grid"
 
+      image: "image"
+
       grid_label: "This will be displayed as a grid"
 
       image_scale_button: "Scale image to %{percent}%"
diff --git a/frontend/discourse/app/static/prosemirror/extensions/image.js b/frontend/discourse/app/static/prosemirror/extensions/image.js
@@ -4,6 +4,7 @@ import {
 } from "pretty-text/upload-short-url";
 import { ajax } from "discourse/lib/ajax";
 import discourseDebounce from "discourse/lib/debounce";
+import { authorizesOneOrMoreImageExtensions } from "discourse/lib/uploads";
 import { isNumeric } from "discourse/lib/utilities";
 import { i18n } from "discourse-i18n";
 import ImageNodeView from "../components/image-node-view";
@@ -351,6 +352,27 @@ const extension = {
             return;
           }
 
+          const staff = getContext().currentUser?.staff;
+          // stop earlier if image extensions aren't allowed
+          if (!authorizesOneOrMoreImageExtensions(staff, siteSettings)) {
+            const tr = view.state.tr;
+            const dataURIMap = dataImageUploader.getState(view.state);
+
+            dataURIMap.get(dataURI)?.forEach((pos) => {
+              const node = view.state.doc.nodeAt(pos);
+              tr.replaceWith(
+                pos,
+                pos + node.nodeSize,
+                view.state.schema.text(i18n("composer.image"))
+              );
+            });
+
+            if (tr.docChanged) {
+              view.dispatch(tr);
+            }
+            return;
+          }
+
           processingDataURIs.add(dataURI);
 
           const mimeMatch = dataURI.match(/data:image\/([^;]+)/);
diff --git a/spec/system/composer/prosemirror_editor_spec.rb b/spec/system/composer/prosemirror_editor_spec.rb
@@ -1136,36 +1136,58 @@ def body(title)
       expect(rich).to have_css("img[alt='img1'][data-orig-src]", count: 2)
     end
 
-    it "avoids triggering upload when unauthorized" do
-      SiteSetting.authorized_extensions = ""
+    context "when unauthorized to upload" do
+      before { SiteSetting.authorized_extensions = "" }
 
-      open_composer
+      it "allows pasting text" do
+        cdp.allow_clipboard
 
-      cdp.allow_clipboard
-      cdp.copy_test_image
-      cdp.paste
+        open_composer
 
-      expect(rich).to have_no_css("img")
+        cdp.copy_paste("Just some text")
 
-      composer.toggle_rich_editor
+        expect(rich).to have_css("p", text: "Just some text")
 
-      expect(composer).to have_value("")
-    end
+        composer.toggle_rich_editor
 
-    it "allows pasting text when unauthorized to upload" do
-      SiteSetting.authorized_extensions = ""
+        expect(composer).to have_value("Just some text")
+      end
 
-      cdp.allow_clipboard
+      it "avoids triggering upload for paste" do
+        open_composer
 
-      open_composer
+        cdp.allow_clipboard
+        cdp.copy_test_image
+        cdp.paste
 
-      cdp.copy_paste("Just some text")
+        expect(rich).to have_no_css("img")
 
-      expect(rich).to have_css("p", text: "Just some text")
+        composer.toggle_rich_editor
 
-      composer.toggle_rich_editor
+        expect(composer).to have_value("")
+      end
+
+      it "avoids triggering upload for base64" do
+        valid_png_data_uri =
+          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
 
-      expect(composer).to have_value("Just some text")
+        cdp.allow_clipboard
+
+        open_composer
+
+        html = <<~HTML
+          <img src="#{valid_png_data_uri}" alt="img1" width="100" height="100">
+        HTML
+
+        cdp.copy_paste(html, html: true)
+
+        expect(rich).to have_no_css("img")
+        expect(rich).to have_text("image")
+
+        composer.toggle_rich_editor
+
+        expect(composer).to have_value("image")
+      end
     end
 
     it "merges text with link marks created from parsing" do
