Mois : août 2011 Page 1 of 2

Temps de lecture : < 1 minute

JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.

Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:

Framework JQuery mobile

de arnaud

On août 16, 2011

dans Framework, JQuery

Temps de lecture : 2 minutes

Tous ceux qui ont déjà utilisé le dernier né de JQuery, à savoir JQuery mobile vont vraiment apprécier JqmPhp. En effet JqmPhp permet de simplifier une syntaxe assez lourde et surtout de fournir un code optimisé.

Travaillant actuellement sur une application web pour smartphone, je me suis fortement intéressé à ce framework pour rendre mon code plus clair.

Une fois que vous avez téléchargé le framework vous devez le configurer. A savoir que la version actuelle de JQuery mobile est la Alpha 4 mais que Jqmphpest conçu pour la Alpha 3. C’est pourquoi il est possible que certaines des nouvelles fonctionnalités de JQuery Mobile ne soient pas encore prises en charge.

Pour la configuration rendez-vous dans le fichier /lib/jqmphp.php

Les valeurs suivantes sont à changer par les liens vers les nouvelles versions de JQuery Mobile (en local ou sur un serveur distant).

/**
 * Sets the jQuery path.
 * @var JQMPHP_JQ
 */
define('JQMPHP_JQ', 'http://code.jquery.com/jquery-1.5.min.js', true);

/**
 * Sets the jQuery Mobile path.
 * @var JQMPHP_JQM
 */
define('JQMPHP_JQM', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js', true);

/**
 * Sets the jQuery Mobile CSS path.
 * @var JQMPHP_CSS
 */
define('JQMPHP_CSS', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css', true);

Maintenant que le framework est configuré on va pouvoir créer notre première page.

<?php   
//  Creation de l'objet jqmphp
$j = new jqmPhp();  

// ajout du titre au header
$j->head()->title('Menu principal');

// Création d'une page ( il peu en avoir plusieurs par jqmphp )
$p = new jqmPage('Menu Principal');

// choix du theme et ajout du titre à la page
$p->theme('c')->title('Menu Principal');

// choix du theme pour le header de la page
$p->header()->theme('c');

// ajout de text HTML dans la page
$p->addContent('Bienvenue sur ma belle page');

// Exemple de création de liste ( courant dans JQuery mobile)
$gm = new jqmListviem();

// création et ajout d'un item à la liste
$ann = $gm->addBasic('Lien 1', 'page1.php','',true);

$cal = $gm->addBasic('Lien 2', 'index.php?action=3');

// ajout de la liste à la page
$p->addContent($gm);

// ajout de la page à l'objet
$j->addPage($p);

// affichage de la page
echo $j;

?>

Comme on peut le remarquer le code est assez simple, mais qu’en est-il du résultat ?

Ceci est un exemple très simple mais vous trouverez sur le site du projet des exemples complexes avec des formulaires, des listes à icônes…

En conclusion : Bien que le framework soit très récent il promet d’être très utile aux développeurs web soucieux des utilisateurs de smartphone.

Nous sommes dans l’attente d’une version qui sera sûrement adaptée à la version beta de JQuery mobile qui sortira prochainement.

Faire un audit de sécurité

de arnaud

On août 12, 2011

dans Sécurité

Temps de lecture : 2 minutes

Hacker Target est un site Internet qui vous propose de tester les vulnérabilités de votre application web.
Le site vous propose plusieurs types de tests selon votre site Internet.

Voici la liste complète des tests proposés gratuitement par le site (limité à 4/jours) :

les injections SQL
les CMS Drupal, Joomla et WordPress
les ports de votre serveur
les vulnérabilités de vos services
les problèmes de configuration ou de scripts
faire du fingerprint (déterminer les versions de vos librairies et logiciels)
en savoir plus sur votre domaine par le biais de whois par exemples
obtenir des infos sur vos CMS, fameworks, serveur, emplacement géographique…Etc

Nous allons ici détailler le test concernant WordPress car c’est celui que je viens de réaliser sur localhost:8080.

Voici la liste des tests :

WordPress Version Check
Site Reputation from Google, Norton and MyWot
Default admin account enabled
Directory Indexing on plugins
htaccess readable
robots.txt present
Sites Externally linked from main page (reputation checks)
WordPress Plugins that are detected passively and versions against latest versions.
Javascript linked
iframes present
internal site links
Hosting Reputation and Geolocation information
IP address sharing and reputation of sites sharing the IP address

Voici par exemple le type de conseils que l’on peut recevoir :

The WordPress administration login page is at the default location http://YOUR-WEBSITE/wp-admin/
This is not a critical risk however it should be understood that brute force attacks against WordPress login accounts
including the admin account are not difficult. A strong password on the admin accounts is vital. It is recommended to
rename the default admin account to a non-generic name.

Sinon, le rapport contient aussi la liste des liens externes de votre site afin de vérifier que personne n’a réussi à insérer des URLs vers des sites sans rapport.
Vous aurez aussi en fin de rapport la liste des sites Internet qui sont hébergés sous la même IP, ainsi que leurs MyWOT Reputation et leur résultat au Google Safe Browse.

Vous l’aurez compris, cet outil peut vous donner de mauvaises surprises s’il tombe entre de mauvaises mains.

Site Internet : Hacker Target

Charger vos scripts en asynchrone

de arnaud

On août 10, 2011

dans Optimisation

Temps de lecture : < 1 minute

Le chargement de vos fichiers Javascript ralentit le chargement de page. Ceci est logique car le navigateur doit télécharger les fichiers avant de faire l’affichage. Grâce à Require.js vous allez pouvoir charger vos JavaScript en asynchrone. C’est-à-dire charger le texte, les images, les styles puis seulement une fois que la page est affichée correctement, et que le lecteur peut commencer à lire le contenu, le JavaScript. Require.js permet aussi de détecter les fichiers qui ont déjà été chargés afin de ne pas les recharger.

L’utilisation du script est très simple, dans un premier temps, il faut inclure le fichier contenant require.js :

Puis à la fin du body il faut dire à require.js de charger les autres scripts :

require([
            "scripts/underscore.js",
            "scripts/jquery.js",
            "scripts/backbone.js"
        ], function(){
            $('#exemple').html('Jquery loaded!')
        })

Le gain au chargement de la page est assez intéressant, surtout depuis la refonte complète de la librairie.

Menu contextuel en JavaScript

de arnaud

On août 8, 2011

dans JQuery

Temps de lecture : < 1 minute

Le plugin JQuery contextMenu vous permet de faire des menus contextuels sur des images, du texte ou tout autre contenu. L’utilisation de contextMenu peut être utile pour permettre de partager un contenu sur les réseaux sociaux, pour gérer du contenu dynamique ou simplement pour afficher des informations à l’utilisateur.

Voici un exemple de menu contextuel généré par le plugin :

Pour obtenir ce genre de résultat voici comment appeler le plugin :

$.contextMenu({selector: '#id_de_votre_objet_html', items: {
	edit: {name: "Edit", icon: "edit", callback: $.noop},
	cut: {name: "Cut", icon: "cut", callback: $.noop},
	copy: {name: "Copy", icon: "copy", callback: $.noop},
	paste: {name: "Paste", icon: "paste", callback: $.noop},
	"delete": {name: "Delete", icon: "delete", callback: $.noop},
	sep1: "---------",
	quit: {name: "Quit", icon: "quit", callback: $.noop}
}});

Comme vous pouvez le voir son utilisation est très simple.

Rendre votre CSS compatible sur tous les navigateurs

de arnaud

On août 8, 2011

dans Outils

Temps de lecture : 2 minutes

Prefixr est un outil, en version alpha, qui vas vous aider dans le développement de vos designs. En effet, le site vous propose de prendre n’importe quel code CSS et de vous en ressortir un code CSS compatible sur tous les navigateurs.

Voici un exemple d’utilisation :

Vous avez écrit :

.example {
  border: 10px solid #000000;
  width: 500px;
  height: 500px;
  -moz-border-radius: 10px 200px 200px 10px;
}

Malheureusement -moz-border-radius ne fonctionne pas sur tous les navigateurs… On vas donc passer le code dans Prefixr pour le rendre compatible.

Et on vas obtenir le code suivant :

.example {
	border: 10px solid #000000;
	width: 500px;
	height: 500px;
	-webkit-border-radius: 10px 200px 200px 10px;
	-moz-border-radius: 10px 200px 200px 10px;
	-o-border-radius: 10px 200px 200px 10px;
	-ms-border-radius: 10px 200px 200px 10px;
	-khtml-border-radius: 10px 200px 200px 10px;
	border-radius: 10px 200px 200px 10px;
}

Bien que ceci soit déjà pas mal, cela implique de faire des aller retours entre votre éditeur et votre navigateur pour tester et modifier votre CSS. C’est pourquoi les développeur ont mis en place une api accessible depuis les éditeurs de texte évolués afin d’utiliser le service sans aller sur le site.

Pour cela il faudra créer une nouvelle commande dans votre éditeur qui exécutera :

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"

Il faudra installer curl si vous ne l’avez pas.

En conclusion Prefixr est un outil très intéressant et offrant un gain de temps considérable. Cependant il vas nécessiter des mise à jours régulières pour s’adapter au mieux à toutes les règles du CSS3.

Les extensions WordPress

de arnaud

On août 6, 2011

dans Outils

Temps de lecture : 2 minutes

WordPress est un des CMS les plus utilisés dans le monde. Il permet de créer rapidement et très simplement un blog, mais aussi des sites Internet en tous genres. Avec les bonnes extensions, vous pouvez même en faire un site de e-commerce. Son avantage est principalement son optimisation pour le référencement. En effet, si vous avez du contenu intéressant, il sera facilement et rapidement indexé sur les moteurs de recherche. Un des autres avantages de WordPress est sa grande flexibilité. Vous pouvez réussir à faire énormément de choses juste en ajoutant des extensions. Voici donc une liste des extensions que vous pourrez directement installer depuis votre interface administrateur. Pour installer une extension, rendez-vous dans Extensions>Ajouter.

Extensions orintées référencement

Beaucoup d’extensions existent pour optimiser votre référencement, mais il faut faire un choix et éviter de trop alourdir votre WordPress.

SEO ALRP : permet de rajouter automatiquement à la fin de vos articles des liens vers d’autres articles de la même thématique
Simple Tags : permet de trouver simplement les mots clés pour vos articles
Tweet, Like, Google +1 and Share : permet l’ajout de liens de partages sur les réseaux sociaux
SEO Ultimate : pour mettre en place des balises meta différentes pour chaque page

Utilitaire

WordPress Backup : permet de faire une sauvegarde de vos images, plugins et thèmes WordPress
Broken Links Remover vérifie tous les intervalles de temps défini, les liens du site afin de trouver des liens ou des images morts.
Mobile Smart : permet la détection des appareils mobiles et la sélection d’un thème WordPress adapté.
Exploit Scanner teste le code de votre WordPress afin de tenter d’y trouver des failles de sécurité
Post View permet de suivre le nombre de visites de vos articles, de les classer par fréquentation, de faire des graphiques avec les données…

Optimisation

DB Cache Reloaded : Mise en cache des résultats des requêtes SQL
WP Widget Cache permet une gestion pointue du cache de vos widgets

Système de tag d’images avec JQuery image annotate

de arnaud

On août 5, 2011

dans JQuery

Temps de lecture : < 1 minute

Vous souhaitez mettre en place un système de tag d’image comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer. jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.

Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.

 <html>       <head>           <style type="text/css" media="all">@import "./css/annotation.css";</style>           <script type="text/javascript" src="./js/jquery-1.3.2.js"></script>           <script type="text/javascript" src="./js/jquery-ui-1.7.1.js"></script>           <script type="text/javascript" src="./js/jquery.annotate.js"></script>             <script language="javascript">                  $(window).load(function() {                     $("#toAnnotate").annotateImage({                       editable: true,                       useAjax: false,                       notes: [ { "top": 286,                                   "left": 161,                                   "width": 70,                                   "height": 70,                                   "text": "Edites moi !",                                   "editable": false },                                { "top": 134,                                   "left": 179,                                   "width": 100,                                  "height": 80,                                   "text": "Ne m'édites pas !",                                   "editable": true } ]                                       });                  });              </script>          </head>       <body>              <div class="main-content">               <img src="./monImage.png" id="toAnnotate" />           </div>          </body>   </html>

En conclusion il s’agit d’un plugin très intéressant, mais il est destiné à un nombre très restreint de projets, du fait de sa spécificité.

Faire un indexof travaillé avec H5AI

de arnaud

On août 4, 2011

dans Outils

Temps de lecture : < 1 minute

H5AI est un projet développé avec HTML5 qui a pour but de remplacer la page indexof par défaut de apache. C’est dans cette optique que H5AI propose plusieurs types de vue, un moteur de recherche interne ou encore un bandeau cliquable nous indiquant notre position dans l’arborescence de fichiers, depuis le root du dossier où H5AI est mis en place.

Voici un exemple en images du type de rendu que vous pouvez avoir sur un dossier contenant plusieurs types de fichiers différents. Vous pouvez remarquer que le projet détecte le type de chacun des fichiers afin d’afficher la bonne icône.

Sécurité PHP

de arnaud

On août 2, 2011

dans Sécurité

Temps de lecture : 3 minutes

Les informations de cet article datent

L’actualité étant chargée niveau hack, il est temps de sortir un petit article présentant différentes méthodes de sécurisation d’une application PHP.
Je vais donc brièvement vous présenter différentes librairies ou classes PHP orientées sécurité.

PHPIDS
Un monitoring complet des actions de l’utilisateur avec évaluation de la dangerosité de chaque requête, et de la session. L’outil indispensable pour détecter les recherches de failles.
Input filter
Cette librairie permet de filtrer les tableaux $_GET, $_POST, $_REQUEST pour y detecter le PHP, JavaScript et HTML.
Anti csrf
Permet d’ajouter un token dans ses formulaires afin de ne pas se les faire détourner. Le but étant que chaque formulaire ne soit soumis qu’une seule fois.

L’utilisation des librairies précédentes est un complément mais elles ne constituent pas une sécurité optimale à elles seules.

Voici donc une liste de bonnes pratiques niveau sécurité :

Ne jamais insérer des données dans une requête SQL sans un minimum de traitement. ( mysql_real_escape_string ou mieux PDO::prepare() et PDOStatment::bindValue() )
Ne jamais faire passer en paramètre une page à inclure
exemple : include $_GET[« ma_page »]; préférez une solution du type : switch($_GET[« ma_page »]){ case « home » : include « home.php »; break; case « forum » : include « forum.php »; break; default : inclue « error.php » break; }
Avoir un fichier index.html dans chaque dossier du projet, contenant <html> <head></head> <body> <h1>Accés interdit</h1> </body> </html>
Sécuriser ses session_start contre le vol de session. $ip = !empty( $_SERVER[‘HTTP_X_FORWARDED_FOR’] ) ? $_SERVER[‘HTTP_X_FORWARDED_FOR’] : $_SERVER[‘REMOTE_ADDR’]; $securite = $ip.’_’.$_SERVER[‘HTTP_USER_AGENT’]; if(empty($_SESSION)) { session_start(); $_SESSION[‘securite’] = $securite; } elseif($_SESSION[‘securite’] != $securite) { session_regenerate_id(); $_SESSION = array(); } Voici donc une technique qui permet simplement de tester si une session est bien utilisée par le même navigateur sur la même machine.
Crypter les données sensibles de votre base (email,pseudo par exemple ).
J’ai mis au point cette classe : Crypage. Elle n’est certes pas extrêmement puissante mais elle permet de se protéger contre une injection SQL. Pensez bien sûr à changer la clef 😛 .

Le cryptage des mots de passe est une base de la sécurité. Pour cela utilisez une fonction comme celle-ci : protected function crypteMotPasse($mot){ $salt = « !123 GRAIN DE SEL# »; return sha1(strrev(ucfirst($mot).$salt)); } Ceci est une idée le but est d’éviter que les mots de passe soient facilement lisibles en cas de piratage de notre base de données. Tout en sachant que des rainbow table existent pour inverser un md5 ou un sha1.
Vous pouvez aussi définir un salt par user. Pour cela, au moment de la création du compte, vous générez une chaîne de caractères le plus aléatoirement possible, que vous stockez dans votre table user. Pour la connexion de l’utilisateur, il faudra dans un premier temps aller chercher le salt dans la base. Puis utilisez la fonction ci-dessus comme suit : protected function crypteMotPasse($mot,$saltuser){ $salt = « !123 SALT FIXE# ».$saltuser; return sha1(strrev(ucfirst($mot).$salt)); } Comme le rappelle Simon dans son commentaire : En effet, l’attaquant, pour obtenir l’ensemble des données de la base doit :
– avec la fonction crypteMotPasse (salt à l’intérieur de la fonction) : regénérer une rainbow table
– avec une fonction qui prend un salt différent par utilisateur : regénérer autant de rainbow table que d’utilisateurs
Empêcher un accès direct à vos fichiers PHP. Dans votre/vos fichier(s) d’entrée(s) (index.php par exemple) faites un : define(« _BASE_URL »,TRUE); Puis commencez tous vos autres fichiers PHP par : <?php if(!defined(‘_BASE_URL’)) die(« Erreur, la page est indisponible »);
Ajoutez la ligne suivante dans votre/vos fichier(s) d’entrée(s) afin d’activer les logs d’erreur PHP. Ceci est très utile pour débugger votre application lors de la phase de développement. Il faut cepandant penser à enlever cette ligne au moment de la mise en production. <?php error_reporting(E_ALL); ?>
Ne stockez que le minimum vital dans les cookies (voire rien si possible), réduisez la durée de vie de vos cookies, et cryptez les données qui sont dedans.

Pour les utilisateurs de CodeIgniter, activez le stockage de la session en base de données.
Documentation allez à « Saving Session Data to a Database »