�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

Vue hybride

Discussions similaires

Partager

Partager