From b2b578aa5df7981207ce8d8ae197f1605b2d1566 Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Tue, 2 Feb 2016 16:04:09 -0500 Subject: [PATCH 1/3] Move to photon 2.0 --- npm-shrinkwrap.json | 12 +++--------- package.json | 2 +- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 4d8a98364b16..77082b128bbf 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -8983,19 +8983,13 @@ "resolved": "git+https://github.com/Automattic/node-phone.git#0a3a87cc2b70906c7367ba3a9c9a27915f335443" }, "photon": { - "version": "1.0.4", - "from": "photon@1.0.4", - "resolved": "https://registry.npmjs.org/photon/-/photon-1.0.4.tgz", + "version": "2.0.0", "dependencies": { "crc32": { - "version": "0.2.2", - "from": "crc32@0.2.2", - "resolved": "https://registry.npmjs.org/crc32/-/crc32-0.2.2.tgz" + "version": "0.2.2" }, "seed-random": { - "version": "2.2.0", - "from": "seed-random@2.2.0", - "resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz" + "version": "2.2.0" } } }, diff --git a/package.json b/package.json index 149680921097..153f684a9237 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "node-sass": "3.4.2", "page": "1.6.1", "phone": "git+https://github.com/Automattic/node-phone.git#1.0.4-8", - "photon": "1.0.4", + "photon": "2.0.0", "q": "1.0.1", "qrcode.react": "0.5.2", "qs": "4.0.0", From 57499633158558ed211f38132e2d0e325eec971f Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Tue, 2 Feb 2016 16:29:53 -0500 Subject: [PATCH 2/3] Fix up tests for media lib --- client/lib/media/test/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/lib/media/test/utils.js b/client/lib/media/test/utils.js index a541328e08bf..6b6e3f1d8a44 100644 --- a/client/lib/media/test/utils.js +++ b/client/lib/media/test/utils.js @@ -46,7 +46,7 @@ describe( 'MediaUtils', function() { photon: true } ); - expect( url ).to.equal( 'https://i2.wp.com/secure.gravatar.com/blavatar/4e21d703d81809d215ceaabbf07efbc6' ); + expect( url ).to.equal( 'https://i2.wp.com/secure.gravatar.com/blavatar/4e21d703d81809d215ceaabbf07efbc6?ssl=1' ); } ); it( 'should generate the correct width-constrained photon URL', function() { @@ -55,7 +55,7 @@ describe( 'MediaUtils', function() { maxWidth: 450 } ); - expect( url ).to.equal( 'https://i2.wp.com/secure.gravatar.com/blavatar/4e21d703d81809d215ceaabbf07efbc6?w=450' ); + expect( url ).to.equal( 'https://i2.wp.com/secure.gravatar.com/blavatar/4e21d703d81809d215ceaabbf07efbc6?ssl=1&w=450' ); } ); it( 'should generate the correct width-constrained URL', function() { From 0a7ba01f781448a16bf6229fb43699588064b5e1 Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Tue, 2 Feb 2016 16:39:35 -0500 Subject: [PATCH 3/3] Update usage of photon and safeImageUrl --- client/lib/post-normalizer/index.js | 18 +++++++++++------- client/lib/safe-image-url/index.js | 9 +-------- client/lib/safe-image-url/test/index.js | 18 +++++++++--------- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/client/lib/post-normalizer/index.js b/client/lib/post-normalizer/index.js index d2f7f53cfdb4..1cf96588bcb6 100644 --- a/client/lib/post-normalizer/index.js +++ b/client/lib/post-normalizer/index.js @@ -28,6 +28,13 @@ var assign = require( 'lodash/object/assign' ), var formatting = require( 'lib/formatting' ), safeImageURL = require( 'lib/safe-image-url' ); + +const DEFAULT_PHOTON_QUALITY = 80, // 80 was chosen after some heuristic testing as the best blend of size and quality + READING_WORDS_PER_SECOND = 250 / 60; // Longreads says that people can read 250 words per minute. We want the rate in words per second. + +const imageScaleFactor = ( typeof window !== 'undefined' && window.devicePixelRatio && window.devicePixelRatio > 1 ) ? 2 : 1, +TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + function debugForPost( post ) { return function( msg ) { debug( post.global_ID + ': ' + msg ); @@ -50,10 +57,7 @@ function stripAutoPlays( query ) { return query; } -const DEFAULT_PHOTON_QUALITY = 80, // 80 was chosen after some heuristic testing as the best blend of size and quality - READING_WORDS_PER_SECOND = 250 / 60; // Longreads says that people can read 250 words per minute. We want the rate in words per second. -const imageScaleFactor = ( typeof window !== 'undefined' && window.devicePixelRatio && window.devicePixelRatio > 1 ) ? 2 : 1; /** * Asynchronously normalizes an object shaped like a post. Works on a copy of the post and does not mutate the original post. @@ -510,24 +514,24 @@ normalizePost.content = { image.parentNode.removeChild( image ); // fun fact: removing the node from the DOM will not prevent it from loading. You actually have to // change out the src to change what loads. The following is a 1x1 transparent gif as a data URL - image.setAttribute( 'src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' ); + image.setAttribute( 'src', TRANSPARENT_GIF ); image.removeAttribute( 'srcset' ); return; } safeSource = safeImageURL( imgSource ); - if ( maxWidth ) { + if ( safeSource && maxWidth ) { safeSource = maxWidthPhotonishURL( safeSource, maxWidth ); } - image.setAttribute( 'src', safeSource ); + image.setAttribute( 'src', safeSource || TRANSPARENT_GIF ); if ( image.hasAttribute( 'srcset' ) ) { const imgSrcSet = srcset.parse( image.getAttribute( 'srcset' ) ).map( imgSrc => { if ( ! url.parse( imgSrc.url, false, true ).hostname ) { imgSrc.url = url.resolve( post.URL, imgSrc.url ); } - imgSrc.url = safeImageURL( imgSrc.url ); + imgSrc.url = safeImageURL( imgSrc.url || TRANSPARENT_GIF ); return imgSrc; } ); image.setAttribute( 'srcset', srcset.stringify( imgSrcSet ) ); diff --git a/client/lib/safe-image-url/index.js b/client/lib/safe-image-url/index.js index 16457cee52d5..f1f5176def19 100644 --- a/client/lib/safe-image-url/index.js +++ b/client/lib/safe-image-url/index.js @@ -19,7 +19,7 @@ var photon = require( 'photon' ), * We special case gravatar, because we control them. * * @param {string} url The URL to secure - * @return {string} The secured URL + * @return {string} The secured URL, or null if we couldn't make it safe */ function safeImageURL( url ) { if ( typeof url !== 'string' ) { @@ -38,13 +38,6 @@ function safeImageURL( url ) { return url.replace( /^http:/, 'https:' ); } - // Photon doesn't support query strings - if ( parsed.query ) { - delete parsed.search; - delete parsed.query; - url = uri.format( parsed ); - } - // run it through photon, even if it had a querystring we couldn't strip return photon( url ); } diff --git a/client/lib/safe-image-url/test/index.js b/client/lib/safe-image-url/test/index.js index 286a37b55f3f..5d62597192fd 100644 --- a/client/lib/safe-image-url/test/index.js +++ b/client/lib/safe-image-url/test/index.js @@ -18,18 +18,18 @@ describe( 'safe-image-url', function() { } ); it( 'should make a non-wpcom https url safe', function() { - expect( safeImage( 'https://example.com/foo' ) ).to.eql( 'https://i1.wp.com/example.com/foo' ); + expect( safeImage( 'https://example.com/foo' ) ).to.eql( 'https://i1.wp.com/example.com/foo?ssl=1' ); } ); it( 'should make wp-com like subdomain url safe', function() { expect( safeImage( 'https://wordpress.com.example.com/foo' ) ).to.eql( - 'https://i0.wp.com/wordpress.com.example.com/foo' + 'https://i0.wp.com/wordpress.com.example.com/foo?ssl=1' ); } ); it( 'should make domain ending by wp-com url safe', function() { expect( safeImage( 'https://examplewordpress.com/foo' ) ).to.eql( - 'https://i0.wp.com/examplewordpress.com/foo' + 'https://i0.wp.com/examplewordpress.com/foo?ssl=1' ); } ); @@ -58,11 +58,11 @@ describe( 'safe-image-url', function() { expect( safeImage( 'https://gravatar.com/' ) ).to.eql( 'https://gravatar.com/' ); } ); - it( 'should strip querystring args from photoned urls', function() { - expect( safeImage( 'https://example.com/foo?bar' ) ).to.eql( 'https://i1.wp.com/example.com/foo' ); - expect( safeImage( 'https://example.com/foo.jpg?bar' ) ).to.eql( 'https://i0.wp.com/example.com/foo.jpg' ); - expect( safeImage( 'https://example.com/foo.jpeg?bar' ) ).to.eql( 'https://i0.wp.com/example.com/foo.jpeg' ); - expect( safeImage( 'https://example.com/foo.gif?bar' ) ).to.eql( 'https://i2.wp.com/example.com/foo.gif' ); - expect( safeImage( 'https://example.com/foo.png?bar' ) ).to.eql( 'https://i0.wp.com/example.com/foo.png' ); + it( 'should return null for urls with querystrings', function() { + expect( safeImage( 'https://example.com/foo?bar' ) ).to.be.null; + expect( safeImage( 'https://example.com/foo.jpg?bar' ) ).to.be.null; + expect( safeImage( 'https://example.com/foo.jpeg?bar' ) ).to.be.null; + expect( safeImage( 'https://example.com/foo.gif?bar' ) ).to.be.null; + expect( safeImage( 'https://example.com/foo.png?bar' ) ).to.be.null; } ); } );