Original bug with iframe and DOM in IE

Some time ago I discovered an interesting bug in IE, which successfully survived to the eighth version. The essence of the bug is that if you leave a page containing several iframes and then return using the back button, the contents of these very frames may be mixed.

UPD: They say FF ​​and Opera on this code also mow, but in a different way :)

The reason for this is the manipulation of the document tree using scripts. Or rather, the transfer of the iframe object to another place in the document, with a change in the linear order of the frames.

After some research, the following pattern is found:

1. leaving the page, IE remembers links in frames bypassing the current (modified) document tree
2. returning to the page, the source tree is crawled on the subject of searching for frames and the addresses saved in the last step are loaded into them. since the frame order is different, it turns out porridge
3. the script works, the frames fall into place, but the contents in them are already mixed

As usual, one example is better than a thousand explanations. On the next page, simply click “Test link” and then go back.

Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >

1. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
2. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
3. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
4. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
5. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
6. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
7. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
9. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
10. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
11. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >
12. Copy Source | Copy HTML < html >< body > < div id ="container"> < iframe src ="http://google.com/" id ="frame1"></ iframe > < iframe src ="http://microsoft.com/"></ iframe > < iframe src ="http://habrahabr.ru/"></ iframe > </ div > < div >< a href ="http://google.com/"> Test link </ a ></ div > < script type= "text/javascript" > document.getElementById( "container" ).appendChild(document.getElementById( "frame1" )); </ script > </ body ></ html >

')
By the way, it seems that the bug is reproduced only in IE and (interestingly) was initially discovered on one of the microsoftware sites :)