Iframe Sandbox Test

The image below is in a sandboxed iframe using srcdoc, which allows us to resize the image to fit. Sandboxed iframe should prevent cookies from being read or set.

How This Works

  // we need at least an image URL to start
  // if pinmarklet has already scraped this image from the page we know its height and width
  // otherwise we will arbitrarily make a 236x236 iframe and show the image resized to 236px wide by whatever tall
  const data = {
    src: "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/dog_cool_summer_slideshow/1800x1200_dog_cool_summer_other.jpg",
    height: 1200,
    width: 1800
  }
  // width of our iframe
  const targetWidth = 236;
  // start the tag
  const fr = document.createElement('IFRAME');
  // sandbox to block cookies
  fr.sandbox = '';
  fr.style.height = targetWidth + "px";
  // if we know dimensions we can style height to contain the full image
  if (data.height && data.width) {
    fr.style.height = data.height * targetWidth / data.width + "px";
  }
  // slam the entire HTML source object in via srcdoc
  fr.srcdoc = `<html><head><style>body{background:transparent;overflow:hidden;padding:0;margin:0;}<body><img src="${data.src}" width="${targetWidth}" /></body></html>`;
  // add to page
  document.body.appendChild(fr);