Suite à cette aventure notre équipe a décidé de produire un guide explicatif pour sécuriser les installations de WordPress et de vous la partager. Nous avons basé notre travail sur ce guide de sécurité WordPress en anglais et avons gardé les conseils les plus simples à implanter.

Conseils classiques

Voici la liste des conseils que à rappeler pour avoir bonne conscience 😉 : tenez à jour votre plateforme et vos extensions, sauvegardez fréquemment, n’installez que les thèmes et extensions nécessaires et effacez ceux que vous n’utilisez pas.

Protection contre la brute force

Les attaques “brute force” sont une technique qui vise à essayer des combinaisons d’informations de connexion jusqu’à ce que l’attaquant puisse se connecter.

Renommez le compte Administrateur

Évidement le nom d’utilisateur ‘admin’ est celui que l’attaquant essaiera en premier. Voici un script SQL pour le modifier. Changez UTILISATEUR et MOT_DE_PASSE pour les informations de connexion désirées et voilà!

UPDATE `wp_secure`.`wp_users`
SET `user_login` = 'UTILISATEUR',
`user_pass` = MD5( 'MOT_DE_PASSE' ) ,
`user_nicename` = 'UTILISATEUR'
WHERE `wp_users`.`ID` =1;

Limitez les tentatives de connexion

Bien que certaines extensions ajoutent des vulnérabilités à votre installation celle-ci vous offrira une protection supplémentaire : Limit Login Attempts

L’extension bloque automatiquement les tentatives de connexion abusives et prend en note les événements liés à celles-ci.

Ajustements à la configuration

Voici quelques ajustements à la configuration de votre installation qui doivent être effectués.

Ajout des clés de sécurités

Le fichier wp-config.php comprend une section ou vous devez ajouter des clés de sécurité. Vous trouverez le code suivant :

define('AUTH_KEY', '');
define('SECURE_AUTH_KEY', '');
define('LOGGED_IN_KEY', '');
define('NONCE_KEY', '');
define('AUTH_SALT', '');
define('SECURE_AUTH_SALT', '');
define('LOGGED_IN_SALT', '');
define('NONCE_SALT', '');

Vous pouvez générer les clés avec l’outil officiel de WordPress.

Désactiver les inscriptions publiques

Par défaut WordPress permet à n’importe qui de créer un compte sur votre site et cela peut être utilisé pour compromettre votre site.

Dans le Tableau de bord -> Réglages -> Général il y une option “Inscription – Tout le monde peut s’enregistrer”. Décochez-la.

Effacez les comptes utilisateurs bidons

Si l’option précédente était active, il y a fort à parier que plusieurs comptes bidons ont été créés. Allez dans l’onglet “Utilisateurs” et effacez les comptes indésirables.

Protégez vos utilisateurs du spam

WordPress est présentement la plateforme web la plus utilisée donc vos commentaires seront inévitablement remplis de liens pointant vers des sites douteux qui peuvent contenir des malwares.

L’extension Askimet (http://akismet.com/) vient avec toutes les installations de WordPress. Par contre pour l’activer vous devez obtenir une clé. Il suffit de créer un compte et de faire un don de 0$.

Fichier robots.txt

Vous pouvez empêcher les moteurs de recherche de trouver vos pages privées en modifier le fichier robots.txt qui se trouve dans la racine de votre dossier FTP. Si le fichier n’y est pas vous pouvez le créer.

Ajouter y ce code :

User-agent: *

Disallow: /feed/
Disallow: /trackback/
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes/
Disallow: /xmlrpc.php
Disallow: /wp-

Supprimer les fichiers inutiles

Vous pouvez supprimer les fichiers suivant pour éviter que des attaquants n’obtiennent de l’information sur vos installations :
/license.txt
/readme.html
/wp-config-sample.php

Supprimez aussi tous les fichiers de type ‘readme’ dans vos extensions.

Cet article Sécurisez facilement votre site WordPress contre les pirates. est apparu en premier sur Affluences.

Beaucoup de gens ont donné le mandat de conception à des débutants et au final leur site ne convient pas du tout à leurs besoins.

Voici ce que ces « experts web » et vous ne savez pas qui fait de votre site un échec.

1 – Si ça s’affiche dans votre navigateur, ça ne veut pas dire que ça fonctionne.

Quand vous avez le lien pour tester votre site vous allez vérifier sur votre ordinateur si ça fonctionne. Ceci n’est pas une méthode de test valide.

Premièrement les navigateurs corrigent les erreurs de programmation. S’ils plantaient à chaque erreur 98% des sites ne fonctionneraient pas. Vous ne pouvez donc pas voir les erreurs. Les amateurs utilisent aussi cette méthode. Chaque navigateur, lecteur de contenu, moteur de recherche va corriger les erreurs à sa manière et vous aurez un site avec pleins de problèmes inexplicables.

Voici l’outil officiel de l’autorité des standards web : W3C Validation Service. J’ai vu beaucoup de sites avec plus de 200 erreurs. En gros c’est comme 200 fautes d’orthographe .

Ensuite il faut savoir que d’autres navigateurs existent : Google Chrome, Firefox, Internet Explorer, Opera, Safari et les systèmes d’exploitation : OSx, iOS, Chromium, Andriod, Windows et les plateformes : iPhone, iPad, tablette, téléphone intelligent, téléphone web et j’en passe. Il y en a beaucoup? Vous devez programmer différemment pour chaque élément. Votre beau-frère n’a encore rien vue. Voici les statistiques d’utilisation officielle du « web » : W3C Browser Information.

2 – Votre site est horrible, mais vous l’aimez

Saviez-vous que la conception de votre site est un des facteurs les plus importants de votre conversion? Si votre site est mal conçu, vous n’aurez pas de nouveaux clients. Vous pensez savoir comment le faire, mais c’est faux. Le livre de Steve Krug « Don’t make me think » fait 216 pages et ce n’est qu’une introduction en matière de conception fonctionnelle. Conception fonctionnelle? C’est un des sous-aspects de la conception web.

Si vous êtes brave, lisez cet article : Blog Design for Killer Search Engine Optimization – SEOmoz et vous verrez que votre intuition n’y connaît rien.

3 – Votre contenu est impertinent

Un autre truc amusant : 80% des « boss » décident de placer l’information « notre entreprise » et « nos valeurs » avant les liens de produit et services. Pourtant ce sont eux, ou vous qui ont créé l’entreprise. Ils devraient savoir que les clients qui s’intéressent à l’entreprise sont d’abord intéressés par le besoin auquel elle peut répondre. Eh bien non.

Vos émotions vont foutre le désordre dans votre site c’est absolument certain. Vous allez placer de l’information en avant plan qui vous fait sentir bien, mais vous n’aurez pas de nouveaux clients. Votre cousin n’est pas en mesure de bien vous conseiller et est lui aussi biaisé par votre projet.

4 – Vous ne saurez pas ce qui se passe sur votre site

C’est vrai qu’installer Google Analytics sur votre site c’est facile. Il suffit de suivrez ces 10 étapes.

La formation de base est d’environ 8 heures et il y a un examen à réussir. La note de passage est de 85%. Après tout l’université de conversion Google est ouverte à tous! La section sur les Expressions régulières est particulièrement intéressante.

Votre expert web connaît surement aussi les autres applications d’analyse populaire : Quantcast, comScrore, SiteCatalyst, StatCounter, Piwik et Webtrends.

5 – En fin de compte c’est votre argent qui est en jeu

Il est toujours étonnant de constater que plusieurs entreprises considèrent le Web comme une dépense. Or, c’est tout le contraire!

Un site bien fait rapportera rapidement l’investissement initial, alors qu’un site « pas cher » sera une dépense car ce dernier ne produira pas de revenu.

Au final c’est votre objectif de communication qui compte, et c’est votre argent qui est en jeu.

Cet article 5 raisons pour lesquelles ne pas faire concevoir votre site par un amateur est apparu en premier sur Affluences.

Les nouvelles balises

HTML5 contient de nouvelles balises qui servent à indiquer aux moteurs de rechercher et aux autres logiciels qui peuvent accéder à votre site ce qu’il contient. Si vous les utilisez adéquatement vous pourrez, par exemple, indiquer facilement où se trouve votre entreprise, quel est le numéro de téléphone à utiliser afin de vous contacter et indiquer où se trouvent les articles que vous avez rédigés.

Voici quelques exemples de balises que vous pouvez utiliser : adresse – <address>, article – <article>, citation d’une source externe – <blockqote> et titre d’un oeuvre – <cite>.

Vous pouvez consulter HTL5 – A technical specification for Web developers pour obtenir plus d’informations.

Les micro-données de Schema.org

Le 2 juin 2011 Bing, Google et Yahoo ont créé une initiative dans le but d’introduire le concept de web sémantique. À l’aide des techniques spécifiées par l’initiative vous pouvez permettre aux moteurs de recherche de lire facilement de nombreuses informations très détaillées. Si votre site contient un catalogue de produits, de services ou d’endroits que vous désirez faire découvrir à vos clients cette technique est idéale pour vous.

Tout ce que vous pouvez lister grâce aux micro-données est listé dans la documentation hiérarchique de schema.org.

Cet article Ce que le HTML5 peut apporter à votre entreprise. est apparu en premier sur Affluences.

J’ai dit facile? Oui… C’est bien ce que j’ai dit! Voici comment y arriver :

Programmez votre site en HTML 5 et CSS 3

Laissez aller tous vos talents d’élite magicien du web et amusez -vous! Programmez pour un navigateur qui supporte HTML 5.

Activez le support du HTML 5

Avec un petit code JavaScript vous pouvez créer les éléments en mémoire qui ne sont pas normalement reçus comme du HTML.

Vous pouvez ajouter tous les éléments HTML dont vous avez besoin.

Spécifiez l’affichage des éléments CSS

Internet Explorer ne possède aucune règle d’affichage pour les nouveaux éléments. Les éléments seront donc affichés en ligne (inline). Il faut donc spécifier dans une feuille de style le comportement de ces éléments.

hgroup, article, header, footer, section, nav { display: block }

Activez CSS 3 sur les éléments

Vous pouvez activer des fonctions CSS 3 dans Internet Explorer (9 à 6) grâce à des scripts VML (Vector Markup Language). Mon script préféré est CSS3 Pie. Présentement il ne supporte que les fonctionnalités les plus populaires mais cela convient dans la plupart des cas.

Téléchargez le fichier PIE.htc et placez-le à la racine du domaine. J’ai bien dit à la racine du domaine. Une fois de plus Internet Explorer ne respecte pas les standards et les chemins CSS ne sont pas interprétés de la même manière que dans IE 8-6. Je vous conseille aussi de placer le fichier dans le répertoire racine du site en développement. Lors de la mise en ligne vous n’aurez pas besoin d’y réfléchir.

Vous devez ensuite spécifier quels éléments doivent utiliser le script VML. Le script doit s’exécuter sur chaque élément donc placez-le seulement où vous en avez besoin.

element_avec_du_css3 {
	behavior: url(/PIE.htc);
}

CSS3 PIE ne supporte pas le text-shadow mais vous pouvez utiliser les filtres d’IE pour reproduire un effet similaire.

text_avec_ombrage {
	filter: glow(color=black,strength=2);
}

Astuces pour déboguer IE 8 à 6

Ces astuces devraient vous permettre de rendre votre site fonctionnel sous Internet Explorer en moins de deux heures. Il est important de garder en tête que le site sera visuellement différent sous les vieilles versions et que vous ne pouvez rien y faire.

Testez les versions d’Internet Explorer
IETester est un navigateur qui permet de visualiser votre site sous Internet Explorer 9 à 5. J’ai effectué des tests comparatifs avec les navigateurs originaux et je n’ai vu aucune différence.

Créez des feuilles de styles pour Internet Explorer
Je vous conseille de créer des feuilles de styles propriétaire à Internet Explorer afin de régler les problèmes d’affichages.

CSS : bordure des images
Internet Explorer est le seul navigateur qui entoure les images qui se trouvent dans une balise de navigation. Ajoutez ce CSS à votre feuille de style IE seulement afin de régler le problème.

img { border: 0 none }

CSS : inline-block
Internet Explorer 7 et 6 ne permettent pas d’utiliser la valeur inline-block. Cette valeur est souvent utilisée en CSS 3 pour aligner des éléments ensemble, comme dans un menu horizontal. Vous devez remplacer les valeurs par inline.

Voici un exemple :

element_de_menu { /* CSS 3 */
	display: inline-block;
}

element_de_menu { /* Internet Explorer */
	display: inline;
}

CSS : tailles et inherit (IE 6 seulement)
Internet Explorer 6 ne traite pas correctement les valeurs inherit et les tailles des objets. IE ignore tout simplement les valeurs inherit donc vous devez les spécifier pour chaque élément. Pour la taille des éléments elle est interprétée différemment donc vous devrez en spécifier d’autres.

Cet article Comment programmer en HTML 5 dans Internet Explorer est apparu en premier sur Affluences.

Documents

The Internet Explorer 6 Countdown

“Internet Explorer. Voici ce que avez à dire pour faire monter la pression sanguine d’un webmestre.” – Webmonkey.com

Que dire de plus? En fait, grâce à IE6 Countdown, vous pouvez maintenant dire qu’Internet Explorer n’est utilisé que par 2.2% des canadiens! Combiné avec 25% de frais supplémentaires au tarif de base pour la programmation IE6 vous n’aurez plus jamais à programmer pour EI6 (et 7?)!

CSS Floats 101

“Oh mon dieu… Pourquoi est-ce que la section du copyright du site se retrouve en plein par dessus l’image du sympathique propriétaire du site dans Firefox et Internet Explorer?” – Webmestre.

La réponse est simple. Vous l’avez mal programmé! Certaines choses sont si simples une fois qu’on les connaît…

Comment créer une application iFrame Facebook

Nous savons tous que mettre la photo de son chien qui jappe la promo du jour sur sa page Facebook fera fuir tout ses clients mais c’est lui qui paye votre salaire alors… Un site horrible de plus ou de moins…

Comparaison des lecteurs vidéo HTML 5

Heureusement nous n’avons jamais eu à utiliser cette charte. Mais vu le travail colossal que représente la gestion de contenu vidéo, autant bien être préparé! Comme dit le site “Voyez ce qui est moche.” afin de ne pas vous embêter avec.

Outils

CSS 3 Pie

Est-ce que j’ai dit plus haut que vous n’auriez plus de problème avec IE6? MOUHAHAHA! Quel rêve farfelu! Et bien au moins vous pourrez programmer votre site en CSS 3 et n’ajoutez qu’une seul ligne de code dans votre feuille de style afin qu’il s’affiche dans IE6-7 et 8.

IE CSS 3

Est-ce que j’ai dit plus haut que vous n’auriez plus de problème avec IE6? MOUHAHAHA! IE7 et 8 Sont malheureusement là pour le remplacer! Et bien si CSS3 Pie ne suffit pas, ajoutez encore plus de fonctions CSS3 à Internet Explorer.

Adapt.js

Votre patron s’est acheté un iPhone et vous demande  maintenant d’adapter le site de l’entreprise au mobile? No problemo! Cachez tous les éléments nuisibles et chargez quand même le site complet pour vous venger. Adapt.js s’occupe de charger la feuille de style dont vous avez besoin.

Screenfly

Votre chargé de projet s’est acheté un iPad et vous demande maintenant d’adapter le site de l’entreprise au mobile? Aucun problème! Montrez lui que vous n’avez rien à changer et que le site fonctionne très bien sur les tablettes et les télévisions HD! Vous pouvez tester sur un paquet d’appareil.

CSS Sprite Generator

CSS Sprite? C’est un genre de lutin? Il est possible d’encoder des images directement en CSS. Fort utile pour les petits boutons et autre graphiques qui se retrouvent partout dans l’interface. Je vous invite à en lire davantage.

Icon Archive

Un des rares bons sites qui fournit une icône gratuite pour de vrai. Juste un peu de pub sur le site (AdBlock plus quelqu’un?).

Testeur d’expressions régulières PHP

“Une expression quoi?” – Débutant

“Oh mon dieu… regular-expressions.info à la rescousse!” – Webmestre

Un vrai vétéran de guerre! Toutes vos expressions régulières agiront dans votre application exactement comme sur le site.

Extensions pour Google Chrome

“Oui mais je n’utilise pas Google Chrome!”

Il n’y a que les imbéciles qui ne changent pas d’avis comme on dit!

Gmail checker plus

“Oui mais je n’utilise pas Gmail!”

Il n’y a que les imbéciles qui ne changent pas d’avis comme on dit!

Extension officiel Facebook

Vous n’allez jamais sur Facebook au travail? Moi non plus bien sûr *tousse*. Grâce à ce plugin!

Cet article Ressources utiles pour les webmestres 2 – Le retour! est apparu en premier sur Affluences.

Voici comment procéder…

Création des images

Commencez par créer vos images. Elles doivent avoir les mêmes dimensions (hauteur et largeur). Les images ci-dessous ont une hauteur de 68 pixels et une largeur de 74 pixels.

Fusion des images

Ensuite il faut “fusionner” les images. On doit les coller l’une à l’autre. Vous pouvez coller n’importe quel côté ensemble mais, dans cet exemple,  j’ai choisi de le coller de gauche à droite.

Programmation de l’élément (html/css)

Ensuite il faut créer un élément générique vide, comme un div ou un span, et lui appliquer ces règles CSS :

La hauteur et la largeur spécifiées doivent correspondre à celles des images originales. Display: block; s’assure que votre élément gardera la bonne dimension peu importe quel est  l’élément HTML utilisé. Vous pouvez le remplacer par display: inline-block; pour l’afficher en ligne.

.menu_item {
    background: none no-repeat scroll 0 0 transparent;
    display: block;
    height: 68px;
    width: 74px;
}

C’est avec la règle :hover que la magie apparaît. On déplace simplement l’image vers la gauche. On utilise une seule image, peu importe son état, pour éviter le temps de chargement de d’autres images.

.menu_item:hover {
  background: none no-repeat scroll -74px 0 transparent;
}

Ensuite on applique l’image à l’élément.

.link_1 {
  background-image: url("images/images-combinés.png");
}

Conclusion

C’est tout! Voici le résultat!

Vous pouvez ajouter autant d’états et d’images que vous désirez.

Pour déplacer une image de fond vous pouvez utiliser la propriété background-position.

Cet article Programmer une image “roll-over” en CSS. est apparu en premier sur Affluences.

Outils

Modernizr : Une bibliothèque javascript pour détecter le support des technologies HTML de votre visiteur. Permet par exemple d’utiliser le tag <video> si elle est disponible ou sinon d’afficher le vidéo en flash.

Google Web Fonts : Utilisez facilement des polices spéciales sur votre site. J’imagine déjà tous les clients enragés de folie nous poursuivre avec des fourches pour nous faire remplacer la police de leur site par Comic Sans MS.

Font Squirrel : Vous permet d’utiliser n’importe quelle police sur votre site (oubliez IE 6 et 7).

Color Scheme Designer : Permet de définir facilement des palettes de couleurs à utiliser sur votre site ou de trouver des couleurs compatibles avec les vôtres.

Testeur d’expression régulière (REGEX) PHP et JavaScript : Des heures de souffrance abyssale en moins…

YUI Compression : Un compresseur de CSS et de Javascript créé par Yahoo. Très utile pour réduire la taille de vos pages et protéger votre travail.

HTML 5 for web developpers : Une version des standards HTML 5 conçue pour les développeurs. Beaucoup plus facile à lire que la version pour les concepteurs de navigateurs.

Image : crunchmeme.com

Cet article Ressources utiles pour les webmestres est apparu en premier sur Affluences.

Nous savons maintenant que les moteurs de recherche vérifient plusieurs signaux pour mesurer la pertinence des liens partagés :

• Diversité des sources – Si les liens proviennent de plusieurs comptes, ils sont plus pertinents que s’ils proviennent du même compte.
• Fréquence – Les liens partagés longtemps après la date d’apparition du contenu et sur des bases régulières sont plus pertinents que ceux qui apparaissent une seule fois.
• Message d’accompagnement – Les commentaires des utilisateurs indiquent un niveau de satisfaction et de l’opinion des pages partagées.
• Niveau d’engagement – Le nombre de « retweet », de “j’aime” et de réponses.
  Autorité de la source – Le nombre d’amis, de « followers » et la pertinence des messages sont aussi des facteurs qui sont mesurés. Par contre Google dit accorder moins d’importance à l’autorité que Bing.

Évidemment la pertinence des pages et la qualité du site restent des facteurs aussi importants. Les réseaux sociaux permettent de vérifier les tendances web du jour et de suivre ce dont les utilisateurs parlent. De plus les réseaux sociaux ne contiennent aucun contenu malicieux et très peu de pourriels.

Une fois de plus, les moteurs de recherche mettent le sort des sites entre les mains des visiteurs plutôt que de leurs propriétaires.

Cet article Les réseaux sociaux influencent le positionnement est apparu en premier sur Affluences.

Vous pouvez supprimer ces applications afin qu’elles ne puissent plus agir avec votre compte mais cela n’est pas évident. Voici comment procéder :

1. Ouvrez le menu “Compte” que en haut à droite du menu

2. Ensuite cliquez sur “Paramètres de confidentialité”

3. Cliquez sur le lien en bas à gauche “Modifier vos paramètres” sous “Applications et sites web”

4. Cliquez sur le bouton “Modifier les paramètres” à droite de la liste des applications et sites web

5. Pour chaque application et sites web que vous n’utilisez pas cliquez sur le “x” à droite complètement du nom de l’application ou site web

6. Cliquez sur le bouton “Retirer”

Autres articles intéressants sur le sujet

5 Facebook Scams You Should Protect Yourslef From – allfacebook.com
Making Facebook Safe Against Spam – facebook.com

Cet article Éviter le spam et le vol d’information sur Facebook est apparu en premier sur Affluences.

Les données de base ne représentent pas fidèlement vos clients

Avant de pouvoir utiliser vos données, il est essentiel qu’elles représentent la réalité de votre site. Plusieurs problèmes peuvent fausser ces données. Ces problèmes sont divers, mauvaise programmation, bogue sur le site, navigation problématique, etc.. Des compétences techniques approfondies et une compréhension d’Analytics sont requises pour régler la majorité de ces problèmes.

Calculer la rentabilité de votre site

Il est possible de quantifier une multitude d’opération sur votre site. Si Analytics est bien configuré, il peut calculer combien votre site vous rapporte ou vous fait économiser.

Étudier le comportement de votre clientèle

Contrairement aux méthodes de marketing conventionnelles, vous pouvez voir comment vos clients réagissent sur votre site. En étudiant ses comportements avec soin vous pourriez obtenir des informations essentielles à votre entreprise. De plus, les actions des internautes sont susceptibles d’être similaires à ceux de vos clients et pourront vous aider à mieux les servir.

Améliorer votre marketing

Les données recueillies peuvent être utiles à vos collaborateurs. Les agences de marketing peuvent utiliser ces données pour élaborer de meilleures stratégies ainsi vos webmestres pourront améliorer votre site. Vos pourrez obtenir également de meilleurs résultats et augmenter la rentabilité de votre site web!

Cet article Pourquoi investir dans Google Analytics? est apparu en premier sur Affluences.