[JS] Appel de script distant

[qui.dominatur]

Bonjour,

J'ai un petit soucis de développement, j'explique mon problème :

J'ai une page de mon site contenant un unique formulaire de texte dont je traite ensuite la valeur en AJAX afin d'avoir un retour sur la même page. Jusqu'ici tout vas bien.

Ce que je voudrais faire c'est pouvoir intégrer ce petit formulaire sur n'importe quel autre site. C'est à dire, avoir :

//une ligne de déclaration de variable pour savoir par exemple de quel site proviendra l'appel (ça c'est bon)

//une ligne d'appel d'une page distante ou sont écrits tous mes scripts de traitements (là je vois pas bien comment faire)

//une ligne avec mon formulaire et le bouton d'envoie

Ca pourrait ressembler sûrement au bouton Like de facebook qui doit charger des scripts facebook depuis n'importe où ou encore le script de G analytics qui envoie une clé d'identification pour ensuite traiter les informations du site.

L'idée est de pouvoir implémenter mon module n'importe ou avec seulement quelques lignes à inscrire dans le code du site, tous le reste est chargé depuis mon domaine. En php je vois bien comment faire mais d'un point de vue optimisation serveur ça me semble très limite. En javascript, je ne vois pas comment faire.

Les scripts que je veux appeler sont :

- la lib jquery ;

- le script qtip (jquery)

- le script ajax de traitement php

Pendant que j'écrivais j'ai eu une idée : si j'appel simplement un fichier JS qui contient une fonction AJAX qui elle-même appellera ensuite tous mes scripts ça peut marche. Ca ne fait qu'une fonction à appeler depuis un autre domaine, tous le reste est traité de mon coté. Je regarde ;-) Si vous avez des idées, merci beaucoup !

J'espère que c'est clair même si j'ai un doute.

Bonne journée !

[maximeK]

Dommage mais ce n'est pas possible, ci j'ai bien compris :

Tu a une page sur un domaine A contenant un formulaire et du JS

Tu a une page sur un domaine B contenant ton code et tu veut intégrer ton formulaire pour executer le JS de ton autre dommaine

Ceci est une faille de sécurité XSS ( cross site scripting ) et c'est bloqué depuis la version 6 de FF si j'ai bonne mémoire.

Par contre tu peux faire un module formulaire, je m'explique :

On va faire ca en Jquery puisque tu a la lib par conter ton fichier PHP devra etre sur le meme domaine ( la doc jquery le dis :) ) .

Tu te crée un formulaire.js :

Dedans tu va incorporer ton code HTML avec tes actions JS exemple :

Fleme d'indenter le code mais tu le met dans une variable que tu injectera apres :)

<form id="auth" method="post" name="auth" action="">				<fieldset>						<legend>Authentification</legend>						<label for="iden">Identifiant:</label>						<br />						<input type="text" name="iden" id="iden" class="text" size="20" />						<br />						<label for="mdp">Mot de Passe:</label>						<br />						<input type="text" name="mdp" id="mdp" class="text" size="20" />						<br /><br />						<button type="submit" class="button positive"> Connexion</button>				</fieldset>		</form>		<div id="success" class="success" style="display:none;"></div>jQuery(document).ready(function () {$('#formulaire').html(taVariableContenantTonForm);$("form#auth").submit(function() {	var identifiant = $('#iden').attr('value');	var mdp		 = $('#mdp').attr('value');	$.ajax({		type: "POST",		url: "action.php",		data: "&iden="+ identifiant + "&mdp=" + mdp,		success: result,		dataType: "json"		});	return false;});});function result(data){var resultat = '<p>Résultat: <b>'+data.identifiant+'</b> vous êtes connecté avec le mot de passe suivant <b>'+				data.mdp+"</b><br />n L'exemple est finit retourné sur le site <a class='positive' href='"+data.url+"'>Dollois Connection</a></p>";$('form#auth').hide();$('div#success').fadeIn("slow");$('div#success').append(resultat);}

Apres tu peux faire ce que tu veux pour intégrer ton script de tooltips.

Ce qui est cool avec ce code c'est que tu integre ton JS et pour le lancer tout simplement tu rajoute une div avec l'ID formulaire :)

exemple du formulaire pris sur http://www.dollois.com/2009/12/utilisation-de-jquery-pour-soumettre-un-formulaire/

[qui.dominatur]

Bonjour,

Merci de ton aide. Il est effectivement possible que ce que je veux soit difficile à faire. Si j'ai bien compris ton exemple, ce n'est pas tout à fait ça.

En fait, je voudrais : depuis un site A, envoyé une variable X sur le site B, la traité sur le site B et renvoyé le résultat sur le site A. Ca normalement, avec du AJAX cross-domain ça ne pose pas trop de problème.

Mais, là ou j'ai plus de mal c'est que, pour ne surcharger le site A en code, les scripts AJAX et autres soit appelés depuis le site B.

Par exemple :

<script type="text/javascript"> (function() {     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;   ga.src = 'http:/DOMAINEB.fr/module/module.js';   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script><div id="show"></div>

J'aimerai ne mettre que ce bout de code sur le site A. Et ensuite avoir sur domaineB.fr/module.js mes fonctions jquery et ajax. Mais, comme je ne peux pas intégrer la lib jquery dans le .js (trop lourd à mon sens) j'ai mis dans module.js une fonction AJAX qui m'appelle la page module.php ou là je peux charger toutes mes librairies. Sauf que les scripts présent sur module.php ne s'exécutent effectivement pas...Comment faire ? that is the question.

Mais plus je me relis, moins je suis sûr de m'y prendre comme il faut...

Merci de votre aide .

[maximeK]

Okay alors on va faire comme tu le souhaite :)

Le probleme est que pour une question de sécurité ton domainte B n'est pas autorisé a répondre a ton domaine A.

1er fonction pour appeler un script en XSS

2eme fonction récuperer le traitement de module.php ( note que grace a la 1ere fonction, on ne gere que l'événement onload :) )

function getXDomainRequest() {var xdr = null;if (window.XDomainRequest) { xdr = new XDomainRequest();} else if (window.XMLHttpRequest) { xdr = new XMLHttpRequest();} else { alert("Impossible de gérer le XSS...");}return xdr;}

var xdr = getXDomainRequest();xdr.onload = function() {alert(xdr.responseText);}xdr.open("GET", "http://www.DOMAINEB.fr/ajax/module.php");xdr.send();

Pense a rajouter ces 2 lignes dans ton code php ( domaine B )

header("Content-Type: text/plain");header("Access-Control-Allow-Origin: *");

Attention : header("Access-Control-Allow-Origin: *"); permet a tous le monde de venir titilé ton php tu peux affinée :

header("Access-Control-Allow-Origin: pcinpact.com");

Ici j'autorise pcinpact.com et tout ces sous domaine.

Mais bon tu ne peux pas traitez des donnez sur un autre domaines et intégrer le résultat dans ton site, tu ne peux qu'integrer un fichier Js distant ( comme google facebook... ) et de facon ASYNCHRONE

Tu a la methode pour le faire, mais ca marcheras pas ^^

Mais si tu veux complexifié la chose va voir par la : http://cmsnsoftware.blogspot.fr/2012/02/how-to-use-cross-domain-ajax-request.html#2

[qui.dominatur]

Bonjour,

Merci de ta réponse. Désolé de ne pas avoir donné de news plus tôt mais je cherchai à fond la bonne solution.

Donc, si quelqu'un a un jour le même problème voici comment j'ai fait, pour en 5 lignes de codes, faire deux traitements ajax sur un serveur distant.

J'appel un fichier JS avec une div pour afficher mon retour comme ceci, c'est donc le seul code qui est sur le domaine A :

<script type="text/javascript"> (function() {  id_marchand = 'exemple_marchand'; id_product = 'jacynthe_pot';    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;   ga.src = 'http://domaineB/module/module.js';   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script><div id="show"></div>

Et ensuite dans mon fichier module.js :

J'ai une première fonction AJAX cross-domain qui avec id_marchand et id_product me renvoie en JSON des variables depuis la BDD du domaine B.

Dans le retour JSON, j'ai aussi le code HTML de mon formulaire. Cela me permet donc depuis mon module.js de générer la page à afficher ainsi que les variables qui m'intéressent.

Quand j'envoie le formulaire, j'ai une deuxième fonction AJAX cross-domain, inséré dans le module.js qui utilise les variables récupérées en JSON. Ensuite c'est du classique.

Mon problème étant que je ne n'arrivais pas à récupérer de façon exploitable les variables depuis ma première fonction AJAX. Grâce au JSON, je peux les exploiter facilement.

Merci de votre aide,