Search code examples
javascripthtmlimagehtml-emailemail-client

Best way to block images in email rendered in browser?


I've created a simple web email client.

I want to "block" (i.e. not show) images whose protocol is http (vs https) because my site is served over ssl and I don't want insecure content warnings.

What's the best way to go about this? Should I traverse the email dom and set the image href to "" (ie. empty string)?

Is there a better way?

I should note that this is a temporary measure. In the future I will set up an image proxy/cache system similar to gmail's.


Solution

  • I've looked at the way it's done in Outlook, gmail, yahoo, etc. Basically they just use a placeholder image (hosted on some cdn) that's just a small grey box, and they let the size attributes of the img tag scale it to the right size.

    So all they do is change the url of the img tag to be the url of the grey box.

    A smart variation if you want to eventually show the correct image (enable images) is to store the url of the real image location as part of a query string that can be parsed and used later to get the real image:

    http://mycdn.com/placeholderimage.jpg?http://realcdn.com/therealimage.jpg