Programming

Find All Images on a Page With JavaScript

One of the most common issues I see in content-managed websites is the presence of a fully-qualified image address that isn’t secure when the website itself is. When this happens, you’ll need to find all images that aren’t secure and fix them.

For example, if you are visiting https://www.example.com and there is an image http://www.example.com/image.png the browser won’t show the image, because it’s not secure like the page it has been placed on.

It’s easy to fix, because you can just add the “s” to “http”… https://www.example.com/image.png. Other fixes include using relative addresses for on-site content: /image.png, or scheme-matching addresses for cross-site resources: //www.example.com/image.png.

If you need to find all insecure images on a page, you can do it by pasting the following JavaScript snippets into the browser tools “Console” tab, or adding the equivalent scriptlet to your favourites bar.

Find All Images

Here’s the JavaScript version to find all images:

Array.prototype.map.call(document.images, function (i) { console.log('image', i.src); });

And this is the scriptlet version to find all images from your favourites toolbar:

javascript:{Array.prototype.map.call(document.images, function (i) { console.log('image', i.src); });}; void(0);

Find All Insecure Images

Here’s the JavaScript version to find all insecure images:

Array.prototype.map.call(document.images, function (i) { if (i.src.indexOf('http:') > -1) console.log('image', i.src); });

And this is the scriptlet version to find all insecure images from your favourites toolbar:

javascript:{Array.prototype.map.call(document.images, function (i) { if (i.src.indexOf('http:') > -1) console.log('image', i.src); });}; void(0);