Add sanitizer support for responsive images

- Add support for picture HTML tag
- Add support for srcset, media, and sizes attributes to img and source tags

reader/sanitizer/sanitizer.go

@@ -9,6 +9,7 @@ import (
 	"fmt"
 	"io"
 	"regexp"
+	"strconv"
 	"strings"
 
 	"miniflux.app/url"
@@ -60,14 +61,14 @@ func Sanitize(baseURL, input string) string {
 
 					tagStack = append(tagStack, tagName)
 				}
-			} else if isBlacklistedTag(tagName) {
+			} else if isBlockedTag(tagName) {
 				blacklistedTagDepth++
 			}
 		case html.EndTagToken:
 			tagName := token.DataAtom.String()
 			if isValidTag(tagName) && inList(tagName, tagStack) {
 				buffer.WriteString(fmt.Sprintf("</%s>", tagName))
-			} else if isBlacklistedTag(tagName) {
+			} else if isBlockedTag(tagName) {
 				blacklistedTagDepth--
 			}
 		case html.SelfClosingTagToken:
@@ -98,6 +99,10 @@ func sanitizeAttributes(baseURL, tagName string, attributes []html.Attribute) ([
 			continue
 		}
 
+		if (tagName == "img" || tagName == "source") && attribute.Key == "srcset" {
+			value = sanitizeSrcsetAttr(baseURL, value)
+		}
+
 		if isExternalResourceAttribute(attribute.Key) {
 			if tagName == "iframe" {
 				if isValidIframeSource(baseURL, attribute.Val) {
@@ -111,7 +116,7 @@ func sanitizeAttributes(baseURL, tagName string, attributes []html.Attribute) ([
 					continue
 				}
 
-				if !hasValidURIScheme(value) || isBlacklistedResource(value) {
+				if !hasValidURIScheme(value) || isBlockedResource(value) {
 					continue
 				}
 			}
@@ -146,7 +151,7 @@ func getExtraAttributes(tagName string) ([]string, []string) {
 }
 
 func isValidTag(tagName string) bool {
-	for element := range getTagWhitelist() {
+	for element := range getTagAllowList() {
 		if tagName == element {
 			return true
 		}
@@ -156,7 +161,7 @@ func isValidTag(tagName string) bool {
 }
 
 func isValidAttribute(tagName, attributeName string) bool {
-	for element, attributes := range getTagWhitelist() {
+	for element, attributes := range getTagAllowList() {
 		if tagName == element {
 			if inList(attributeName, attributes) {
 				return true
@@ -202,7 +207,7 @@ func hasRequiredAttributes(tagName string, attributes []string) bool {
 	elements["a"] = []string{"href"}
 	elements["iframe"] = []string{"src"}
 	elements["img"] = []string{"src"}
-	elements["source"] = []string{"src"}
+	elements["source"] = []string{"src", "srcset"}
 
 	for element, attrs := range elements {
 		if tagName == element {
@@ -271,7 +276,7 @@ func hasValidURIScheme(src string) bool {
 	return false
 }
 
-func isBlacklistedResource(src string) bool {
+func isBlockedResource(src string) bool {
 	blacklist := []string{
 		"feedsportal.com",
 		"api.flattr.com",
@@ -326,12 +331,13 @@ func isValidIframeSource(baseURL, src string) bool {
 	return false
 }
 
-func getTagWhitelist() map[string][]string {
+func getTagAllowList() map[string][]string {
 	whitelist := make(map[string][]string)
-	whitelist["img"] = []string{"alt", "title", "src"}
+	whitelist["img"] = []string{"alt", "title", "src", "srcset", "sizes"}
+	whitelist["picture"] = []string{}
 	whitelist["audio"] = []string{"src"}
 	whitelist["video"] = []string{"poster", "height", "width", "src"}
-	whitelist["source"] = []string{"src", "type"}
+	whitelist["source"] = []string{"src", "type", "srcset", "sizes", "media"}
 	whitelist["dt"] = []string{}
 	whitelist["dd"] = []string{}
 	whitelist["dl"] = []string{}
@@ -404,8 +410,7 @@ func rewriteIframeURL(link string) string {
 	return link
 }
 
-// Blacklisted tags remove the tag and all descendants.
-func isBlacklistedTag(tagName string) bool {
+func isBlockedTag(tagName string) bool {
 	blacklist := []string{
 		"noscript",
 		"script",
@@ -420,3 +425,51 @@ func isBlacklistedTag(tagName string) bool {
 
 	return false
 }
+
+/*
+
+One or more strings separated by commas, indicating possible image sources for the user agent to use.
+
+Each string is composed of:
+- A URL to an image
+- Optionally, whitespace followed by one of:
+- A width descriptor (a positive integer directly followed by w). The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
+- A pixel density descriptor (a positive floating point number directly followed by x).
+
+*/
+func sanitizeSrcsetAttr(baseURL, value string) string {
+	var sanitizedSources []string
+	rawSources := strings.Split(value, ",")
+	for _, rawSource := range rawSources {
+		parts := strings.Split(strings.TrimSpace(rawSource), " ")
+		nbParts := len(parts)
+
+		if nbParts > 0 {
+			sanitizedSource, err := url.AbsoluteURL(baseURL, parts[0])
+			if err != nil {
+				continue
+			}
+
+			if nbParts == 2 && isValidWidthOrDensityDescriptor(parts[1]) {
+				sanitizedSource += " " + parts[1]
+			}
+
+			sanitizedSources = append(sanitizedSources, sanitizedSource)
+		}
+	}
+	return strings.Join(sanitizedSources, ", ")
+}
+
+func isValidWidthOrDensityDescriptor(value string) bool {
+	if value == "" {
+		return false
+	}
+
+	lastChar := value[len(value)-1:]
+	if lastChar != "w" && lastChar != "x" {
+		return false
+	}
+
+	_, err := strconv.ParseFloat(value[0:len(value)-1], 32)
+	return err == nil
+}

reader/sanitizer/sanitizer_test.go

@@ -15,6 +15,36 @@ func TestValidInput(t *testing.T) {
 	}
 }
 
+func TestImgWithSrcset(t *testing.T) {
+	input := `<img srcset="example-320w.jpg, example-480w.jpg 1.5x, example-640w.jpg 2x,example-640w.jpg 640w" src="example-640w.jpg" alt="Example">`
+	expected := `<img srcset="http://example.org/example-320w.jpg, http://example.org/example-480w.jpg 1.5x, http://example.org/example-640w.jpg 2x, http://example.org/example-640w.jpg 640w" src="http://example.org/example-640w.jpg" alt="Example" loading="lazy">`
+	output := Sanitize("http://example.org/", input)
+
+	if output != expected {
+		t.Errorf(`Wrong output: %s`, output)
+	}
+}
+
+func TestSourceWithSrcsetAndMedia(t *testing.T) {
+	input := `<picture><source media="(min-width: 800px)" srcset="elva-800w.jpg"></picture>`
+	expected := `<picture><source media="(min-width: 800px)" srcset="http://example.org/elva-800w.jpg"></picture>`
+	output := Sanitize("http://example.org/", input)
+
+	if output != expected {
+		t.Errorf(`Wrong output: %s`, output)
+	}
+}
+
+func TestMediumImgWithSrcset(t *testing.T) {
+	input := `<img alt="Image for post" class="t u v ef aj" src="https://miro.medium.com/max/5460/1*aJ9JibWDqO81qMfNtqgqrw.jpeg" srcset="https://miro.medium.com/max/552/1*aJ9JibWDqO81qMfNtqgqrw.jpeg 276w, https://miro.medium.com/max/1000/1*aJ9JibWDqO81qMfNtqgqrw.jpeg 500w" sizes="500px" width="2730" height="3407">`
+	expected := `<img alt="Image for post" src="https://miro.medium.com/max/5460/1*aJ9JibWDqO81qMfNtqgqrw.jpeg" srcset="https://miro.medium.com/max/552/1*aJ9JibWDqO81qMfNtqgqrw.jpeg 276w, https://miro.medium.com/max/1000/1*aJ9JibWDqO81qMfNtqgqrw.jpeg 500w" sizes="500px" loading="lazy">`
+	output := Sanitize("http://example.org/", input)
+
+	if output != expected {
+		t.Errorf(`Wrong output: %s`, output)
+	}
+}
+
 func TestSelfClosingTags(t *testing.T) {
 	input := `<p>This <br> is a <strong>text</strong> <br/>with an image: <img src="http://example.org/" alt="Test" loading="lazy"/>.</p>`
 	output := Sanitize("http://example.org/", input)