From be8607dc683a33e50075a482f02e7983df5fe926 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 3 Apr 2026 15:41:49 +0800
Subject: [PATCH] support picture source srcset in markup

---
 modules/markup/sanitizer_default.go      | 6 ++++++
 modules/markup/sanitizer_default_test.go | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/modules/markup/sanitizer_default.go b/modules/markup/sanitizer_default.go
index 77ba8bf4f4..447cf4807e 100644
--- a/modules/markup/sanitizer_default.go
+++ b/modules/markup/sanitizer_default.go
@@ -56,6 +56,11 @@ func (st *Sanitizer) createDefaultPolicy() *bluemonday.Policy {
 
 	policy.AllowAttrs("src", "autoplay", "controls").OnElements("video")
 
+	// Native support of "<picture><source media=... srcset=...><img src=...></picture>"
+	// ATTENTION: it only works with "auto" theme, because "media" query doesn't work with the theme chosen by end user manually.
+	// For example: browser's color scheme is "dark", but end user chooses "light" theme. Maybe it needs JS to help to make it work.
+	policy.AllowAttrs("media", "srcset").OnElements("source")
+
 	policy.AllowAttrs("loading").OnElements("img")
 
 	// Allow generally safe attributes (reference: https://github.com/jch/html-pipeline)
@@ -86,6 +91,7 @@ func (st *Sanitizer) createDefaultPolicy() *bluemonday.Policy {
 		"dl", "dt", "dd", "kbd", "q", "samp", "var", "hr", "ruby", "rt", "rp", "li", "tr", "td", "th", "s", "strike", "summary",
 		"details", "caption", "figure", "figcaption",
 		"abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "video", "wbr",
+		"picture", "source",
 	}
 	// FIXME: Need to handle longdesc in img but there is no easy way to do it
 	policy.AllowAttrs(generalSafeAttrs...).OnElements(generalSafeElements...)
diff --git a/modules/markup/sanitizer_default_test.go b/modules/markup/sanitizer_default_test.go
index e5ba018e1b..e66f00c02f 100644
--- a/modules/markup/sanitizer_default_test.go
+++ b/modules/markup/sanitizer_default_test.go
@@ -58,6 +58,9 @@ func TestSanitizer(t *testing.T) {
 		`<a href="cbthunderlink://somebase64string)">my custom URL scheme</a>`, `<a href="cbthunderlink://somebase64string)" rel="nofollow">my custom URL scheme</a>`,
 		`<a href="matrix:roomid/psumPMeAfzgAeQpXMG:feneas.org?action=join">my custom URL scheme</a>`, `<a href="matrix:roomid/psumPMeAfzgAeQpXMG:feneas.org?action=join" rel="nofollow">my custom URL scheme</a>`,
 
+		// picture
+		`<picture><source media="a"><source media="b"><img alt="c" src="d"></picture>`, `<picture><source media="a"><source media="b"><img alt="c" src="d"></picture>`,
+
 		// Disallow dangerous url schemes
 		`<a href="javascript:alert('xss')">bad</a>`, `bad`,
 		`<a href="vbscript:no">bad</a>`, `bad`,