Iframe schizophrène ou console lunatique ?

**Watilin** · 20/06/2017, 20h45

Bonsoir les amis,

j’ai eu l’idée saugrenue de voir s’il était possible de récupérer des données autres que HTML au moyen d’une iframe. Pour ça j’ai lancé mon serveur local et écrit un petit script pour envoyer du JSON avec le bon Content-Type.

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
header('Content-Type: application/json; charset=utf-8');
?>{
  "pommes": 42,
  "poires": 17,
  "chocolat": true
}

Puis une page HTML à laquelle j’accède via mon localhost :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Iframe avec du contenu pas HTML</title>
</head>
<body>
 
<iframe src="sample.json.php"></iframe>
 
<script> 'use strict';
 
document.addEventListener('DOMContentLoaded', () => {
  let $iframe = document.querySelector('iframe');
  let w = $iframe.contentWindow;
  console.log(w);
  if (w) {
    let doc = $iframe.contentDocument;
    console.log(doc);
    if (doc) {
      console.log(doc.documentElement);
      console.log(doc.documentElement.outerHTML);
    }
  }
});
 
</script>
</body>
</html>

La console m’affiche ceci sous Firefox :

Code console :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Window -> http://localhost/tests/iframes/sample.json.php
HTMLDocument
<html>
<html><head></head><body></body></html>

… Et sensiblement la même chose sous Chrome.
Apparemment, je me retrouve avec un HTML stub comme lorsque le script est bloqué par la same origin policy.

Cependant, les choses deviennent vraiment bizarre quand

je fais clic-droit sur ce Window dans la console
« stocker en tant que variable globale » / “store as global variable”
j’évalue temp0.document.documentElement.outerHTML

Voilà ce que j’obtiens alors :

Code console :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
"<html><head><link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css" title="Retour à la ligne automatique"></head><body><pre>{
  "pommes": 42,
  "poires": 17,
  "chocolat": true
}
</pre></body></html>"

Le résultat est similaire sous Chrome.

Du coup j’ai tout un tas de questions et je voudrais savoir si vous avez eu des expériences similaires. Est-ce un bug de la console ? J’ai le même comportement sous Firefox et sous Chrome ; est-il possible que ce soit le même bug sur les deux consoles par une troublante coïncidence ? Ou un comportement attendu ? Dans ce cas, est-ce documenté quelque part ?

Et finalement, est-il possible (même c’est une mise en œuvre stupide) d’accéder à du contenu non HTML via une iframe ?

Merci d’avance, et désolé pour les nœuds au cerveau

**danielhagnoul** · 20/06/2017, 23h09

Sans JS, avec Chrome -- Version 60.0.3112.32 (Build officiel) beta (64 bits), et avec <iframe src="sampleJSON.php"></iframe> j'obtiens l'affichage direct dans l'iframe.

Nom : Capture.PNG
Affichages : 79
Taille : 12,1 Ko

Nom : Capture.PNG
Affichages : 79
Taille : 12,1 Ko

Et dans l'onglet "Elements" je trouve le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<pre style="word-wrap: break-word; white-space: pre-wrap;">{
  "pommes": 42,
  "poires": 17,
  "chocolat": true
}</pre>

Iframe schizophrène ou console lunatique ?

JavaScript

Discussions similaires

Partager

Partager

Iframe schizophrène ou console lunatique ?

JavaScript

Discussions similaires

Partager

Partager

Iframe schizophrène ou console lunatique ?