Merge pull request #3690 from Simounet/fix/srcset-attribute

More robust srcset image attribute handling

2 files changed, 33 insertions, 3 deletions

diff --git a/src/Wallabag/CoreBundle/Helper/DownloadImages.php b/src/Wallabag/CoreBundle/Helper/DownloadImages.php
index f91cdf5e..487a3a23 100644
--- a/src/Wallabag/CoreBundle/Helper/DownloadImages.php
+++ b/src/Wallabag/CoreBundle/Helper/DownloadImages.php
@@ -185,7 +185,7 @@ class DownloadImages
      *
      * @return array An array of urls
      */
-    protected function getSrcsetUrls(Crawler $imagesCrawler)
+    private function getSrcsetUrls(Crawler $imagesCrawler)
     {
         $urls = [];
         $iterator = $imagesCrawler
@@ -193,9 +193,14 @@ class DownloadImages
         while ($iterator->valid()) {
             $srcsetAttribute = $iterator->current()->getAttribute('srcset');
             if ('' !== $srcsetAttribute) {
-                $srcset = array_map('trim', explode(',', $srcsetAttribute));
+                // Couldn't start with " OR ' OR a white space
+                // Could be one or more white space
+                // Must be one or more digits followed by w OR x
+                $pattern = "/(?:[^\"'\s]+\s*(?:\d+[wx])+)/";
+                preg_match_all($pattern, $srcsetAttribute, $matches);
+                $srcset = call_user_func_array('array_merge', $matches);
                 $srcsetUrls = array_map(function ($src) {
-                    return explode(' ', $src)[0];
+                    return trim(explode(' ', $src, 2)[0]);
                 }, $srcset);
                 $urls = array_merge($srcsetUrls, $urls);
             }
diff --git a/tests/Wallabag/CoreBundle/Helper/DownloadImagesTest.php b/tests/Wallabag/CoreBundle/Helper/DownloadImagesTest.php
index faa803fa..cda5f843 100644
--- a/tests/Wallabag/CoreBundle/Helper/DownloadImagesTest.php
+++ b/tests/Wallabag/CoreBundle/Helper/DownloadImagesTest.php
@@ -205,6 +205,31 @@ class DownloadImagesTest extends TestCase
         $this->assertNotContains('http://piketty.blog.lemonde.fr/', $res, 'Image srcset attribute were not replaced');
     }
 
+    public function testProcessImageWithTrickySrcset()
+    {
+        $client = new Client();
+
+        $mock = new Mock([
+            new Response(200, ['content-type' => 'image/jpeg'], Stream::factory(file_get_contents(__DIR__ . '/../fixtures/image-no-content-type.jpg'))),
+            new Response(200, ['content-type' => 'image/jpeg'], Stream::factory(file_get_contents(__DIR__ . '/../fixtures/image-no-content-type.jpg'))),
+            new Response(200, ['content-type' => 'image/jpeg'], Stream::factory(file_get_contents(__DIR__ . '/../fixtures/image-no-content-type.jpg'))),
+        ]);
+
+        $client->getEmitter()->attach($mock);
+
+        $logHandler = new TestHandler();
+        $logger = new Logger('test', [$logHandler]);
+
+        $download = new DownloadImages($client, sys_get_temp_dir() . '/wallabag_test', 'http://wallabag.io/', $logger);
+        $res = $download->processHtml(123, '<figure id="post-257260" class="align-none media-257260"><img src="https://cdn.css-tricks.com/wp-content/uploads/2017/08/the-critical-request.png" srcset="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_1000,f_auto,q_auto/v1501594717/the-critical-request_bqdfaa.png 1000w, https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_200,f_auto,q_auto/v1501594717/the-critical-request_bqdfaa.png 200w" sizes="(min-width: 1850px) calc( (100vw - 555px) / 3 )
+       (min-width: 1251px) calc( (100vw - 530px) / 2 )
+       (min-width: 1086px) calc(100vw - 480px)
+       (min-width: 626px)  calc(100vw - 335px)
+                           calc(100vw - 30px)" alt="" /></figure>', 'https://css-tricks.com/the-critical-request/');
+
+        $this->assertNotContains('f_auto,q_auto', $res, 'Image srcset attribute were not replaced');
+    }
+
     public function testProcessImageWithNullPath()
     {
         $client = new Client();