FIX: prevent lightbox images from double escaping titles (#23458)

This change fixes an issue where lightbox images are showing escaped text in the link title and lightbox image description area.

app/assets/javascripts/discourse/app/lib/lightbox.js

@@ -1,7 +1,4 @@
-import {
+import { postRNWebviewMessage } from "discourse/lib/utilities";
-  escapeExpression,
-  postRNWebviewMessage,
-} from "discourse/lib/utilities";
 
 import I18n from "I18n";
 import User from "discourse/models/user";
@@ -119,7 +116,7 @@ export default function lightbox(elem, siteSettings) {
         titleSrc(item) {
           const href = item.el.data("download-href") || item.src;
           let src = [
-            escapeExpression(item.el.attr("title")),
+            item.el.attr("title"),
             $("span.informations", item.el).text(),
           ];
           if (

app/assets/javascripts/discourse/app/lib/lightbox/process-html.js

@@ -1,5 +1,4 @@
 import { SELECTORS } from "./constants";
-import { escapeExpression } from "discourse/lib/utilities";
 import { htmlSafe } from "@ember/template";
 
 export async function processHTML({ container, selector, clickTarget }) {
@@ -41,7 +40,7 @@ export async function processHTML({ container, selector, clickTarget }) {
         null;
 
       const _title =
-        item.title || item.alt || innerImage.title || innerImage.alt || null;
+        item.title || item.alt || innerImage.title || innerImage.alt || "";
 
       const _aspectRatio =
         item.dataset?.aspectRatio ||
@@ -67,7 +66,7 @@ export async function processHTML({ container, selector, clickTarget }) {
         fullsizeURL: encodeURI(_fullsizeURL),
         smallURL: encodeURI(_smallURL),
         downloadURL: encodeURI(_downloadURL),
-        title: escapeExpression(_title),
+        title: _title,
         fileDetails: _fileDetails,
         dominantColor: _dominantColor,
         aspectRatio: _aspectRatio,

app/assets/javascripts/discourse/tests/unit/lib/lightbox/process-html-test.js

@@ -127,24 +127,6 @@ module("Unit | lib | Experimental lightbox | processHTML()", function () {
     assert.strictEqual(items[0].title, "");
   });
 
-  test("correctly escapes the title", async function (assert) {
-    const container = wrap.cloneNode(true);
-
-    container
-      .querySelector("a")
-      .setAttribute("title", `"><\x00script>javascript:alert(1)</script>`);
-
-    const { items } = await processHTML({
-      container,
-      selector,
-    });
-
-    assert.strictEqual(
-      items[0].title,
-      `&quot;&gt;&lt;\x00script&gt;javascript:alert(1)&lt;/script&gt;`
-    );
-  });
-
   test("handles missing aspect ratio", async function (assert) {
     const container = wrap.cloneNode(true);
 

lib/cooked_post_processor.rb

@@ -292,7 +292,7 @@ class CookedPostProcessor
     informations = +"#{original_width}×#{original_height}"
     informations << " #{upload.human_filesize}" if upload
 
-    a["title"] = CGI.escapeHTML(img["title"] || img["alt"] || filename)
+    a["title"] = img["title"] || img["alt"] || filename
 
     meta.add_child create_icon_node("far-image")
     meta.add_child create_span_node("filename", a["title"])

spec/lib/cooked_post_processor_spec.rb

@@ -649,7 +649,7 @@ RSpec.describe CookedPostProcessor do
           cpp.post_process
 
           expect(cpp.html).to match_html <<~HTML
-            <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/subfolder#{upload.url}" data-download-href="//test.localhost/subfolder/#{upload_path}/#{upload.sha1}" title="&amp;gt;&amp;lt;img src=x onerror=alert(&amp;#39;haha&amp;#39;)&amp;gt;.png"><img src="//test.localhost/subfolder/#{upload_path}/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" width="690" height="788"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">&amp;gt;&amp;lt;img src=x onerror=alert(&amp;#39;haha&amp;#39;)&amp;gt;.png</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p>
+            <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/subfolder#{upload.url}" data-download-href="//test.localhost/subfolder/#{upload_path}/#{upload.sha1}" title="><img src=x onerror=alert('haha')>.png"><img src="//test.localhost/subfolder/#{upload_path}/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" width="690" height="788"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">&gt;&lt;img src=x onerror=alert('haha')&gt;.png</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p>
           HTML
         end
       end