Skip to content

Instantly share code, notes, and snippets.

@kentbrew
Created Jun 16, 2017
Embed
What would you like to do?
Some URLs Abbreviated in Chrome When Processed By JavaScript

Some URLs Abbreviated in Chrome When Processed By JavaScript

While rebuilding the Pinterest extension for Chrome we ran across a weird edge case at vox.com. We could preview their nice big fat srcset-enabled images in the grid and scrape + post to Pinterest, but could not take the src attribute of an IMG tag and directly apply it to the background-image style attribute of a new DIV.

Here are some reduced cases:

Win

Copy this to clipboard:

var t = 'https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
  div.style.height = this.naturalHeight + 'px';
  div.style.width = this.naturalWidth + 'px';
  div.style.backgroundColor = '#aaa';
  div.style.backgroundImage = 'url(' + this.src + ')';
  console.log(div);
}
img.src = t;

In Chrome, open up a new tab and paste. If all goes well you should see a 640x478-pixel DIV, with a background image from Flickr. In your console window, look for the value of t echoed back, like this:

"https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg"

... and then a representation of your new DIV:

<div style="height: 478px; width: 640px; background-color: rgb(170, 170, 170); background-image: url("https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg")></div>

Fail

Let's try that again with a vox.com image URL. Copy this to clipboard:

var t = 'https://cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
  div.style.height = this.naturalHeight + 'px';
  div.style.width = this.naturalWidth + 'px';
  div.style.backgroundColor = '#aaa';
  div.style.backgroundImage = 'url(' + this.src + ')';
  console.log(div);
}
img.src = t;

Open another new tab, go to console, and paste. Here we see a big gray rectangle, and the following echoed back:

"https://cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/…x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg"

<div style="height: 613px; width: 920px; background-color: rgb(170, 170, 170);"></div>

Dude, where's our background image?

Workaround

Workaround for this seems to be quotes around the URL when setting backgroundImage:

var t = 'https://cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
  div.style.height = this.naturalHeight + 'px';
  div.style.width = this.naturalWidth + 'px';
  div.style.backgroundColor = '#aaa';
  div.style.backgroundImage = 'url("' + this.src + '")';
  console.log(div);
}
img.src = t;

Wat?

What's going on here? Is it just any URL over 150 characters getting truncated? Apparently not.

Copy this to clipboard:

var t = 'https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg?lorem=ipsum-dolor-sit-amet-consectetur-adipiscing-elit-Aenean-non-posuere-massa-Nullam-vulputate-ac-quam-mattis-commodo-Vivamus-sollicitudin-dolor-arcu-non-euismod-urna-pretium-in-Duis-faucibus-id-tellus-in-posuere';
var img = document.createElement('IMG');
var div = document.createElement('DIV');
document.body.appendChild(div);
img.onload = function () {
  div.style.height = this.naturalHeight + 'px';
  div.style.width = this.naturalWidth + 'px';
  div.style.backgroundColor = '#aaa';
  div.style.backgroundImage = 'url(' + this.src + ')';
  console.log(div);
}
img.src = t;

... and paste. Here are our results:

"https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg?lorem=ipsum-…-dolor-arcu-non-euismod-urna-pretium-in-Duis-faucibus-id-tellus-in-posuere"

<div style="height: 478px; width: 640px; background-color: rgb(170, 170, 170); background-image: url("https://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_z.jpg?lorem=ipsum-dolor-sit-amet-consectetur-adipiscing-elit-Aenean-non-posuere-massa-Nullam-vulputate-ac-quam-mattis-commodo-Vivamus-sollicitudin-dolor-arcu-non-euismod-urna-pretium-in-Duis-faucibus-id-tellus-in-posuere");"></div>

Here the URL we're using is being truncated in the console, but is being successfully applied to the background image of our new DIV.

For What It's Worth

Altering the vox.com URL so it's plain text by removing the colon shows the whole thing in console:

var t = 'https//cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg';
console.log(t);

https//cdn.vox-cdn.com/thumbor/fI-mlmFh8ECDn3kozedaHpWY88I=/0x0:3000x2000/920x613/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/55241573/683871042.0.jpg

... so it begins to look like this is something that affects URLs only.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment