Continuously assigning the same value to the `src` attribute of an img element keeps making new requests
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: senatorpalpatine, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
Steps to reproduce:
Ran the code below.
The random on the return is to show you it doesn't matter if you return or not at all, the code runs forever and hangs the page.
<html>
<head>
</head>
<body>
<h1>BEFORE</h1>
<img id="that" src="https://d3ndy0qe2driqb.cloudfront.net/test.jpg" onerror="handler()">
<h2>AFTER</h2>
<script>
function handler(){
var mine=document.getElementById('that');
mine.setAttribute('src','https://d3ndy0qe2driqb.cloudfront.net/test.png');
// return all the ways possible randomly to show it doesn't matter how you return
var x=Math.floor(Math.random()*3);
if(x==0)return true;
else if(x==1)return false;
}
</script>
</body>
</html>
Actual results:
The <img> starts with an image from cloudfront giving back a HTTP 403 so it moves to its "onerror" handler where another image is set that also gives an HTTP 403.
Then no matter what this handler returns the handler is run again and again.
Using up large amounts of compute resources.
Expected results:
The return value of an event handler should change whether it propagates?
If not, then the only want to prevent an onerror from happening again is provide a valid image to it.
|
||
Comment 1•5 years ago
|
||
You keep reassigning a src attribute, and assigning to the src attribute keeps starting a new load. This is unrelated to the return value of the error event, and other browsers (Chrome) do exactly the same thing. To avoid this, put in:
if (mine.getAttribute('src').lastIndexOf(".png") != -1) {
return;
}
or similar, before calling setAttribute("src", ...) again.
As for the error event, if you want to stop it propagating you need a return inside the attribute, ie onerror="return handler()" (but as noted above, that alone won't fix your page.
I think the src behaviour is per spec, because the standard says in when to obtain images that
When obtaining images immediately, the user agent must synchronously update the image data of the img element, with the restart animation flag set if so stated, whenever that element is created or has experienced relevant mutations.
and the relevant mutations explicitly includes:
The element's src attribute is set to the same value as the previous value. This must set the restart animation flag for the update the image data algorithm.
And the definition of "update the image data" mentions a "list of available images" which caches successful requests, but no cache for broken requests.
You could easily imagine a server where an image may not initially be available but is eventually created, where the webpage relies on this behaviour, so changing it is probably not web-compatible.
Description
•