From a24b976546d29c3cfaf7a8113a77a94ec2df864e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 29 Apr 2022 10:05:31 -0700
Subject: [PATCH] Remove lazy loaded srcset elements

Some tools like jetpack: https://jetpack.com/support/lazy-images/
use a temporary srcset element set to a data image when lazy
loading, these are later removed by JS. We test if there is
a valid src attribute and if the srcset attribute is a data embed
to remove these.
---
 packages/readabilityjs/Readability.js           | 13 +++++++++++--
 packages/readabilityjs/test/test-readability.js | 13 +++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/readabilityjs/Readability.js b/packages/readabilityjs/Readability.js
index 2386c594d..8380b9313 100644
--- a/packages/readabilityjs/Readability.js
+++ b/packages/readabilityjs/Readability.js
@@ -507,11 +507,12 @@ Readability.prototype = {
   /** Creates imageproxy links for all article images with href source */
   _createImageProxyLinks: function (articleContent) {
     if (this.createImageProxyUrl !== undefined) {
+      const dataUriRegex = /^data:image\/(?:png|jpe?g|gif);base64,/;
+
       // replace all images' href source
       const images = articleContent.getElementsByTagName('img');
       Array.from(images).forEach(image => {
         const src = image.getAttribute("src");
-        const dataUriRegex = /^data:image\/(?:png|jpe?g|gif);base64,/;
 
         // do not proxy data uri
         if (src && !dataUriRegex.test(src)) {
@@ -536,8 +537,16 @@ Readability.prototype = {
       const elements = articleContent.querySelectorAll('[srcset]');
       Array.from(elements).forEach(element => {
         let resultSrcset = '';
+        const srcSet = element.getAttribute('srcset')
 
-        const items = parseSrcset(element.getAttribute('srcset'));
+        // If the srcset is a data image its probably just for lazy loading
+        // so we want to remove it.
+        if (dataUriRegex.test(srcSet) && element.getAttribute('src')) {
+          element.removeAttribute('srcset');
+          return;
+        }
+
+        const items = parseSrcset(srcSet);
         for (let item of items) {
           const { url: link, w, x, d } = item;
           if (!w && !x && !d) {
diff --git a/packages/readabilityjs/test/test-readability.js b/packages/readabilityjs/test/test-readability.js
index 6ccbbc563..0c8154a3e 100644
--- a/packages/readabilityjs/test/test-readability.js
+++ b/packages/readabilityjs/test/test-readability.js
@@ -302,6 +302,19 @@ describe("Readability API", function() {
       }).parse().content;
       expect(content).eql(expected_xhtml);
     });
+
+    it("should remove srcset elements that are lazy loading placeholders", function() {
+      var dom = new JSDOM('My image: <img class="shrinkToFit jetpack-lazy-image" src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&#038;ssl=1" alt width="900" height="380" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&amp;is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></img>');
+      var expected_xhtml = '<div id="readability-page-1" class="page">' +
+                           'My image: <img src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&amp;is-pending-load=1#038;ssl=1" alt="" width="900" height="380" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&amp;is-pending-load=1#038;ssl=1">' +
+                           '</div>'
+      var content = new Readability(dom.window.document, {
+        createImageProxyUrl: function(url) {
+          return url;
+        }
+      }).parse().content;
+      expect(content).eql(expected_xhtml);
+    });
   });
 });