5568 sujets

Sémantique web et HTML

IFrame + form + Mozilla Firefox = bug ?

Pages :
Bonjour,

Je dois utiliser un iFrame pour afficher le contenu d'une page d'un autre site et d'un serveur différent.
Dans cette page il y a un formulaire tout simple utilisant une méthode GET et un target _self. Celui-ci sert donc à affiner ou modifier le contenu de cette même page.

L'iFrame fonctionne parfaitement sur chrome ou IE. Mais sur firefox, j'ai un problème.. Dès que je clic sur le bouton envoyer du formulaire, soit l'iFrame disparait, soit il ne se passe rien. Dans tous les cas la requête n'est pas envoyé. Avec firebug, je remarque qu'une classe est automatiquement ajouté par firefox à l'iframe avec un nom de classe étrange comme "tafssjnqzihydocyqhqj" lorsque je clic sur envoyer...

Le css de cette classe est le suivant : 
.tafssjnqzihydocyqhqj {
  -moz-binding: url("chrome://global/content/bindings/general.xml#foobarbazdummy") !important;
}


Dans certain cas le code css est : 

.tafssjnqzihydocyqhqj {
  -moz-binding: inherit;
}


Même en supprimant la classe, cela ne fait pas réapparaitre l'iframe. Son code est bien là, mais non affiché.

Ma version de Firefox est 27.0.1

Est-ce un phénomène connu ? Je n'ai rien trouvé à ce sujet...

Toute aide est la bienvenue.
J'ai trouvé une piste.. Cela vient apparemment de adBlock..

J'ai essayé de changer le nom du form et la valeur de GET.. Mais pas moyen qu'adblock le laisse passer..

Par contre en method "post", ça passe.. ce qui ne m'arrange pas tellement..

Une idée pour empecher adblock de bloquer mon FORM ?
Bonjour,

Les iframes, c'est pas beau :o

Après, tout dépends ton utilisation. Un formulaire sur la page ne suffirais pas ?
De l'ajax ? C'est bien l'ajax Smiley langue

ADBlock évite les requetes cross domains surtout. Mais ton utilisation de formulaire au sein d'une iFrame fait beaucoup penser à de la marque blanche, donc de la publicité. Je pense qu'il faut que tu revois ta facon de faire.
totopsy a écrit :
Bonjour,

Les iframes, c'est pas beau :o

Après, tout dépends ton utilisation. Un formulaire sur la page ne suffirais pas ?
De l'ajax ? C'est bien l'ajax Smiley langue

ADBlock évite les requetes cross domains surtout. Mais ton utilisation de formulaire au sein d'une iFrame fait beaucoup penser à de la marque blanche, donc de la publicité. Je pense qu'il faut que tu revois ta facon de faire.


Merci pour ta réponse,

Tu vois juste, c'est effectivement pour la mise en place d'une marque blanche. Je ne sais pas quelle est la proportion des utilisateurs de firefox qui ont adblock, mais il me faut une solution pour parer cela ^^ car certe c'est une pub en soit, mais ça permet surtout aux webmaster de proposer un service supplémentaire sur leur site.

Le formulaire sur la page d'origine pourrait sans doute être une solution, mais le problème c'est coté maintenance.. Ce formulaire va évoluer régulièrement, je ne peux pas demander tous les x jours aux webmaster de le mettre à jour ^^.

Peut-être existe t-il la possibilité d'inclure le formulaire via une autre solution ? php include ne fonctionne pas je suppose à partir d'un autre serveur ?

Tu fais allusion à ajax ? Je ne connais pas trop ce langage, serait-ce la meilleure solution pour moi ? Dois-je chercher coté "iframe ajax" ?
D'accord, je vois tout à fait l'utilisation que tu en as.

Alors, le plus simple pour toi, c'est de proposer une "API". Terme grossier.

Concrètement :

Tu développe une page, que le webmaster va intéroger (/api.php). Celle la, va envoyer des données en JSON.

Nombre de champs, et le détail des champs. Ton formulaire, sous forme JSON (en gros). Et tu créer une classe, qui englobe le tout, et construit le formulaire grâce aux données récupérées en JSON.

Le webmaster n'aura qu'a appeler une méthode de la classe, avec son API key par exemple, afin qu'il soit autorisé et authentifié. Cela permet de faire des stats, nombre de vu, ...

Et tu envoi le résultat de ton formulaire vers ton serveur.

Si jamais, le webmaster ne veux pas que tu redirige les visiteurs chez toi, tu proposes une autre fonction dans ta classe, qui va faire une requête depuis son serveur, et donc ne pas perdre le client (Ou de l'ajax).

PS : concernant les % d'utilisation d'adblock, je vais essayer de développer un petit truc pour compter tout cela.

Utile : cURL / file get contents.
Modifié par totopsy (10 Mar 2014 - 12:55)
totopsy a écrit :
D'accord, je vois tout à fait l'utilisation que tu en as.

Alors, le plus simple pour toi, c'est de proposer une "API". Terme grossier.

Concrètement :

Tu développe une page, que le webmaster va intéroger (/api.php). Celle la, va envoyer des données en JSON.

Nombre de champs, et le détail des champs. Ton formulaire, sous forme JSON (en gros). Et tu créer une classe, qui englobe le tout, et construit le formulaire grâce aux données récupérées en JSON.

Le webmaster n'aura qu'a appeler une méthode de la classe, avec son API key par exemple, afin qu'il soit autorisé et authentifié. Cela permet de faire des stats, nombre de vu, ...

Et tu envoi le résultat de ton formulaire vers ton serveur.

Si jamais, le webmaster ne veux pas que tu redirige les visiteurs chez toi, tu proposes une autre fonction dans ta classe, qui va faire une requête depuis son serveur, et donc ne pas perdre le client (Ou de l'ajax).

PS : concernant les % d'utilisation d'adblock, je vais essayer de développer un petit truc pour compter tout cela.

Utile : cURL / file get contents.


Merci pour ces détails Smiley smile .
ça n'a pas l'air simple, mais ça me donne une éventuelle piste à exploiter..

Ce que j'avais fait jusqu'à présent, c'est exploiter le flux rss/xml disponible sur le site. Que j'ai mis en forme via un outil "RSStoHTML". Puis je mettais le résultat dans l'iframe.

En tout cas il serait intéressant de connaitre la proportion des ADBlock.. Tu es en mesure d'établir des statistiques sur combien de visiteurs ?
Ce n'est pas si compliqué que ca, et cela te permet de faire des MAJ de ton coté.

Les webmaster n'aura rien a modifier. Ou, au pire remplacer un fichier PHP (ta classe). Si jamais tu veux ajouter des fonctionnalitées.

Après, j'ai déja vu d'autres solutions encore plus puissantes. Ou en gros, ta classe est téléchargée. SOAP. Ca peut-être vraiment intéréssant. C'étais utilisé dans le cadre d'une API permettant de surtaxer des # de téléphones.

Edit : Concernant les % d'adblock, je n'ai rien qui ai beaucoup de visiteurs en ligne.
Je ferais la demande sur le forum, afin d'avoir des stats.
Modifié par totopsy (10 Mar 2014 - 14:20)
Je ne suis pas trop développeur, plutôt intégrateur.. Donc je vais surement un peu (ou beaucoup) galérer ^^. Mais l'idée est séduisante, alors je vais m'y tenter Smiley lol . De ce que j'ai compris au premier abord, SOAP c'est l'architecture pour une API complexe.. Le plus simple serait en "REST"..

J'ai trouvé assez peu d'éléments en français sur le sujet.. Beaucoup en anglais. Mais une petite vidéo sympa qui aborde déjà bien le sujet et en Français pour ce que ça intéresse au passage : http://www.dailymotion.com/video/xlafyo_php-creer-comprendre-une-api_tech

Je me demande tout de même, si une fois cet API terminé, ça ne vaut pas le coup que je conserve la version iFrame en plus et éventuellement y intégrer une détection de adblock. Car si j'ai bien compris, les webmasters devront être en mesure d'intégrer le fichier client php sur leur site.. C'est peut-être plus compliqué pour eux qu'ajouter un simple iFrame.. Je pense notamment à ceux qui utilisent des CMS type wordpress.
j'avance doucement mais surement.

J'ai mis en place une page api.php qui interroge la bdd et une page client qui récupère le résultat sous forme JSON via une fonction jQuery comme dans la vidéo postée précédemment.

Jusqu'ici tout va bien.. Sauf que... j'ai un résultat mais pas le résultat attendu ^^.

Ma requête concerne bien toutes les colonnes de la BDD dans la table spécifiée.

function getProducts(){
// on crée la requête SQL
	$sql = mysql_query("SELECT * FROM `maTable`");
	$products = array();
	while($product = mysql_fetch_array($sql)){
		$products[] = $products;
	}
	$products = json_encode($products);
	echo $_GET['jsoncallback'].'('.$products.')';
}


Et ça me renvoi le résultat suivant :
?([[],[[]],[[],[[]]],[[],[[]],[[],[[]]]],[[],[[]],[[],[[]]],[[],[[]],[[],[[]]]]],[[],[[]],[[],[[]]],[[],[[]],[[],[[]]]],[[],[[]],[[],[[]]],[[],[[]],[[],[[]]]]]]])

Je suppose que c'est la forme tableau que prend JSON..

J'ai donc ajouté un var_dump($products); dans la boucle while.

Ce qui me donne comme résultat:

array(1) { [0]=> array(0) { } } array(2) { [0]=> array(0) { } [1]=> array(1) { [0]=> array(0) { } } } array(3) { [0]=> array(0) { } .....

Mais toujours pas les données de ma bdd affichées.

Si je met dans la boucle while un "echo $products;"

La page API me renvoi bien 6 fois le mot "Array" . 6 étant bien le nombre de ligne que j'ai dans la table, donc ça semble bon de ce coté. mais toujours pas réussi à récupérer les données.
Modérateur
bonjour


…
    $products[] = $product; // sans le "s"
…

ça devrait déjà donner quelque chose de mieux Smiley langue

Sinon mysql_query et mysql_fetch_array sont obsolètes. Il faut utiliser PDO ou mysqli à la place.
kustolovic a écrit :
bonjour


…
    $products[] = $product; // sans le "s"
…

ça devrait déjà donner quelque chose de mieux Smiley langue

Sinon mysql_query et mysql_fetch_array sont obsolètes. Il faut utiliser PDO ou mysqli à la place.


Merci Smiley smile . Bizarrement dans la vidéo il a ce "s" et ça ne semble pas poser de prob.. étrange lol.

Maintenant j'obtiens des données Smiley lol


J'ai fais un test avec mysqli comme conseillé. J'ai d'abord cru naïvement qu'il me suffisait d'ajouter un "i" à la fin de mysql Smiley lol . Mais non ça aurait été trop simple lol. Donc inspiré par http://www.php.net/manual/fr/mysqli-result.fetch-array.php ...J'obtiens rien de bien concluant..

C'est obsolète comme méthode ? Donc voué à disparaitre dans les prochaines maj de php ?

<?php



$mysqli = new mysqli("localhost", "xxx", "xxx", "xxx");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}


if(function_exists($_GET['method'])){
	$_GET['method']();
}

function getProducts(){
	$sql = "SELECT * matable";
	$result = $mysqli->query($sql);
	$products = array();
	while($product = $result->fetch_array()){
		$products[] = $product;
	}
	$products = json_encode($products);
	echo $_GET['jsoncallback'].'('.$products.')';
}


?>
Version qui ne me fait plus d'erreur 505, mais pas de résultat.. ou plutot que "([])"

in progress 

<?php



$link = mysqli_connect("localhost", "*****", "*****", "*****");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}


if(function_exists($_GET['method'])){
	$_GET['method']();
}

function getProducts(){
// on crée la requête SQL
	$sql = "SELECT * matable";
	$result = mysqli_query($link, $sql);
	$products = array();
	while($product = mysqli_fetch_array($result, MYSQLI_ASSOC)){
		$products[] = $product;
		//echo $product['content'];
	}
	$products = json_encode($products);
	echo $_GET['jsoncallback'].'('.$products.')';
}


?>
Après moulte tests sans résultat pour tenter d'avoir un code à jour avec Mysqli.. J'ai trouvé un outils de conversion https://github.com/philip/MySQLConverterTool

Il m'a sortie un code fonctionnel, mais pourriez-vous me donner votre avis ? 



 <?php



($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost',  '*********',  '**********'));


((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE **************"));



if(function_exists($_GET['method'])){
    $_GET['method']();
}

function getProducts(){

    $sql = mysqli_query($GLOBALS["___mysqli_ston"], "SELECT * FROM matable");
    $products = array();
    while($product = mysqli_fetch_array($sql)){
        $products[] = $product;
        //echo $product['content'];
        var_dump($product);
    }
    $products = json_encode($products);
    echo $_GET['jsoncallback'].'('.$products.')';
}


?>


Le convertisseur me dit également:
[Line 8] mysql_select_db(string database_name [...]) is emulated using mysqli_query() and USE database_name. This is a possible SQL injection security bug as no tests are performed what value database_name has. Check your script!

Si je comprends bien, je risque des injection SQL.. car le nom de la base de donnée n'est pas sécurisé ? Je ne comprend pas bien... comment combler cette faille et en quoi le fait de "vérifier" le nom de la base de donnée peut-il sécuriser quoi que ce soit?

J'ai remplacé

($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost',  '*********',  '**********'));


((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE **************"));


par 

($GLOBALS["___mysqli_ston"] = mysqli_connect("localhost", "*****", "*****", "***"));



Cette fois je n'ai plus l'alerte.. Malgés tout, pourriez-vous me dire si ce code est propre et sécurisé ?
Et bien je voit que tu as pas mal avancé, et c'est très bien.

oublie mysqli Smiley cligne Fait tout tes tests avec les fonctions mySQL qui fonctionnent, et on s'occuperas d'utiliser PDO ou MySQLi plus tard. Cela de changeras que peu de choses.

Pense à bien découper ton code en fonctions. Je pense par la, à, une fonction qui te retourne le tableau de résultats. Comme cela, tu n'aura que la fonction de fetch SQL à remplacer lors du passage à PDO/mysqli.

Il faut que ton code soit générique, et que l'on comprenne bien ce que tu fais à chaque étape. Et ses étapes peuvent être délimitées par des fonctions.

Pour le moment, repart sur ton mysql, fini le fetch des données, et prépare les à l'envoi. Après, tu passeras sur le coté REST afin de récupérer tes résultats, et les traiter.

Pour les clients de type wordpress, c'est vrai que cela peut poser problème, mais si vraiment tu le veux, tu développes un petit module WP, comme cela, tu montes en compétence! En attendant, tu garde ton iFrame pour ce type de cas.

De plus, évite les outils de conversion. Si tu ne comprends pas ce que tu fais, ou comment cela fonctionne, c'est une très mauvaise pratique, et tu n'apprends rien.

HS : As-tu un / des sites à fort traffic afin de regarder le % d'adblock sur le Web ?
Modifié par totopsy (11 Mar 2014 - 09:45)
totopsy a écrit :


Et bien je voit que tu as pas mal avancé, et c'est très bien.

oublie mysqli Smiley cligne Fait tout tes tests avec les fonctions mySQL qui fonctionnent, et on s'occuperas d'utiliser PDO ou MySQLi plus tard. Cela de changeras que peu de choses.

Pense à bien découper ton code en fonctions. Je pense par la, à, une fonction qui te retourne le tableau de résultats. Comme cela, tu n'aura que la fonction de fetch SQL à remplacer lors du passage à PDO/mysqli.

Il faut que ton code soit générique, et que l'on comprenne bien ce que tu fais à chaque étape. Et ses étapes peuvent être délimitées par des fonctions.

Pour le moment, repart sur ton mysql, fini le fetch des données, et prépare les à l'envoi. Après, tu passeras sur le coté REST afin de récupérer tes résultats, et les traiter.

Pour les clients de type wordpress, c'est vrai que cela peut poser problème, mais si vraiment tu le veux, tu développes un petit module WP, comme cela, tu montes en compétence! En attendant, tu garde ton iFrame pour ce type de cas.

De plus, évite les outils de conversion. Si tu ne comprends pas ce que tu fais, ou comment cela fonctionne, c'est une très mauvaise pratique, et tu n'apprends rien.

HS : As-tu un / des sites à fort traffic afin de regarder le % d'adblock sur le Web ?



Merci pour les encouragements Smiley biggrin

J'avoue que l'outil de conversion j'adhère moyennement, mais j'étais vraiment à court d'idée et ne savez pas s'il fallait s'y prendre en amont ou non, mais tu m'as répondu en confirmant qu'on peut voir ça plus tard au pire..

J'ai passé quelques heures hier soir à tenter d'afficher une des valeurs récupérées sur la page client. Avec des json_decode, des jquery json.get en veut tu en voilà Smiley lol . Sans succès malheureusement. Je pouvais afficher mon tableau sans problème dans la console, ou en faisant un echo sur un file_get_contents dans le body. Mais pas moyen de mettre en forme tout ça..

Je note autre chose.. Avec la version classique mysql.
Je récupère un json qui a cette forme:
array(22) { [0]=> string(1) "1" ["id_category_comment"]=> ....

avec la version mysqli au code peut-être un peu bancal généré, je récupéré un json plutot comme :
([{"0":"1","id_category_comment":"1","1":"151....


Mais tu as raison, je vais déjà me concentrer sur mes requêtes.

Je vais commencer par tenter de récupérer les données pour la création du formulaire de recherche. .

Le but du formulaire étant de récupérer les catégories présente sur le site et de permettre à l'utilisateur d'en change facilement.

Ces catégories sont gérées par 2 tables.

Dans l'une je récupère les détails : ID, URLREWRITE, NOM

Dans l'autre je récupère 'id_parent', afin de savoir quelle catégorie est parente de l'autre.. Ce qui devrait me permettre de les trier dans un menu déroulant.

(dans l'iframe, j'avais fait un menu "chained" à l'aide d'un javascript, c'est à dire que l'utilisateur choisissait la "marque", puis le menu déroulant "modèle" s'activait, puis un menu "sous catégorie"... Sauf que c'était tout en dur sans connexion à une bdd, plus simple à mettre en place, mais à long terme beaucoup plus de maintenance... )

Comment vais-je m'en sortir avec ça ^^...


Je vais commencer par faire une fonction getCategories

function getCategories(){
$sql = mysql_query("SELECT * FROM table1, table2");
$categories = array();
while($category = mysql_fetch_array($sql)){
$categories[] = $category;
}
$categories = json_encode($categories);
echo $_GET['jsoncallback'].'('.$categories.')';
}

J'ai donc mis les deux tables dans la requete, mais c'est peut-être une erreur . Pour le moment la requete me renvoie un truc plutot enorme.. Sachant que j'ai 138 catégories et que les deux tables confondues j'ai 18 colonnes. J'ai bien sûr un identifiant commun entre ces deux tables pour faire une liaison.

D'après l'onglet Réseau HTML de firebug, la requete fait 9.9Mo :o.

Un peu beaucoup non ?


Je dois pouvoir me passer de pas mal de colonne inutiles..
Je tente de cibler un peu plus ma requête (merci http://sqlpro.developpez.com/cours/sqlaz/jointures/)

function getCategories(){
$sql = mysql_query("SELECT name, link_rewrite, id_parent FROM table1, table2 WHERE table1.id_category = table2.id_category");
$categories = array();
while($category = mysql_fetch_array($sql)){
$categories[] = $category;
}
$categories = json_encode($categories);
echo $_GET['jsoncallback'].'('.$categories.')';
}

Voilà qui est mieux... 12.6ko Smiley lol

Mais comment traiter tout ça maintenant :o.. Sachant que dans les objets de ma console, je peux difficilement distinguer les éléments à première vue...

Pour chaque objet j'ai 3 lignes, qui je suppose correspondent (par ordre de la requete?) à name, link_rewrite, id_parent. Du coup je n'ai pas de id_category dans cette histoire... Et si je le met dans le SELECT de ma requete je n'ai plus aucun résutat..
De plus dans ces objets à 3 lignes, j'ai parfois la première ligne ou c'est écrit "NULL". Pourtant aucun champs "name" n'est vide dans la bdd

Voilà où j'en suis Smiley smile
Petite progression..

J'ai maintenant mes objets avec l'id_category.. grâce au sur-nommage dans la requête SQL..
Je pense avoir compris pourquoi certaine données dans les objets ne sont pas affichées dans la console, ou en tout cas retourne la valeur 'NULL" . Apparemment c'est uniquement lorsqu'il y a un accent. Donc surement un problème d'encodage?
totopsy a écrit :


HS : As-tu un / des sites à fort traffic afin de regarder le % d'adblock sur le Web ?


Pas de fort traffic.. J'ai un petit site qui fait entre 300 et 400 visiteurs/jours pour le moment.. Faudra au moins un mois je pense pour avoir des statistiques représentatives avec ce nombre de visite et encore..
Pages :
Sujet clos
Aller à