Thursday, October 11, 2018

Detecting Image().src = 'URL' changes

Thesedays I am working a lot with image beacons, which are basically prefetched image pixels sent from a page for tracking reasons.
It's very hard to detect when these pixels are trying to be requested, most of the testing environments are going to listen to a mock server and see if an image request was made or not.
However, with the new Reflect API you are able to listen to simple assignments like new Image().src = 'URL'.
Obviously this won't work in browsers which don't support Symbol or Proxy, but is a good way to test image beacons in fairly modern browsers.
This approach was basically stolen from this blog post: https://www.phpied.com/intercepting-new-image-src-requests/
Have fun playing around with this fiddle:

See the Pen Image beacon testing by Adam Nagy (@nagyadam2092) on CodePen.

No comments:

Post a Comment