doc.progysm.com

Programmation dynamique

Génération de code avec PHP sur le serveur

Modification d'une page web avec Javascript

Framework de développement

• GenList (JS/PHP) - documentation
• Django (Python)
• CakePHP (PHP)

Ce que l'on peut savoir sur l'usager ou le navigateur

Le protocole HTTP envoie beaucoup d'informations aux serveurs Web. En PHP, en particulier à l'aide des variables $_SERVER et $GLOBALS on peut savoir:

• Heure/date de la requête
• IP externe de la requête (REMOTE_ADDR et port REMOTE_PORT). Note, il existe des bases de données pour faire correspondre une adresse IP avec une position géographique. Malheureusement, il s'agit de la position du serveur du Fournisseur d'accès Internet (FAI) dans la majorité des cas. (Google me situe à 200km de ma vraie position géographique).
• Paramètre complet de la requête, incluant mot de passe (normal, le serveur voit tout ce que vous lui envoyez...)
• Mot de passe avec authentification HTTP
• Navigateur utilisé (ou information envoyée par le navigateur aka HTTP_USER_AGENT, entête HTTP "User-Agent:"). Cette information peut être invalide.
• Langues préférées par le navigateur (configurable par l'usager) (aka HTTP_ACCEPT_LANGUAGE)
• Lien référant (de provenance, aka HTTP_REFERER)
• Format préféré (aka HTTP_ACCEPT)
• Compression supporté (aka ACCEPT_ENCODING)
• Encodage préféré (aka HTTP_ACCEPT_CHARSET)
• Méthode et protocole (REQUEST_METHOD [GET|POST] et SERVER_PROTOCOL [HTTP/1.0|HTTP/1.1])

Les outils comme google-analytics peuvent en savoir plus en utilisant un fichier javascript. Le script permet d'ajouter des espions sur des évènements (onload, onbeforeunload, onunload, onclick, ...). Javascript a aussi accès aux résolutions d'écran et à la position de la souris. Il suffit de faire des requêtes ajax ou de modifier le liens d'une image pour envoyer ces informations. Exemple, je pourrais ajouter dans la page une image invisible en javascript avec le code suivant: '<img src="http://sendinfo.com/resolutionecran.gif?width='+screen.width+'&height='+screen.height+'" />'.

CSS2 a introduit les sélecteurs :link, :visited, :active, :focus, :hover, ... pour les liens web. Le sélecteur :visited est assez intéressant car il s'active lorsqu'on a visité un site web. Si on ajoute un lien comme <a href="http://www.google.com/"> et une règle a.visited { color:red;}, le lien sera rouge si vous avez visitez le site Web. Avec window.getComputedStyle(element, null).color on peut obtenir cette couleur. Voir mon test sur a:visited.

Mike Cardwell introduit aussi l'idée d'utiliser des images et du javascript pour savoir si un usager est connecté ou non sur un serveur connu. Par exemple, il ajoute sur son compte GMail une photo qui n'est accessible que pour des gens connecté à GMail. Lorsqu'il affiche cette photo sur son site Web, GMail enverra une photo si la personne est connectée et une erreur 404 si elle n'est pas connectée. En utilisant les évènements onload et onerror sur la balise images, on peut savoir si l'image s'est chargé ou pas. Il utilise une variation de la technique, mais cette fois, un peu plus dangereuse, avec des balises script (javascript) de type async. C'est plus dangereux car si le site distant est compromis, il peut voler des informations comme google-analytics, modifier la page ou rediriger l'usager vers un site malveillant. Il s'agit d'une variation des images de status connecté/déconnecté de ICQ.

Lors de la programmation de page Web, pour une meilleure sécurité, il est conseillé de ne jamais inclure des images, scripts, feuilles css d'un serveur distant. Pourtant, des milliers et des milliers de programmeurs insèrent des compteurs, des outils de statistiques, des publicités et des gugusses facebook, etc.. sur leur page présentement. Lorsque ces sites fermeront, car rien n'est éternel, leurs pages auront des trous vides un peu partout...

Marque de commerce

Utilisation du logo twitter et Boutons Twitter

Logos Facebook

Débogage

Plusieurs outils intégrés existe pour le débogage d'application Web. Votre navigateur est peut-être votre meilleur ami.

Exemple d'outil de débogage

• Outils de développement (vue Examiner) de iceweasel 10 (code html et code CSS en temps réel). Voir la copie d'écran: iceweasel10_debugging.png
• Outils de développement (console web) de iceweasel 10. Voir la copie d'écran: iceweasel10_window_onunload.png
iceweasel10_window_onunload.png
• JSFiddle est un site où l'on peut facile créer un cas d'utilisation (test case) en séparant le code HTML, code CSS et le code javascript. La fenêtre en bas à gauche correspond au résultat lorsqu'on clique sur le bouton "Run". Il y a aussi un mode collaboratif.

À ne pas faire