Fix: Prevent responsive URL generation for zero width images (#206)

cloudinary · Mar 2, 2021 · 7d086e8 · 7d086e8
1 parent 532e227
commit 7d086e8
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,7 +3,6 @@ node_js:
   - "14"
   - "12"
   - "10"
-  - "8"
 install:
   - npm install
 before_script:

diff --git a/js/jquery.cloudinary.js b/js/jquery.cloudinary.js
@@ -4302,12 +4302,20 @@ var slice = [].slice,
               switch (false) {
                 case !/w_auto:breakpoints/.test(dataSrc):
                   requiredWidth = maxWidth(containerWidth, tag);
-                  dataSrc = dataSrc.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:" + requiredWidth);
+                  if (requiredWidth) {
+                    dataSrc = dataSrc.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:" + requiredWidth);
+                  } else {
+                    setUrl = false;
+                  }
                   break;
                 case !(match = /w_auto(:(\d+))?/.exec(dataSrc)):
                   requiredWidth = applyBreakpoints.call(this, tag, containerWidth, match[2], options);
                   requiredWidth = maxWidth(requiredWidth, tag);
-                  dataSrc = dataSrc.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
+                  if (requiredWidth) {
+                    dataSrc = dataSrc.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
+                  } else {
+                    setUrl = false;
+                  }
               }
               Util.removeAttribute(tag, 'width');
               if (!options.responsive_preserve_height) {

diff --git a/samples/webpack/bundle.js b/samples/webpack/bundle.js
@@ -2936,12 +2936,16 @@
 	                if (requestedWidth > imageWidth) {
 	                  imageWidth = requestedWidth;
 	                }
-	                Util.setData(tag, 'width', requestedWidth);
-	                src = src.replace(/\bw_auto\b/g, 'w_' + imageWidth);
-	                Util.setAttribute(tag, 'width', null);
-	                if (!options.responsive_preserve_height) {
-	                  Util.setAttribute(tag, 'height', null);
-	                }
+	                if (imageWidth) {
+	  	  	          Util.setData(tag, 'width', requestedWidth);
+	  	  	          src = src.replace(/\bw_auto\b/g, 'w_' + imageWidth);
+	  	  	          Util.setAttribute(tag, 'width', null);
+	  	  	          if (!options.responsive_preserve_height) {
+	  	  	            Util.setAttribute(tag, 'height', null);
+	  	  	          } 
+	  	  	        } else {
+	  	  	          setUrl = false;
+	  	  	        }
 	              } else {
 	                setUrl = false;
 	              }

diff --git a/src/cloudinary.js b/src/cloudinary.js
@@ -667,15 +667,24 @@ class Cloudinary {
           if (HtmlTag.isResponsive(tag, responsiveClass)) {
             containerWidth = findContainerWidth(tag);
             if (containerWidth !== 0) {
-              switch (false) {
-                case !/w_auto:breakpoints/.test(dataSrc):
-                  requiredWidth = maxWidth(containerWidth, tag);
+              if (/w_auto:breakpoints/.test(dataSrc)) {
+                requiredWidth = maxWidth(containerWidth, tag);
+                if (requiredWidth) {
                   dataSrc = dataSrc.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, `w_auto:breakpoints$1:${requiredWidth}`);
-                  break;
-                case !(match = /w_auto(:(\d+))?/.exec(dataSrc)):
+                } else {
+                  setUrl = false;
+                }
+              } else {
+                match = /w_auto(:(\d+))?/.exec(dataSrc);
+                if (match) {
                   requiredWidth = applyBreakpoints.call(this, tag, containerWidth, match[2], options);
-                  requiredWidth = maxWidth(requiredWidth, tag);
-                  dataSrc = dataSrc.replace(/w_auto[^,\/]*/g, `w_${requiredWidth}`);
+                  requiredWidth = maxWidth(requiredWidth, tag)
+                  if (requiredWidth) {
+                    dataSrc = dataSrc.replace(/w_auto[^,\/]*/g, `w_${requiredWidth}`);
+                  } else {
+                    setUrl = false;
+                  }
+                }
               }
               removeAttribute(tag, 'width');
               if (!options.responsive_preserve_height) {

diff --git a/test/spec/env/js-folder-spec.js b/test/spec/env/js-folder-spec.js
@@ -16,7 +16,7 @@ jasmine.getEnv().addReporter(new SpecReporter({
 // List of files to test
 const files = [
   {name: 'canvas-to-blob.min.js', checkSum: "33ecbe6885ad339c3a5af0cfa063810d"},
-  {name: 'jquery.cloudinary.js', checkSum: "27886431ad43cf97ca3edd2ed3f4e379"},
+  {name: 'jquery.cloudinary.js', checkSum: "0d492c6cd3350b0178c65d0ac3c0e23f"},
   {name: 'jquery.fileupload.js', checkSum: "4bfd85460689a29e314ddfad50c184e0"},
   {name: 'jquery.fileupload-image.js', checkSum: "7c40367b00f74b0c7c43bff009dde942"},
   {name: 'jquery.fileupload-process.js', checkSum: "840f65232eaf1619ea0aff1ab4f5e444"},
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ node_js: @@
       - "14"
       - "12"
       - "10"
-      - "8"
     install:
       - npm install
     before_script:
@@ Expand Down @@