Écrire dans une iframe avec JavaScript

**prilix** · 07/03/2015, 12h31

Bonjour à tous.
Je suis étudiant en seconde année de DUT, et j'ai comme projet de seconde année le développement d'une application smartphone pour accéder aux principales fonctionnalités du site de l'IUT. Pour cela, nous avons choisi d'utiliser Cordova (anciennement phoneGap http://cordova.apache.org/ pour ceux qui ne connaîtraient pas...).
Pour accéder aux différentes données du site, et sachant que nous ne pouvons utiliser que des langages clients avec Cordova, nous avons choisi de faire appel à l'iframe. Je vous arrête avant que vous parliez de cross-domain, car cordova possède une "liste blanche", qui autorise justement le cross-domain. Là où se pose mon problème, c'est que l'iframe s'affiche etc... Mais je n'arrive pas à modifier son contenu, comme par exemple remplir un formulaire.
Voici mon code :

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
<html>
<head>
   <iframe id=maFrame src="http://www.iutbayonne.univ-pau.fr/user"></iframe> 
</head>
 
<form>
<label for="edit-name">Nom d'utilisateur : <span class="form-required" title="Ce champ est obligatoire.">*</span></label>
 <input type="text" maxlength="60" name="name" id="edit-name" size="60" value="" class="form-text required" />
 <div class="description">Entrez votre nom d'utilisateur pour IUT de Bayonne et du Pays Basque.</div>
</div>
<div class="form-item" id="edit-pass-wrapper">
 <label for="edit-pass">Mot de passe : <span class="form-required" title="Ce champ est obligatoire.">*</span></label>
 <input type="password" name="pass" id="edit-pass"  maxlength="128"  size="60"  class="form-text required" />
 <div class="description">Entrez le mot de passe correspondant à votre nom d'utilisateur.</div>
</div>    
    <input type="button" value="tester" onclick="recupFrame()">
</form>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language = "javascript">
    function recupFrame()
            {
                var x = document.getElementById("maFrame"); //Récupération de l'iframe créée dans le head
                var y = (x.contentWindow || x.contentDocument); //Récupération du contenu de l'iframe
 
                login = document.getElementById("edit-pass").value; //Récupération des données du formulaire
                mdp = document.getElementById("edit-name").value; //idem
                y.getElementById("edit-name").value = login; //Sur le site, les noms des champs sont les mêmes que ceux du formulaire que j'ai créé au dessus
                y.getElementById("edit-pass").value = mdp;
            }
</script>

C'est très basique et assez moche, mais pour l'instant, je veux juste que ça marche. Je sais aussi que je n'envoie pas le formulaire à la fin, mais pour le moment j'aimerai juste remplir les champs au travers de l'iframe.

Voilà, j'espère avoir été clair, et que vous saurez m'aider....

Merci d'avance en tout cas

**SylvainPV** · 07/03/2015, 23h35

On ne peut pas modifier le contenu d'une iframe depuis la fenêtre parente. Seulement l'inverse est possible, modifier la fenetre parente à partir d'un script dans l'iframe. C'est une question de sécurité, sinon le phishing serait un jeu d'enfant.

**sekaijin** · 08/03/2015, 11h56

Un apprenti hacker
A+JYT

**Watilin** · 08/03/2015, 15h33

Envoyé par prilix

Je vous arrête avant que vous parliez de cross-domain, car cordova possède une "liste blanche", qui autorise justement le cross-domain.

Je parie que Cordova utilise CORS pour mettre en œuvre cette autorisation dont tu parles. Précisément, cette autorisation permet à un navigateur de faire des requêtes Ajax Cross-Origin (le CO de CORS) vers le domaine autorisant, depuis le domaine autorisé. Le but est de partager (Share) des Ressources du serveur vers des domaines différents via Ajax comme il était déjà possible de le faire en inclusion classique dans une iframe. Ironiquement, il existe aujourd'hui des techniques pour interdire l'inclusion de certaines pages dans une iframe. En fait le modèle de sécurité des iframes est l'exact opposé de celui d'Ajax.
Quand tu manipules une iframe via JavaScript, tout se passe côté client. Il ne s'agit pas d'obtenir des ressources venant du serveur. La différence est là. Les iframes ne sont pas concernées par les directives CORS.

Pour plus de détails sur la technologie CORS tu peux lire Using CORS sur HTML5 Rocks.

**prilix** · 09/03/2015, 09h26

Ben en fait j'ai réussi à répondre seul à ma question à force de persévérance... Il s'avère que Cordova autorise bien le cross-domain. Voici mon code javaScript, pour ceux qui auraient le même problème :

Code :

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
<script language = "javascript">
    function recupFrame()
            {
                var x = document.getElementById("maFrame"); //Récupération de l'iframe créée dans le head
                var y = (x.contentWindow || x.contentDocument); //Récupération du contenu de l'iframe
 
                login = document.getElementById("edit-name").value; //Récupération des données du formulaire
                mdp = document.getElementById("edit-pass").value;//idem
 
                if (y.document)
                {
                    y = y.document;
                    y.getElementById("edit-name").value = login;
                    y.getElementById("edit-pass").value = mdp;
                    y.getElementById("user-login").submit();
                }
            }
</script>

Ça suffit pour remplir les champs du formulaire distant et envoyer le tout, ce qui fait que l'utilisateur peut se connecter. Merci à tous pour vos réponses

Écrire dans une iframe avec JavaScript

JavaScript

Discussions similaires

Partager

Partager