...

Tag: 3vision-group

Agence web, Inspirations

3Vision-group développe un e-mail pro en HTML responsive pour vos clients

L’email (ou newsletters) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, pas de problème, c’est une interprétation standard sans difficulté. En mode HTML, c’est un art très délicat, en partie parce qu’il existe sur le marché de nombreux clients de lecture de courrier électronique qui se comportent très différemment (maintenant encore plus que les navigateurs classiques). Cette différence d’interprétation des e-mails au format HTML provient de plusieurs facteurs :

  • Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes…) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com…).
  • Ces mêmes webmails imposent des règles très strictes sur le code HTML et CSS contenu dans les e-mails car les messages sont eux-mêmes affichés dans une structure de page web qui a ses propres styles. Entre autres, Outlook.com ne supporte pas les marges.
  • Et enfin le plus consternant : certains moteurs sont très exotiques, par exemple Outlook 2013 utilise toujours le moteur d’interprétation HTML de… Word ! Ce qui signifie virtuellement que la prise en charge de CSS dans Outlook n’a pas changé entre les versions 2007, 2010 et 2013, là où les navigateurs ont fait des bonds de géants.

Mettons un terme à vos envies les plus folles dès maintenant : plus encore que le web, générer des emails graphiques en HTML sur toutes les plateformes, au pixel près, relève de l’utopie.

Par exemple, voici un rendu du modèle proposé dans cet article sur la version Web d’Outlook et le client Outlook Windows 8 (quoique très récent, promu par le même éditeur, et pour le même événement).

Mail Outlook web
Outlook.com
Mail Outlook Windows 8
Outlook pour Windows 8

Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité des programmes. Tout au long de l’article, nous allons faire référence aux compatibilités CSS des clients mails. Vous pouvez trouver un excellent tableau récapitulatif chez Campaignmonitor. Vous pouvez également télécharger les deux fichiers sources utilisés pour cet article (fichier zip, 15 Ko).

Quelques règles de base pour HTML et CSS

Des tableaux pour la mise en page

Oubliez ce qu’on vous a appris à l’école : pour les e-mails, les tableaux, c’est le bien. Enfin, c’est plutôt qu’il n’y a pas beaucoup de choix. Attention, nous ne disons en aucun cas que les éléments de bloc comme <div> ou <p> sont à proscrire, mais quand il s’agit de la mise en page, il vaut mieux utiliser des tableaux puisque les placement en CSS utilisant display ou même float deviennent problématiques sur les clients mail.

Du CSS en ligne, pour la mise en forme

Là encore, il y a de quoi bondir, mais quand il s’agit d’e-mail en HTML, il vaut mieux utiliser des styles en ligne directement sur les éléments concernés (c’est-à-dire avec l’attribut style=""). En effet, certains clients mail (dont Gmail et Android 2.3+) vont ignorer toute balise <style> se trouvant dans la section <head>. Les feuilles de style externes ont également de fortes chances d’être ignorées en fonction du client mail. Tout style déclaré de façon pratique, commune dans l’en-tête du document, de façon interne ou externe, est potentiellement voué à être ignoré. C’est très contraignant, il existe des outils tels que Premailer pour appliquer automatiquement – dans la mesure du possible – les styles en ligne dans un attribut style, pour les balises composant l’e-mail.

Premailer

Le Doctype

Souvent, l’absence d’un Doctype entraînera une mauvaise interprétation, en particulier lorsque vos utilisateurs consultent votre e-mail dans un navigateur (par exemple, Gmail sur Chrome). Pour les newsletters, il est actuellement préférable d’utiliser le type de document XHTML 1.0 Strict. Notez cependant que Gmail et Hotmail incluent le doctype HTML5 depuis 2010. Pour ce faire, vous pouvez tester votre conception dans plusieurs navigateurs sans le doctype afin que le client de messagerie l’ignore de toute façon, puis ajoutez le doctype et voyez si le résultat correspond toujours. Pour plus d’informations, consultez l’article en anglais sur les tests de type de document.

bonnes habitudes d’utilisation
N’oubliez pas de fournir un lien qui permet à l’utilisateur de le visualiser dans le navigateur et vous lui éviterez la frustration de ne pas toujours choisir un client de messagerie.
N’oubliez pas également de toujours inclure la version en texte brut (le même message peut contenir une combinaison de version HTML et d’alternative en texte brut), qui sera plus lisible et plus facile d’accès, selon le client de messagerie choisi et ses paramètres.
Une newsletter uniquement en images est aussi tentante : pas de soucis entre clients, et le rendu est parfait. Mais gardez à l’esprit que de nombreux programmes n’affichent pas les images par défaut et que l’utilisateur doit l’autoriser. Il est donc préférable d’éviter trop d’images et trop peu de texte, sinon votre message ne sera jamais lu. Des statistiques sont fréquemment publiées sur ce sujet : les utilisateurs ignorent ou suppriment simplement les e-mails avec des conceptions complètes qui n’affichent pas d’images. Surtout, n’oubliez pas l’attribut alt, ce sera la seule information affichée pour les utilisateurs qui n’ont pas activé les images !
Bien que le code soit beau et bien codé, tenez également compte du fait que les utilisateurs n’auront peut-être plus besoin de votre newsletter. Par conséquent, le lien de désabonnement (fonctionnel) en bas de page est également considéré comme obligatoire.
Modèle d’e-mail avec feuille de mise en page

Comme spécifié dans les règles de base, nous privilégierons les tableaux HTML pour la mise en page. Les marges entre les éléments deviendront des cellules vides. <div> et <p> ne peuvent pas être évités au moins. Il est parfaitement possible de les utiliser, mais à l’intérieur du layout. Les largeurs fixes (en pixels) sont également plus efficaces que les unités em ou %, mais vous pouvez utiliser % si vous souhaitez un e-mail adapté à la taille du client.

Ceci est un exemple concret d’une conception d’e-mail simple typique qui peut avoir plusieurs colonnes. À gauche se trouve la version en surbrillance de la cellule du tableau, à droite se trouve le rendu final :

Screenshot du rendu final de la template, à gauche avec les zones de tableau délimitées, à droite sa

Consulter la démonstration en ligne

N’hésitez pas à consulter le code source de la démonstration pour visualiser la structure HTML.

Ce qu’il faut noter :

  • Nous avons découpé notre structure en plusieurs tableaux : un grand tableau englobe tout l’e-mail et a une largeur de 100% pour que le fond bleu prenne toute la place. Pour cette technique il faut néanmoins faire attention à Outlook (2007 et 2010) pour lesquels des sauts de page sont insérés environ tous les 1790px et risquent de casser le design en tableau. Dans ce cas, il vaut mieux encapsuler son site dans un span  (merci @HTeuMeuLeu  pour la précision).
  • À l’intérieur de ce tableau “faux <body>” on retrouve un sous-tableau pour l’en-tête avec le logo, un tableau pour le contenu, qui lui-même contient plusieurs autres tableaux, et un dernier pour le pied de page.
  • Puisque le padding (marge interne) n’est pas bien supporté sur beaucoup de clients, il vaut mieux ajouter une colonne vide à gauche et à droite pour séparer le contenu du bord.
  • Avec l’attribut border il n’est pas possible de ne définir qu’une seule bordure, des lignes vides (<tr>)  avec des  hauteurs fixes permettent de créer des séparations d’un pixel de haut. Technique à utiliser avec parcimonie cependant, comme le mentionne @HTeuMeuLeu Outlook 2013 ne supporte pas les cellules de moins de 4px de haut.
  • Les largeurs sont données directement à nos tableaux et à nos cellules (<td>), cependant l’image du chaton étant plus large, elle va agrandir la dernière cellule.
  • Il est tout à fait possible d’utiliser à l’intérieur de cette mise en page des éléments <div><p>, listes <ul><ol> et autres éléments HTML.
  • Il est possible d’utiliser les différents attributs de tableau (certains obsolètes hélas) pour un affichage plus efficace :
    • valign="top" ou valign="bottom" pour choisir l’alignement du contenu en haut ou bas de cellule <td>
    • bgcolor pour donner une couleur de fond à la cellule <td>
    • border pour définir la largeur des 4 bordures (zéro équivalant à pas de bordure) et bordercolor pour définir une couleur de bordure (il n’est pas possible de ne définir qu’une bordure des 4 bordures à la fois)
    • cellpadding="0" pour définir un espacement de zéro entre le contenu de la cellule et sa bordure et cellspacing="0"  pour définir un espacement de zéro entre les différentes cellules.
    • colspan="X" pour fusionner X cellules
    • align="left" ou align= »right » ou align="center" pour aligner le texte

Conseils “CSS” pour un affichage optimal

Pour s’assurer que les styles CSS soient bien pris en compte, il existe quelques règles simples à respecter.

Règles générales

Dans notre cas, pour la couleur des titres, nous avons placé des instructions CSS dans l’en-tête, mais répété ce code en ligne (attribut style) pour être sûr qu’il soit pris en compte dans différents types de clients. Tout d’abord si le design vous le permet, évitez les images de fond en CSS et préférez les couleurs pleines. Si vraiment vous souhaitez ajouter une image de fond, il existe un petit outil nommé emailbg qui vous propose un code compatible avec la majorité des clients mail. Mais rappelez vous qu’une image c’est autant de poids à télécharger de plus pour le mail.

Lorsque vous écrivez du code CSS, qu’il soit en ligne ou dans l’en-tête <head>, évitez de raccourcir les propriétés. Un exemple concret est celui de la police d’écriture : séparez taille, famille et line-height au lieu d’utiliser la propriété raccourcie font. Il en va de même pour les couleurs : préférez les couleurs en hexadécimal, et l’écriture longue. Il vaut donc mieux utiliser pour du blanc #FFFFFF que #FFF même si les deux fonctionnent théoriquement.

Les liens

Beaucoup de clients mail vont écraser le style de vos liens, qu’ils soient en ligne ou non d’ailleurs. C’est assez exaspérant de se retrouver avec le lien “bleu par défaut”, qui peut en plus être totalement illisible en fonction de votre couleur de fond, mais il existe une astuce un peu lourde certes qui consiste à ajouter un span, et à mettre votre couleur de lien sur la balise <a> et sur le <span> comme ceci :

<a style="color:#255D5C;" href="www.alsacreations.com"><span style="color:#255D5C;">Créé pour Alsacreations.com</span></a> 

Les effets au survol sont également peu supportés. Il est cependant possible de les utiliser dans les déclarations CSS placées dans <head>.

Alignement des images

Nous l’avons déjà vu, les flottants ne sont pas vraiment utilisables sur tous les moteurs de rendu. Pour aligner une image à droite par exemple, il vous reste deux solutions :

  • Créer un tableau qui va avoir une cellule à gauche pour le texte, et une cellule à droite de la taille de l’image pour l’image. Cela implique évidement de la connaître d’avance, ou dans le cas de campagnes automatisées, de tailler les images en fonction du modèle.
  • Utiliser l’attribut align="right" pour arriver à ce type de rendu.

Bonus : styler les images non chargées en CSS

Dans la mesure où certains clients de mail ne vont pas afficher vos images par défaut, il est possible de “style” l’élément <img> vide et le texte alternatif qui sera affiché comme sur notre exemple :

Style de l'attribut alt du logo

Quid du CSS3, les bords arrondis et les box shadows ?

Dans la mesure où rien ne vous empêche d’utiliser les propriétés CSS3 en ligne, il est tout à fait possible de proposer des effets à base de border-radiusbox-shadow, etc. Vous vous doutez que si le support de certaines de ces propriétés a mis du temps à arriver sur les navigateurs, il en va de même pour les clients mail. Ce sont donc des propriétés “décoratives” à utiliser avec parcimonie.

Tirer profit des templates et ressources en ligne pour vous faciliter la tâche.

Des services tel que Mailchimp et Campaignmonitor se sont depuis longtemps spécialisés dans l’e-mailling. Campaignmonitor propose un système de constructeur en ligne.

Build Campaignmonitor

Même si le code n’est pas parfait, vous pouvez télécharger le template pour l’observer et le décortiquer. La partie de l’en-tête est particulièrement interessante puisqu’elle propose bon nombre de petites lignes de CSS testées et approuvées pour améliorer l’affichage sur différents clients mail.

Mailchimp propose également une série de ressources en ligne et templates.

Mailchimp Templates

Là encore, l’idée est de jeter un coup d’oeil au code, de se l’approprier et voir ce qui pourrait servir à votre projet. La galerie de templates peut également vous aider si vous êtes en manque d’inspiration.

Enfin le projet Emailology vous propose plus ou moins la même chose avec son “Email boilerplate”. Là encore le code proposé dans le header est particulièrement bien documenté et vous proposera différentes lignes de CSS pour gérer plusieurs clients mail. La partie “Client tips & tricks” rassemble différents bugs constatés sur différents clients web, desktop et mobile.

E-mailing et responsive

Je ne pouvais pas finir un article en 2013 sur les e-mails HTML sans vous toucher un mot à propos du responsive web design dans les clients mail mobiles.

La première chose dont il faut avoir conscience, c’est qu’il n’est pas possible d’avoir des Media Queries en style CSS en ligne. Un e-mail responsive sur un client qui ne supporte pas le CSS dans <head> est donc d’ores et déjà exclu. Je pense ici au client natif de Gmail pour Android (et desktop d’ailleurs).

Pour le reste vous pouvez trouver un tableau récapitulatif des clients mobiles et leur support sur ce site ainsi qu’un tableau plus détaillé sur campaignmonitor. Vous le constaterez, le support des clients mail mobile natif pour les media-queries n’est pas mauvais du tout. Optimiser votre newsletter pour les clients mail qui supportent le responsive est donc un bonus intéressant qui ne risque pas d’affecter les autres clients, si vous avez le temps (et le budget), ça peut être intéressant de le faire.

Pour créer une modèle de mail responsive, c’est plus ou moins comme pour un site mobile, nous allons utiliser les Media Queries. Nous allons également devoir ajouter des classes à nos éléments de tableau pour pouvoir les cibler (car rappel : une règle Media Query en style ligne n’est pas possible).

Démonstration en ligne d’e-mail responsive

Et voici le rendu testé sur le client natif Android 4. En portrait, la requête de média placée à 480 pixels est prise en compte, en paysage c’est l’affichage normal puisque la taille de l’appareil en paysage dépasse les 480 pixels.

Screenshots de la template repsonsive sur Android ICS

Nous avons au final ajouté que très peu de code : une déclaration @media pour changer le design pour les clients qui ont une largeur maximum de 480px. Nous avons ajouté des classes à nos éléments de tableau pour pouvoir les cibler, et en changer la largeur :

@media only screen and (max-width: 480px) { table[class=w275], td[class=w275], img[class=w275] { width:135px !important; } table[class=w30], td[class=w30], img[class=w30] { width:10px !important; } table[class=w580], td[class=w580], img[class=w580] { width:280px !important; } table[class=w640], td[class=w640], img[class=w640] { width:300px !important; } img{ height:auto;} table[class=w180], td[class=w180], img[class=w180] { width:280px !important; display:block; } td[class=w20]{ display:none; } } 

Remarques sur ce code CSS :

  • Nous utilisons le sélecteur d’attribut [class=w275] au lieu de .w275 pour éviter que le client Yahoo! affiche la version responsive . Ce client pour une raison obscure prend en compte le contenu des Media Queries, même si la condition de largeur maximum n’est pas respectée.
  • Nous passons nos trois cellules de tableau de 180 px de large en 3 lignes avec un display:block et une largeur de 280px, pour que leur contenu soit à nouveau lisible.

Bien sûr d’autres améliorations sont possibles, il s’agit ici uniquement du repositionnement/redimensionnement des blocs pour que l’e-mail « entre » dans l’affichage client mobile, mais vous avez là une bonne base pour un début de travail. Pour aller plus loin sur le sujet des e-mails responsive et si vous n’êtes pas allergiques à l’anglais, je vous conseille vivement d’aller jeter un oeil au dossier de campaignmonitor sur le sujet : Building responsive 2-to-1 column layouts.

Enfin, pour aller plus loin dans le design et l’intégration d’e-mail en général, je vous propose une selection de quelques liens et outils :

Confier la création pro de votre email template à https://3vision-group.com

Agence web

Une offre ultra complète 3Vision-Group

Nous vous proposons une offre ultra complète pour le développement et la mise en ligne de votre site web afin que vous puissiez vous concentrer sur le cœur de votre activité .

Création de Site web

Nom de domaine

Hébergement

Maintenance
Conception & Design

Une conception ergonomique assurant un confort de navigation optimal de votre site web et un design mettant en valeur votre activité.

Développement & Intégration

Un site web maintenable, sécurisé, performant et évolutif , grâce à l’utilisation des dernières technologies et des meilleurs pratiques de développement.

Responsive Design

Bénéficiez d’un affichage et d’une utilisation optimale du site web sur les différentes tailles d’écrans et différents types d’appareils (PC, Tablette, Smartphone).

Référencement Naturel

L’adaptation du contenu de votre site aux bonnes pratiques de référencement vous garantira la meilleure position possible dans

Astuces

1) Introduction.

Nous allons aborder la question du protocole ‘SSL’ (Secure Sockets Layer) qui est un protocole de sécurisation des échanges sous internet. Pour ce faire, nous allons d’une part configurer apache et d’autre part créer et installer des certificats sous windows.

À l’origine, le standard SSL a été créé et développé par la société Netscape. Aujourd’hui SSL a évolué et l’on devrait plutôt parler de TLS (Transport Layer Security) dont la dernière version finalisée est la TLS v1.2 normalisé en 2008. Une nouvelle version, la TLS v1.3 est en cours d’élaboration depuis 2015, au moment où j’écris ce didicticiel.

Nous n’aborderons pas les questions historiques sur ces normes de sécurités, ni le fonctionnement des échanges entre le client et le serveur, mais simplement comment mettre en oeuvre ce protocole dans un environnement de test sous wampserver.

2) Ce qu’il faut savoir.

Pour les tests, j’ai utilisé deux navigateurs, à savoir Google Chrome et Mozilla Firefox. Je tiens à signaler qu’il existe quelques petites différences que nous aborderons au moment du rangement des certificats.

Comment reconnaitre l’état de sa connexion sous Google Chrome ? A vrai dire, j’ai travaillé sur ce navigateur car les symboles étaient bien plus parlant que chez les autres navigateurs.

Vous trouverez toutes les explications de ces symboles en vous rendant sur la page « Vérifier la connexion d’un site Web » de Google.

Si dans la barre des adresses, vous avez le symbole Blank Page Icon, votre connexion n’est pas sécurisé. Cela ne veut pas dire que vous avez un problème, mais que vous utilisez le protocole « http ». En cliquant sur ce symbole, voici ce que vous pouvez obtenir :

Connexion http non sécuriséeDans le cas d’un connexion sécurisée, vous devez voir apparaitre le symbole Cadenas Vert que l’on nomme cadenas vert. Il fait l’usage du protocole « https » et normalement, tout ce passe correctement, comme dans l’exemple ci-après :

Connexion https sécuriséeAvec ce symbole Cadenas barré, vous rencontrez un problème de sécurité, bien que vous fassiez l’usage du protocole « https » comme dans l’exemple ci-après :

Connexiion https non sécuriséeQuatrième et dernier symbole Cadenas attention, la connesion est sécurisée mais la clef publique est absente, comme dans l’exemple ci-après :

Connexion https sans clef publiqueVous risquez d’obtenir quelques différences d’interprétations avec les autres navigateurs, mais avec Google Chrome, nous aurons une interprétation facile à interpréter. Notre but, avec ce didacticiel est d’obtenir le cadenas vert Cadenas Vert pour nos connexion sécurisé.

3) Vérification à faire avant de faire nos tests.

Nous nous trouvons dans un WampServer normalement configuré, dont l’icône est de la couleur verte. Autrement dit, nous avons une configuration en état de marche. Pour effectuer nos tests, nous avons besoin d’activer des modules d’apache, et des extensions de php, pour utiliser le protocole SSL et créer nos certificats.

3-A) Activation des modules d’apache.

Nous nous rendons dans l’icône de WampServer, en cliquant dans l’onglet « apache », puis dans « Module d’apache ». Nous devons nous assurer que les deux modules suivants sont bien activés :

flechesocache_shmcb

flechessl

S’ils ne sont pas cochés, alors vous devez cliquer dessus. Cela va se traduire dans le fichier ‘httpd.conf’ par la suppression du commentaire devant les deux lignes suivantes :

LoadModule socache_shmcb_module        modules/mod_socache_shmcb.so
LoadModule ssl_module                  modules/mod_ssl.so

Normalement, il n’y a rien d’autre à faire, mais assurez-vous que ces modules sont bien présents dans le répertoire ‘/apache/modules’.

flechemod_socache_shmcb.so

flechemod_ssl.so

Sur ce point, nous reviendrons lors de la configuration d’apache afin d’introduire le protocole ‘SSL’ sur le site ‘localhost’.

3-B) Activation des extensions php.

Nous nous rendons aussi sous Wampserver, en cliquant dans l’onglet « php », puis dans « Extensions php ». Nous devons nous assurer que l’extension ‘OPENSSL’ soit bien activé.

flechephp_openssl

S’il n’est pas coché, vous devez cliquer dessus. Dans le fichier ‘php.ini’, vous obtiendrez l’extension sans commentaire et vous pouvez ajouter le paramétrage suivant :

extension = php_openssl.dll

[openssl]
openssl.cafile =
openssl.capath =

Nous laissons en l’état ce paramétrage, vu que l’autorité de certification (CA) sera renseigné sous apache. Afin de vérifier que l’extension ‘OPENSSL’ soit bien activé, nous nous rendons dans ‘phpinfo()’. Voici ce que nous devons obtenir :

extension php_openssl sous phpinfo()Normalement, c’est terminé. Vous pouvez vérifier que vous avez bien dans le répertoire « /php/ext » :

flechephp_openssl.dll

ainsi que les DLL dans le répertoire « /php » :

flechessleay32.dll

flechelibeay32.dll

Pour travailler avec cet extension ‘OPENSSL’, nous avons besoin du fichier ‘OPENSSL.CNF’ que nous trouvons, soit dans le répertoire « /php/extras/ssl » ou soit dans le répertoire « /apahe/conf ». À partir d’une de ces copies, nous allons créer un environnement de travail afin de créer nos certificats ‘SSL’.

4) Configuration d’apache.

Nous nous rendons dans le fichier ‘httpd.conf’ afin de renseigner d’une part la configuration ‘SSL’ général à tout le serveur Apache et d’autre part le site ‘localhost » en VirtualHost, qui va utiliser le protocole ‘https’. Dans mon ‘httpd.conf’, l’emplacement de WampServer est paramétré avec la variable d’apache « ${Repertoire} », qui contient la valeur « F:/Wamp ». C’est la seule particularité vis-à-vis de mon environnement.

Cette configuration se décompose en trois parties que voici :

4-A) Activation de l’écoute du port 443.

Nous ajoutons les directives suivantes afin de signaler à Apache que l’on désire faire une écoute sur les ports 80 et 443.

Listen 80 http
#
<IfModule ssl_module>
	listen 443 https
</IfModule>

Pourquoi ces deux ports ? Le protocole « http » utilise le port 80 pour ses échanges alors que le protocole « https » utilise avec le port 443. Il est donc impératif d’activer l’écoute du port 443 pour nos échanges sécurisés.

4-B) Configuration du protocole ‘SSL’.

Nous retrouvons nos deux modules que nous avons activé précédemment. Afin de pouvoir désactiver ces modules, nous devons toujours placer le paramétrage ‘SSL’ dans un bloc testant l’activation du module ‘SSL_MODULE’.

# -------------------------------------- #
#     Module SSL                         #
# -------------------------------------- #

LoadModule ssl_module                  modules/mod_ssl.so
LoadModule socache_shmcb_module        modules/mod_socache_shmcb.so

<IfModule ssl_module>
	SSLProtocol +All -SSLv3
#
	SSLRandomSeed startup builtin
	SSLRandomSeed connect builtin
#
	SSLCipherSuite HIGH:!aNULL:!MD5
#
	SSLPassPhraseDialog             builtin
#	
	SSLSessionCache                 "shmcb:${Repertoire}/tmp/ssl_scache(512000)"
	SSLSessionCacheTimeout          300
</IfModule>

Deux remarque à faire :

flecheNous rejetons le protocole SSLv3 car il a été interdit d’utilisation par le navigateur Mozilla Firefox (voir ce lien en anglais).

Suite aux vulnérabilités découvertes sur la version ‘SSLv3’, voici ce que vous pouvez ajouter :

	SSLProtocol -ALL +TLSv1 +TLSv1.1 +TLSv1.2
#
	SSLHonorCipherOrder On
	SSLCipherSuite ECDHE-RSA-AES128-SHA256:AES128-GCM-SHA256:HIGH:!MD5:!aNULL:!EDH:!RC4
#
	SSLCompression off

Ainsi nous utilisons que le protocole ‘TLS’ pour les version 1.0, 1.1 et 1.2 qui est la dernière.

La directive ‘SSLCipherSuite’ définie les algorityhmes de chiffrement que vous utilisez.

flecheDans nos certificats, nous n’utilisons pas de ‘Pass Phrase’. Si vous désirez mettre un mot de passe, voilà comme procéder :

	SSLPassPhraseDialog             "exec:${Version_Apache}/conf/Certificat/passphrase.txt"

Si vous désirez plus d’explication, je vous conseille de lire la documentation officielle d’apache.

4-C) La configuration du site ‘localhost’.

Nous avons configuré notre site ‘localhost’ avec le protocole ‘http’ pour le port 80, comme ci-après :

# -------------------------- #
#     Localhost sans SSL     #
# -------------------------- #

<VirtualHost 127.0.0.51:80>
	ServerName localhost
	ServerAdmin [email protected]
	DocumentRoot "${Repertoire}/www/"
#
	ErrorLog  "${Repertoire}/www/Logs/error.log"
	CustomLog "${Repertoire}/www/Logs/custom.log" common
#
	<Directory />
		Options -Indexes +FollowSymLinks +MultiViews
		AllowOverride none
		<RequireAny>
			Require local
		</RequireAny<
	</Directory>
</VirtualHost>

Afin de conserver un accès non sécurisé, nous pouvons laisser cette déclarative en l’état dans le fichier ‘httpd.conf.

Si vous désirez faire une redirection vers votre site sécurisé, autrement dit, vous désirez forcer l’url par un « https://localhost », il suffit dans ce virtualHost d’ajouter la ligne suivante :

	Redirect / https://localhost/

Nous ajoutons dans le fichier ‘httpd.conf’ cette autre déclarative de ‘localhost’, mais cette fois-ci sur le port 443 avec le protocole « https » sécurisé :

# -------------------------- #
#     Localhost avec SSL     #
# -------------------------- #

<IfModule ssl_module>
	<VirtualHost 127.0.0.51:443>
		ServerName localhost
		ServerAdmin [email protected]
		DocumentRoot "${Repertoire}/www/"
#
		ErrorLog  "${Repertoire}/www/Logs/error.log"
		CustomLog "${Repertoire}/www/Logs/custom.log" common
#
		SSLEngine on
		SSLCertificateFile      "${Version_Apache}/conf/Certificat/Site/localhost.crt"
		SSLCertificateKeyFile   "${Version_Apache}/conf/Certificat/Site/localhost.key"
#
#		SSLCACertificatePath    "${Version_Apache}/conf/Certificat/Ca"
		SSLCACertificateFile    "${Version_Apache}/conf/Certificat/Ca/Ca.crt"
#
		SSLVerifyClient none
		SSLVerifyDepth  10
#
		<Directory />
			SSLOptions +StdEnvVars
			Options    -Indexes +FollowSymLinks +MultiViews
			AllowOverride none
#
			<RequireAny>
				Require local
			</RequireAny>
		</Directory>
#
		<FilesMatch "\.(cgi|shtml|phtml|php)$">
#			SSLOptions +StdEnvVars
		</FilesMatch>
#
		BrowserMatch "MSIE [2-5]" nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0
		CustomLog "f:/wamp/www/Logs/custom.log" "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
	</VirtualHost>
</IfModule>

Quelques remarques :

flechenous avons conditionné le virtualHost en fonction de l’activation du module ‘SSL’. Sans cela, nous aurions une erreur en désactivant le module ‘SSL’.

fleche« SSLCertificateFile » désigne le certificat serveur qui a été signé par un CA. (CRT)

fleche« SSLCertificateKeyFile » désigne le fichier contenant la clef privée. (KEY)

fleche« SSLCACertificateFile » désigne le certificat d’autorité de certification (CA) auto-signé. (CA CRT)

fleche« SSLCACertificatePath » désigne le chemin vers un répertoire contenant tous les CA.

fleche« SSLVerifyClient » désigne la façon dont le client doit s’identifier.

fleche« SSLVerifyDepth » désigne le niveau de profondeur de la vérification du certificat client.

fleche« CustomLog » contient la nouvelle présentation des messages d’erreurs en provenance du ‘SSL’.

Pour tester une connexion sécurisée, c’est largement suffisant !

5) Comment créer nos certificats.

Pour ce faire, nous avons besoin de créer un environnement de travail, destiné à la création de nos certificats. Nous devons récupérer le fichier ‘OPENSSL.CNF’ que nous avon signalé ci-dessus, au paragraphe 3-B). Nous devons le modifier pour l’adapter à nos spécificités.

Vous pouvez nommer comme vous le désirez, votre répertoire de travail. À l’intérieur de celui-ci, pour stocker les étapes intermédiaires de la création de vos certificats, j’ai créé un répertoire de stockage, de nom « /certificats ». Je sais, ce n’est pas très original. Si vous désirez le modifier, vous pouvez le renommer comme bon vous semble. Ne pas oublier de le modifier dans le fichier ‘OPENSSL.CNF’ (ce qui est en rouge) dont voici un exemplaire, ci-après :

RANDFILE                       = ./Certificats/.rnd

#==================================================================#
[ ca ]
default_ca                     = CA_default

#==================================================================#
[ CA_default ]

dir                            = ./Certificats
certs                          = $dir/Cacerts
new_certs_dir                  = $dir/NewCerts
private_dir                    = $dir/Private    

database                       = $dir/Other/index.txt
serial                         = $dir/Other/serial.txt

certificate                    = $certs/ca.crt
private_key                    = $private_dir/ca.key
RANDFILE                       = $private_dir/ca.rnd

default_days                   = 4383
default_crl_days               = 30
default_md                     = md5
preserve                       = no

policy                         = policy_anything

Hormis le nom du répertoire de stockage, vous ne pouvez pas changer les autres répertoires, qui sont nécessaire à l’utilitaire ‘OPENSSL’.

Dans ‘Default_days’, j’ai mis une période de validité de douze ans, ce qui correspond exactement à une période couvrant quatre années bisextiles, soit 4383 jours. Je n’ai pas touché au reste du paramétrage.

Ci-après, nous définissons les champs qui sont obligatoires, de ceux qui sont facultatifs. Il vous est demandé quelques renseignements d’identifications de votre certificat.

#==================================================================#
[ policy_match ]
countryName                    = match
stateOrProvinceName            = match
localityName                   = match
organizationName               = optional
organizationalUnitName         = optional
commonName                     = supplied
emailAddress                   = optional

#==================================================================#
[ policy_anything ]
countryName                    = optional
stateOrProvinceName            = optional
localityName                   = optional
organizationName               = optional
organizationalUnitName         = optional
commonName                     = supplied
emailAddress                   = optional

Ci-après, nous définissons les valeurs par défaut et les caractéristiques du mot de passe.

#==================================================================#
[ req ]
default_bits                   = 4096
default_keyfile                = privkey.pem
distinguished_name             = req_distinguished_name
attributes                     = req_attributes

#==================================================================#
[ req_distinguished_name ]
countryName                    = Country Name (2 letter code)
countryName_default            = FR
countryName_min                = 2
countryName_max                = 2

stateOrProvinceName            = State or Province Name (full name)
stateOrProvinceName_default    = Aquitaine

localityName                   = Locality Name (eg, city)
localityName_default           =

0.organizationName             = Organization Name (eg, company)
0.organizationName_default     =

organizationalUnitName         = Organizational Unit Name (eg, section)
organizationalUnitName_default =

commonName                     = Common Name (eg, your website’s domain name)
commonName_max                 = 64

emailAddress                   = Email Address
emailAddress_default           = [email protected]
emailAddress_max               = 40

#==================================================================#
[ req_attributes ]
challengePassword              = A challenge password
challengePassword_min          = 4
challengePassword_max          = 20

Et enfin, les caractéristiques du certificat d’autorité (Authority Certificate = CA)

#==================================================================#
[ x509v3_extensions ]

# These extensions are added when 'ca' signs a request.

# This goes against PKIX guidelines but some CAs do it and some software
# requires this to avoid interpreting an end user certificate as a CA.

basicConstraints=CA:TRUE

# Here are some examples of the usage of nsCertType. If it is omitted
# the certificate can be used for anything *except* object signing.

# This is OK for an SSL server.
# nsCertType			= server

# For an object signing certificate this would be used.
# nsCertType = objsign

# For normal client use this is typical
# nsCertType = client, email

# and for everything including object signing:
# nsCertType = client, email, objsign

# This is typical in keyUsage for a client certificate.
# keyUsage = nonRepudiation, digitalSignature, keyEncipherment

# This will be displayed in Netscape's comment listbox.
nsComment			= "OpenSSL Generated Certificate"

# PKIX recommendations harmless if included in all certificates.
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer

# This stuff is for subjectAltName and issuerAltname.
# Import the email address.
# subjectAltName=email:copy
# An alternative to produce certificates that aren't
# deprecated according to PKIX.
# subjectAltName=email:move

# Copy subject details
# issuerAltName=issuer:copy

#nsCaRevocationUrl		= http://www.domain.dom/ca-crl.pem
#nsBaseUrl
#nsRevocationUrl
#nsRenewalUrl
#nsCaPolicyUrl
#nsSslServerName

# This is required for TSA certificates.
# extendedKeyUsage = critical,timeStamping

#==================================================================#
[ v3_req ]

# Extensions to add to a certificate request

basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment


#==================================================================#
[ v3_ca ]

# Extensions for a typical CA
# PKIX recommendation.

subjectKeyIdentifier=hash

authorityKeyIdentifier=keyid:always,issuer

# This is what PKIX recommends but some broken software chokes on critical
# extensions.
#basicConstraints = critical,CA:true
# So we do this instead.

basicConstraints = CA:true

6) Usage de la commande ‘OPENSSL’ pour créer nos certificats.

Le but de ce paragraphe est de montrer comment créer des certificats nécessaire à notre exemple :

flecheun certificat d’autorité de certification auto-signé que l’on note ‘CA’.

flecheun certificat serveur (CSR).

flecheun certificat client (PFX).

flechela clef privée (KEY).

Nous allons passer en revue les différents paramétrages de la commande ‘OPENSSL’ pour produire la création de nos trois certificats et de ma clef privée. Afin d’illustrer chaque commande, je donnerai le contenu du fichier ainsi produit.

7) Création d’un certificat d’authenticité auto-signé (CA).

Afin d’être dans un cas réel, nous avons besoin de créer un certificat faisant office d’autorité de certification noté CA, sous le nom ‘Artemus & Cie ».

Dans les étapes ci-après, nous détaillons la création de ce certificat CA qui va nous servir, par la suite, pour signer le certificat client que nous allons utiliser pour nous identifier vis-à-vis du serveur de nom ‘localhost’.

7-A) Générateur d’un nombre pseudo aléatoire.

openssl rand  -out %DIRNAME%/Private/Ca.rnd  -base64  1257

La variable d’environnement ‘%DIRNAME%’ contient le chemin vers le répertoire ‘/certificats’ que nous avons créé précédemment dans notre environnement.

Nous produisons un nombre aléatoire dont la longueur est de 1257 bits. C’est juste un exemple que nous utilisons et vous pouvez mettre autre chose que 1257. Voici ce que nous obtenons dans le fichier ‘ca.rnd’ :

xvVMxMaCINBjdiWwURQ9aPgyIrUyM6jP5DRsw3g/nCr3rjZ8j1Xai7FQcLLAqQ78
WgR5s8ATZC5I1/5JGZUSPRMdDUmCrKrgA3l44QTM7vAFk0MCBGYIvCHxM3aKoCG5
cE0yj5NlqckgbYsDHaqs/UPsPnMz0F+ApqjjdUL0kQzZ53N9txNgR5B6oQ2R8j0y
Yv2RyqrIvOwKa0QGLgFKZbKw8Q7FCYh0WnOLJU8v4YLzo2iekFwdSiiMmQ7QNZKo
4vxu7rP9dK5LdnPE01zpjDxslZ6DPazIE38HOfeEPFrp16r1rEEqfLSbpCuFgGBP
sP532oWTDQ03PG904ZScPZ21I7ysMyA1AyZS0SpcjLXgO/Ek6DEYkRVNXUS1WjGr
7ZQowiUqrOfLPj+YpUsRxdT3iodIxrbyaARx4jYfmFYFktYqaDOcgGlfDtiZ1d+k
BQaWi6KgB4SyHkXt5R/GPlBtTqdflCV+MOlSl0MKrC+UkPjtPmLMRga9Wl0caSW3
JeBPL+hWJ0ZayKtXMlwiOqSKn0wjw+7ba1NxF4HANeFVV3GwQB7ma3WagfA3P4Ei
O+qfCMaj7+BD+FTnRroVK0nz/JtlZtY9gRGf5SAyUchCGB2peb4g8GxbK3r1jmME
y/AGbtHINzAsRCxnIgFG4qbnFCQ6BnjUcnIYKj88OHQrujjuaC4c+dB/77VDmvLm
wSn/C1zYzwPDSQvLBZcOscY2TwTBNUrRcPKuIAElejq0QlVlj5miraBTgz+Jxn4d
1Sz+938XRkoLG2gjDnblQJiPFZ1fzS3oCt+b3/gvsQoeYtNPPbIUU0801O/p6CLU
aS3vriXTgnbvHzOX4CYAWBb3vGU4Ww7QGXJCPBTCFw5OO82ii6ALdTdbq/cE4PXS
4XhfHnQiouN4+f0M0hDjCCRs7RK0xKYq1/vd7x9bR95zVfxh0lUm7iZx7vNc6HkQ
lasQLOPxrpQu/lRsZxtjB+UIY8aOdRGeni9Qhjc9KacDlPpgWFd9syK7BfRJQoSi
kHBE9+K9CspQFE3x1MgoK2GYLHQAQUGrv+jQoA68CIEgjdryqXEQoMitAz0LR0b7
xNS1mdSryzwehKExzJcAJHDq1rKQSzV9qTKq5KJllHJ1pG/3GLyaMcSInYELLkZt
HLdTiOg+6W5gcai91AXz4imXZ+qkuiO7EXj/s8QazKjnrQLKcwY3opU6AXsIOfUi
55Qx/jG1afxj+0++eLqCaiqulN7dxcLjtN0/7CgqDOd5pOsOF5Q7j3WwE+jnPhem
1J+3Gc4a/ZMeN2VOa1jk5HryQVfDuVo/dMKJScKtAhAl5dstKMpsDujfhMwtmojw
AD7Od4pkvjhdHhBj1+r+BobHSghFlq9Jf/dhzvGEYDSivtRf1//AajmO23fltEvR
DOb5H+O3VVOLx8XLkZ3rbV/oqJWp22f03xh7av3IkbZm60O51FyalB+Njqsc2wr1
QGPkaPIbqmIy9M91GMOtSdiHfYYV4mwqrQcR9aF5BDgV5eL1exWDC91469TY8c1I
Nyv7IEQb4t2Lig3gqH+hGKEUIq+QQ0ZepEFlCI7yhQ75gItA7LhmrloztXdYA1Ut
DMNRlr0R2nNeRJBrear1pm9kotP0lYH7ij93etgwTt+mqCJQddUxfWzc6Af0eFze
TpZG1i1L5Ca5

Chaque ligne fait exactement 64 caractères, et il y a 26 lignes + 12 caractères, ce qui donne un total de 1676 caractères. À chaque exécution, vous obtenez une nouvelle séquence aléatoire.

7-B) Produire une clef RSA privée.

openssl genrsa  -out %DIRNAME%/Private/Ca.key  -rand %DIRNAME%/Private/Ca.rnd  4096

Nous reprenons la séquence aléatoire que nous avons produit précédemment. 4096 est la taille en bit de la clef privée. Voici ce que nous obtenons dans le fichier ‘Ca.key’ :

Aucun ‘pass phrase’ sera demandé lors de la création de la clef privée. Si vous en désirez un, il suffit d’ajouter l’un des codes d’encryptage ci-après : -aes128 -aes192 -aes256 -camellia128 -camellia192 -camellia256 -des -des3 -idea.

-----BEGIN RSA PRIVATE KEY-----
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
-----END RSA PRIVATE KEY-----

Nous avons deux lignes servant de prologue et d’épilogue à chaque contenu, dont le message commence et se termine toujours par cinq tirets. Nous retrouverons ce même format dans les autres fichiers produit par la commande ‘OPENSSL’.

7-C) Création d’une demande de signature.

openssl req  -new  -sha256  -key %DIRNAME%/Private/Ca.key  -out %DIRNAME%/Cacerts/Ca.csr
  -subj "/C=FR/ST=Aquitaine/L=/O=Artemus & Cie/CN=Artemus & Cie"

Pour créer cette demande de signature, nous nous servons de la clef privée créé précédemment. Nous renseignons cette demande avec les caractéristiques qui nous intéresse. Ici, mon futur certificat se nommera ‘Artemus & Cie’. Voici la requête que nous obtenons dans le fichier ‘Ca.csr’ :

-----BEGIN CERTIFICATE REQUEST-----
MIIEqjCCApICAQAwZTELMAkGA1UEBhMCRlIxEjAQBgNVBAgMCUFxdWl0YWluZTES
MBAGA1UEBwwJTW9udGlnbmFjMRYwFAYDVQQKDA1BcnRlbXVzICYgQ2llMRYwFAYD
VQQDDA1BcnRlbXVzICYgQ2llMIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKC
AgEA0f4LWQPPRu33LiWiQQKukJfVfKLNPouykc90FL7CrW8ymaayW+0nj/FVrca6
016a3CC2YiYq/FQabvKMwsruo+BzmvDYNY7kNIXpPFeadQKxWTkssCVvGICeZT54
8W685uKjFIvBZLqP5ncNv6LZrFS6/vZTt9TVFuGAzNje9vBH4Ry4cqnWPbXc/pFi
/UbYxdD/NbZQHZCVOVZCDeivYiiGlZLyutbi39CgXtqIztj5ldOvemexx5aXGyba
SO811wgZMjBIliwnUmNpRAUMWWLLSVHHpU58xTKcUTeNUnxT+MiDdOUKhr3tXrsC
aT0XfMRHxnnnc33WNLXhJr9yac44dUZzTXf0cpmSvwBmjTNU2WJB72YnrLfhoV7U
4QfTB3kFzg8/i59Qlv3WBaLn/0+FOIhgx5gKg0blqD4+WqNNqZ8GchfzM2Yp1UYg
Ol8gP5Kf2Y3uTxsN9LGMF4XdZoj/AEtxqZupW6VjpSYJnEwvJIIQKRn7KT2tU/lr
x+ys8BDq9+BjmuAJ1KF1FIUy388dTZO51EQdf10UYYUXQ6Rvzr1UYIMr/qoRGz0+
QxGM03IBbeRVC6jmxYBVUIbNiX95W9pPWz4kSPf7p8Gc1X9ucN/Ols3yivMM4oE1
DLctKfdA7BkyU2mNn9/7L+g1FDWknDk88d2wTGdYiJzvLZsCAwEAAaAAMA0GCSqG
SIb3DQEBCwUAA4ICAQCqtSo7jS80reISJ1dG5pj7ufLeSqoCj1m8H7oqpWV0Vt+l
CRw/oFw7n4B2lzhLFKD+uYYxGhL0aWhyMMqCCCZR3r08b8HRZtmx17RW3o1YdU/z
z2X6b1Bue8XytgUGiKbeZQh2dByVrDhMZ2XVkkqbr65U8t6XujjUPMj3FnvtSFgI
KLqWDD9KTG9TnuL7exUXW6hSepZpUnRI64kyJcVA97EZQjg7+K1YhuQOftL58qrZ
PfHiuBfS4ht4W9NyPVFaGMnWlE556AdR+UJ925G4lawOhWoqWN9ZplB4/90rbVDS
PeBf2m2aMYbkcceIMthRxyWItyQrWZdQPlWXR+w+J04hljIvqR1dgInmwz1qyS3V
6bA09EiM/nNJB0pp3yF2Ks7Ymh/pYzGkDLBG5IaJcpFroUTApWAbQiTjtUZmXRyP
rVz/A7gTTSUbvRLZ8ZPZbKMjQoyStBS+dXpeLvphpfRPMM2asxc1gEuYvDY4CvWf
Qyb7wVbTS+7/MU6s9/Po7pdUEID5jvChgj+AT11BlRTDhdcwTZ2tfL4QtU5ZK3w8
A84/kEN4pZBAuk5QUHoloythGDFRwbwU5hbfw6jEKNxWJBHdhNBzPkEht1F17Y7s
wx1snWovzAonNmBTN7mHCo12aF6HHzM0TRz96c+2TUAaGkGgvENJwMrnthoL1g==
-----END CERTIFICATE REQUEST-----

7-D) Création d’un certificat auto-signé.

openssl x509  -req  -days 4383  -sha256  -in %DIRNAME%/Cacerts/Ca.csr
  -signkey %DIRNAME%/Private/Ca.key  -out %DIRNAME%/Cacerts/Ca.crt

Pour créer ce certificat auto-signé, nous nous servons de la demande de signature et de la clef RSA privée. En fait, la demande de signature n’était pas nécessaire mais nous avons préféré décomposer les étapes afin de comparer le résultat lors de la création d’un certificat client signé, justement ce certificat d’autorité.

-----BEGIN CERTIFICATE-----
MIIFRjCCAy4CCQDkCFUxKTZCzzANBgkqhkiG9w0BAQsFADBlMQswCQYDVQQGEwJG
UjESMBAGA1UECAwJQXF1aXRhaW5lMRIwEAYDVQQHDAlNb250aWduYWMxFjAUBgNV
BAoMDUFydGVtdXMgJiBDaWUxFjAUBgNVBAMMDUFydGVtdXMgJiBDaWUwHhcNMTUw
MzI5MTYwMTM0WhcNMjcwMzI5MTYwMTM0WjBlMQswCQYDVQQGEwJGUjESMBAGA1UE
CAwJQXF1aXRhaW5lMRIwEAYDVQQHDAlNb250aWduYWMxFjAUBgNVBAoMDUFydGVt
dXMgJiBDaWUxFjAUBgNVBAMMDUFydGVtdXMgJiBDaWUwggIiMA0GCSqGSIb3DQEB
AQUAA4ICDwAwggIKAoICAQDR/gtZA89G7fcuJaJBAq6Ql9V8os0+i7KRz3QUvsKt
bzKZprJb7SeP8VWtxrrTXprcILZiJir8VBpu8ozCyu6j4HOa8Ng1juQ0hek8V5p1
ArFZOSywJW8YgJ5lPnjxbrzm4qMUi8Fkuo/mdw2/otmsVLr+9lO31NUW4YDM2N72
8EfhHLhyqdY9tdz+kWL9RtjF0P81tlAdkJU5VkIN6K9iKIaVkvK61uLf0KBe2ojO
2PmV0696Z7HHlpcbJtpI7zXXCBkyMEiWLCdSY2lEBQxZYstJUcelTnzFMpxRN41S
fFP4yIN05QqGve1euwJpPRd8xEfGeedzfdY0teEmv3Jpzjh1RnNNd/RymZK/AGaN
M1TZYkHvZiest+GhXtThB9MHeQXODz+Ln1CW/dYFouf/T4U4iGDHmAqDRuWoPj5a
o02pnwZyF/MzZinVRiA6XyA/kp/Zje5PGw30sYwXhd1miP8AS3Gpm6lbpWOlJgmc
TC8kghApGfspPa1T+WvH7KzwEOr34GOa4AnUoXUUhTLfzx1Nk7nURB1/XRRhhRdD
pG/OvVRggyv+qhEbPT5DEYzTcgFt5FULqObFgFVQhs2Jf3lb2k9bPiRI9/unwZzV
f25w386WzfKK8wzigTUMty0p90DsGTJTaY2f3/sv6DUUNaScOTzx3bBMZ1iInO8t
mwIDAQABMA0GCSqGSIb3DQEBCwUAA4ICAQAZFYHeWlkGoYwBXxZHQCnWazRzETuV
Mut8r+DRVPmQzf3KbT1/ka5/+darR3VK+tI7nch7os8fCWLKnT3kMF6xe9Epo5aX
FmfLfleYnAE5h+njQrOWt+Y4Nsiw7P3NTWvmTaKglT21Ez5x0L3vAO235nOUz0aR
zAGn5mudbOYeeYhJbBZa0CrtSKowmaBDAef9RBrVltqGyF0oG/SLlEv5/p5v8KL2
lpB/SgL0Ijb+0takgaKikgwEweicFu5h3LrMGe6VQ2cr6ICnniu89b9LBgp+HbZ7
cIJjIJlya1QoMJNkFdHH9rXqlLz8R5721AjM4QzsCPJ7FtVSU5i9poHx7QmuFY46
lH41qknOqcu7lKmRA/Embmwe9q8Oxc2P3V1DLdI0I8F9FJZQifL7QRRO33r+aQvt
Ig3jCQ0UyEnuNg/Ytf1Db/3vcAVxz6kDt++/HGy2dhwjnV5Cf04HvZW7melppXiA
xO3+7d/WrmzjAVOHKanxkf+dO/sl6QTnMLaQ9knwEjPCHuHE80zBTI6jLWUaiKaB
OF9p+qnos9O0a/rCu4tSzAqSqRDmj/RpjVWsfgP2lR+4pbnLe2LJ7uUe0PFTmm+t
EeY3X1WQwnEGQHQ8iJeH4HsJIsY88Zm0/6sRsYF+xcsvJfkpS73Rgxv55omdl348
41Q9xOPgFRz2XQ==
-----END CERTIFICATE-----

Ce certificat qui est un ‘CA’ (certificate Authority en anglais) va nous servir pour signer le certificat client que nous allons créer un peu plus bas dans ce didacticiel.

7-E) Visualisation du certificat CA.

openssl x509  -in %DIRNAME%/Cacerts/Ca.crt  -noout  -text

Dans cet exemple, nous obtenons la visualisation du certificat CA auto-signé que nous avons produit ptécédemment. Voici le résultat obtenu :

Certificate:
    Data:
        Version: 1 (0x0)
        Serial Number:
            e4:08:55:31:29:36:42:cf
    Signature Algorithm: sha256WithRSAEncryption
        Issuer: C=FR, ST=Aquitaine, L=, O=Artemus & Cie, CN=Artemus & Cie
        Validity
            Not Before: Mar 29 16:01:34 2015 GMT
            Not After : Mar 29 16:01:34 2027 GMT
        Subject: C=FR, ST=Aquitaine, L=, O=Artemus & Cie, CN=Artemus & Cie
        Subject Public Key Info:
            Public Key Algorithm: rsaEncryption
                Public-Key: (4096 bit)
                Modulus:
                    00:d1:fe:0b:59:03:cf:46:ed:f7:2e:25:a2:41:02:
                    ae:90:97:d5:7c:a2:cd:3e:8b:b2:91:cf:74:14:be:
                    c2:ad:6f:32:99:a6:b2:5b:ed:27:8f:f1:55:ad:c6:
                    ba:d3:5e:9a:dc:20:b6:62:26:2a:fc:54:1a:6e:f2:
                    8c:c2:ca:ee:a3:e0:73:9a:f0:d8:35:8e:e4:34:85:
                    e9:3c:57:9a:75:02:b1:59:39:2c:b0:25:6f:18:80:
                    9e:65:3e:78:f1:6e:bc:e6:e2:a3:14:8b:c1:64:ba:
                    8f:e6:77:0d:bf:a2:d9:ac:54:ba:fe:f6:53:b7:d4:
                    d5:16:e1:80:cc:d8:de:f6:f0:47:e1:1c:b8:72:a9:
                    d6:3d:b5:dc:fe:91:62:fd:46:d8:c5:d0:ff:35:b6:
                    50:1d:90:95:39:56:42:0d:e8:af:62:28:86:95:92:
                    f2:ba:d6:e2:df:d0:a0:5e:da:88:ce:d8:f9:95:d3:
                    af:7a:67:b1:c7:96:97:1b:26:da:48:ef:35:d7:08:
                    19:32:30:48:96:2c:27:52:63:69:44:05:0c:59:62:
                    cb:49:51:c7:a5:4e:7c:c5:32:9c:51:37:8d:52:7c:
                    53:f8:c8:83:74:e5:0a:86:bd:ed:5e:bb:02:69:3d:
                    17:7c:c4:47:c6:79:e7:73:7d:d6:34:b5:e1:26:bf:
                    72:69:ce:38:75:46:73:4d:77:f4:72:99:92:bf:00:
                    66:8d:33:54:d9:62:41:ef:66:27:ac:b7:e1:a1:5e:
                    d4:e1:07:d3:07:79:05:ce:0f:3f:8b:9f:50:96:fd:
                    d6:05:a2:e7:ff:4f:85:38:88:60:c7:98:0a:83:46:
                    e5:a8:3e:3e:5a:a3:4d:a9:9f:06:72:17:f3:33:66:
                    29:d5:46:20:3a:5f:20:3f:92:9f:d9:8d:ee:4f:1b:
                    0d:f4:b1:8c:17:85:dd:66:88:ff:00:4b:71:a9:9b:
                    a9:5b:a5:63:a5:26:09:9c:4c:2f:24:82:10:29:19:
                    fb:29:3d:ad:53:f9:6b:c7:ec:ac:f0:10:ea:f7:e0:
                    63:9a:e0:09:d4:a1:75:14:85:32:df:cf:1d:4d:93:
                    b9:d4:44:1d:7f:5d:14:61:85:17:43:a4:6f:ce:bd:
                    54:60:83:2b:fe:aa:11:1b:3d:3e:43:11:8c:d3:72:
                    01:6d:e4:55:0b:a8:e6:c5:80:55:50:86:cd:89:7f:
                    79:5b:da:4f:5b:3e:24:48:f7:fb:a7:c1:9c:d5:7f:
                    6e:70:df:ce:96:cd:f2:8a:f3:0c:e2:81:35:0c:b7:
                    2d:29:f7:40:ec:19:32:53:69:8d:9f:df:fb:2f:e8:
                    35:14:35:a4:9c:39:3c:f1:dd:b0:4c:67:58:88:9c:
                    ef:2d:9b
                Exponent: 65537 (0x10001)
    Signature Algorithm: sha256WithRSAEncryption
         19:15:81:de:5a:59:06:a1:8c:01:5f:16:47:40:29:d6:6b:34:
         73:11:3b:95:32:eb:7c:af:e0:d1:54:f9:90:cd:fd:ca:6d:3d:
         7f:91:ae:7f:f9:d6:ab:47:75:4a:fa:d2:3b:9d:c8:7b:a2:cf:
         1f:09:62:ca:9d:3d:e4:30:5e:b1:7b:d1:29:a3:96:97:16:67:
         cb:7e:57:98:9c:01:39:87:e9:e3:42:b3:96:b7:e6:38:36:c8:
         b0:ec:fd:cd:4d:6b:e6:4d:a2:a0:95:3d:b5:13:3e:71:d0:bd:
         ef:00:ed:b7:e6:73:94:cf:46:91:cc:01:a7:e6:6b:9d:6c:e6:
         1e:79:88:49:6c:16:5a:d0:2a:ed:48:aa:30:99:a0:43:01:e7:
         fd:44:1a:d5:96:da:86:c8:5d:28:1b:f4:8b:94:4b:f9:fe:9e:
         6f:f0:a2:f6:96:90:7f:4a:02:f4:22:36:fe:d2:d6:a4:81:a2:
         a2:92:0c:04:c1:e8:9c:16:ee:61:dc:ba:cc:19:ee:95:43:67:
         2b:e8:80:a7:9e:2b:bc:f5:bf:4b:06:0a:7e:1d:b6:7b:70:82:
         63:20:99:72:6b:54:28:30:93:64:15:d1:c7:f6:b5:ea:94:bc:
         fc:47:9e:f6:d4:08:cc:e1:0c:ec:08:f2:7b:16:d5:52:53:98:
         bd:a6:81:f1:ed:09:ae:15:8e:3a:94:7e:35:aa:49:ce:a9:cb:
         bb:94:a9:91:03:f1:26:6e:6c:1e:f6:af:0e:c5:cd:8f:dd:5d:
         43:2d:d2:34:23:c1:7d:14:96:50:89:f2:fb:41:14:4e:df:7a:
         fe:69:0b:ed:22:0d:e3:09:0d:14:c8:49:ee:36:0f:d8:b5:fd:
         43:6f:fd:ef:70:05:71:cf:a9:03:b7:ef:bf:1c:6c:b6:76:1c:
         23:9d:5e:42:7f:4e:07:bd:95:bb:99:e9:69:a5:78:80:c4:ed:
         fe:ed:df:d6:ae:6c:e3:01:53:87:29:a9:f1:91:ff:9d:3b:fb:
         25:e9:04:e7:30:b6:90:f6:49:f0:12:33:c2:1e:e1:c4:f3:4c:
         c1:4c:8e:a3:2d:65:1a:88:a6:81:38:5f:69:fa:a9:e8:b3:d3:
         b4:6b:fa:c2:bb:8b:52:cc:0a:92:a9:10:e6:8f:f4:69:8d:55:
         ac:7e:03:f6:95:1f:b8:a5:b9:cb:7b:62:c9:ee:e5:1e:d0:f1:
         53:9a:6f:ad:11:e6:37:5f:55:90:c2:71:06:40:74:3c:88:97:
         87:e0:7b:09:22:c6:3c:f1:99:b4:ff:ab:11:b1:81:7e:c5:cb:
         2f:25:f9:29:4b:bd:d1:83:1b:f9:e6:89:9d:97:7e:3c:e3:54:
         3d:c4:e3:e0:15:1c:f6:5d

Nous constatons que ce certificat contient une clef public.

7-F) Extraction de la clef publique.

openssl rsa  -in %DIRNAME%/Private/Ca.key  -pubout  -out %DIRNAME%/Private/Ca.pbc

Nous suffixons le fichier contenant la clef publique des trois lettres ‘PBC’ extraite du mot PuBliC en anglais. Voici le contenu de ce fichier :

-----BEGIN PUBLIC KEY-----
MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA0f4LWQPPRu33LiWiQQKu
kJfVfKLNPouykc90FL7CrW8ymaayW+0nj/FVrca6016a3CC2YiYq/FQabvKMwsru
o+BzmvDYNY7kNIXpPFeadQKxWTkssCVvGICeZT548W685uKjFIvBZLqP5ncNv6LZ
rFS6/vZTt9TVFuGAzNje9vBH4Ry4cqnWPbXc/pFi/UbYxdD/NbZQHZCVOVZCDeiv
YiiGlZLyutbi39CgXtqIztj5ldOvemexx5aXGybaSO811wgZMjBIliwnUmNpRAUM
WWLLSVHHpU58xTKcUTeNUnxT+MiDdOUKhr3tXrsCaT0XfMRHxnnnc33WNLXhJr9y
ac44dUZzTXf0cpmSvwBmjTNU2WJB72YnrLfhoV7U4QfTB3kFzg8/i59Qlv3WBaLn
/0+FOIhgx5gKg0blqD4+WqNNqZ8GchfzM2Yp1UYgOl8gP5Kf2Y3uTxsN9LGMF4Xd
Zoj/AEtxqZupW6VjpSYJnEwvJIIQKRn7KT2tU/lrx+ys8BDq9+BjmuAJ1KF1FIUy
388dTZO51EQdf10UYYUXQ6Rvzr1UYIMr/qoRGz0+QxGM03IBbeRVC6jmxYBVUIbN
iX95W9pPWz4kSPf7p8Gc1X9ucN/Ols3yivMM4oE1DLctKfdA7BkyU2mNn9/7L+g1
FDWknDk88d2wTGdYiJzvLZsCAwEAAQ==
-----END PUBLIC KEY-----

7-G) Conclusion.

Tout ce dont nous avons besoin est le fichier noté ‘Ca.crt’ pour, d’une part signer le certificat client et d’autre part l’introduire dans le répertoire ci-après :

SSLCACertificateFile    "${Version_Apache}/conf/Certificat/Ca/Ca.crt"

Dans le cas de la signature du certificat serveur, nous avons également aussi besoin de la clef privée noté ‘Ca.key’.

8) Création du certificat serveur, client et de la clef privée.

Je ne vais pas détailler à nouveau les commandes que nous venons de voir, car nous allons devoir les utilise pour créer nos certificats. Entre autre, créer un nombre pseudo-aléatoire (paragraphe 7-A) où il suffit de changer la taille de ce qui sera produit (mettez autre que chose que 1257) et créer une clef privée (paragraphe 7-B). Il faut juste renommer les fichiers en remplaçant ‘Ca’ par ‘Server’.

 

8-A) Création d’une demande de signature pour certificat serveur.

openssl req  -new  -sha256  -key %DIRNAME%/Server/Server.key  -out %DIRNAME%/Server/Server.csr
  -subj "/C=FR/ST=Aquitaine/L=/O=Artemus & Cie/CN=Localhost"

C’est pratiquement identifique au paragraphe 7-C). Afin de faire le lien avec le certificat CA, nous mettons l’identité du CA qui est ‘Artemus & Cie’. Nous précisons aussi pour quel site nous créer ce certificat. Ici, il s’agit de ‘localhost’.

8-B) Création d’une demande de signature pour certificat serveur.

openssl x509  -req  -days 4383  -sha256  -in %DIRNAME%/Server/Server.csr  -CA %DIRNAME%/Cacerts/Ca.crt
  -CAkey %DIRNAME%/Private/Ca.key  -CAcreateserial  -out %DIRNAME%/Server/Server.crt

Nous retrouvons la demande de signature qui est le fichier ‘server.csr’. Afin de faire le lien avec le certificat CA, nous indiquons le certificat CA de nom ‘Ca.crt’ et la clef privée de nom Ca.key’.

Je ne me suis pas trop compliqué l’existence, puisque j’ai repris la même durée que pour le certifricat CA, c’est-à-dire une période de validité de douze ans, qui correspond à une période de quatre années bisextiles, soit 4383 jours.

8-C) Création du certificat client.

openssl pkcs12  -export  -in %DIRNAME%/Server/Server.crt  -inkey %DIRNAME%/Server/Server.key
  -out %DIRNAME%/Server/Server.pfx  -clcerts  -descert  -name "Client Localhost Certificate"

Nous créons le certificat client à partir du certificat serveur, en effectuant une conversion au format PFX ou P12. Nous devons préciser quelques paramètres comme ci-après :

fleche« -export » permet de faire cette conversion.

fleche« -clcerts » définit qu’il s’agit d’un certificat client.

fleche« -descert » triple encryptage ‘DES’ du certificat afin de le rendre illisible.

fleche« -name » nous donnons un nom à ce certificat.

C’est ce certificat que nous nommons client ! PFX ou P12 sont synonymes. Il faut savoir qu’un mot de passe sera demandé lors de la création de ce certificat client. Il faudra s’en souvenir.

8-D) Visualisation du certificat client.

openssl pkcs12  -info  -passout file:./%DIRNAME%/Other/Password.txt  -in %DIRNAME%/Server/Server.pfx

Nous retrouvons dans la fichier ‘password.txt’ le mot de passe que nous avons saisi à l’étape précédent.

Cette commande est le pendant du paragraphe 7-E).

8-E) Conclusion.

Nous avons créé tous nos fichiers en les préfixant avec le mot « Server » afin de les distinguer du « Ca » qui est un certificat à part.

Voici les certificats que nous avons créé dans cette deuxième partie :

flechecertificat serveur de nom « server.crt » que nous renommons en « localhost.crt ».

flecheclef privée du certificat serveur de nom « server.key » que nous renommons en « localhost.key ».

flechecertificat client de nom « server.pfx ». Nul besoin de changer son nom.

Nous rangeons les deux fichiers préfixés ‘localhost’ dans le répertoire ci-après :

SSLCertificateFile      "${Version_Apache}/conf/Certificat/Site/localhost.crt"
SSLCertificateKeyFile   "${Version_Apache}/conf/Certificat/Site/localhost.key"

Ne pas oublier de « relancer les services » de WampServer après avoir terminé vos modifications dans Apache, même pour l’introduction des certificats dans les répertoires ci-dessus. Normalement, la création de nos certificats est terminée.

9) Test du protocole HTTPS pour le site ‘localhost’.

Pour l’instant, tout ce que nous venons de faire, c’est de créer nos certificats, et de les ranger dans les répertoires utilisés par Apache, c’est-à-dire le serveur Web.

Si dans le navigateur « Google Chrome », nous tappons dans la barre des adresses « http://localhost », vous devez accéder au site ‘localhost’. C’est tout à fait normal car vous n’utilisez pas le protocole de sécurité ‘https’.

Si nous tappons maintenant « https://localhost », cette fois-ci, Google Chrome vous indique le message d’erreur suivant : « Erreur de connexion SSL ». C’est tout à fait normal car vous demandez d’accéder à un site sécurisé sans que le certificat client soit reconnu sur votre ordinateur.

Si nous faisons le même test avec le navigateur « Mozilla Firefox », nous avons le même problème mais avec un autre message :

message d'erreur Mozilla FirefoxPour résoudre ce problème, nous devons appliquer le rangement du certificat ‘CA’ selon le navigateur.

9-A) Le navigateur « Google Chrome ».

Ce navigateur, comme « Opera » ou Microsoft Internet Explorer » ou encore « Safari » utilise les magasins des certificats de Windows pour vérifier les autorisations. Pour accéder à l’utilitaire de Windows qui gère ces magasins, vous devez dans l’invite de commandes, tapez la ligne suivante :

certmgr.msc

Un magasin en particulier nous intéresse :

flecheAutorités de certification racines de confiance / certificats.

Nous allons détailler comment ranger notre certificat.

9-A-1) Le magasin « Autorités de certification racines de confiance ».

Nous allons ranger le certificat ‘CA’, qui se trouve dans le répertoire « /Certificats/Cacerts » sous le nom de « Ca.crt » dans le magasin « Autorités de certification racines de confiance ». Il suffit de cliquer avec le bouton droite de la souris sur ce certificat et cliquer sur « installer le certificat ».

On coche « placer tous les certificats dans le magasin suivant ». Et ce magasin est « autorités de certification racines de confiance », et on valide. Une deuxième validation vous sera demandé, genre avertissement, en précisant les caractéristiques de ce certificat Ca, comme ci-après :

Avertissement certificat CASi vous refaites le même test avec le navigateur « Google Chrome », on vous demande de sélectionner le certificat client et cette fois-çi, vous obtenez le cadenas vert ! Ca y est, vous avez un site sécurisé.

9-B) Le navigateur « Mozilla Firefox ».

Après voir fait le rangement des certificats dans les magasins de Windows, nous faisons le même test avec le navigateur « Mozilla Firefox » et nous obtenons le message d’anomalie déjà signalé.

Pourquoi avons-nous ce message ? Qu’est-ce que nous avons oublié de faire ?

Il faut savoir que « Mozilla Firefox » n’utilise pas les magasins de windows mais a ses propres magasins, que l’on trouve en tapant dans le navigateur sur l’onglet « outils », puis « options », sur « avancé » et enfin sur l’onglet « certificats ». Nous cliquons maintenant sur « afficher les certificats ».

9-B-1) Le magasin « autorités ».

Comme au paragraphe 9-A-1), pour importer le certificat ‘CA’, nous devons cliquer sur le bouton « importer » qui se trouve en bas de la page.

Une demande de renseignement vous est demandé comme ci-après :

Information complémentaireNous cochons les trois cases, puisque nous sommes en test local sur notre ordinateur.

Nous faisons le test et cette fois-ci, nous avons la confirmation de la sélection du certificat, comme dans le cas de « Google Chrome », comme ci-après :

Demande de confirmationNous acceptons, et nous avons l’accès à notre site « localhost » sécurisé.

À la différence de « Google Chrome », nous pouvons ne plus obtenir cette confirmation, en venant dans le paragraphe « lorsqu’un serveur demande mon certificat personnel : », on coche alors sur la case « en sélectionner un automatiquement ».

9-C) Nécessité d’avoir le certificat client et le certificat Ca.

Nous avons réussi à obtenir un accès avec le protocole « https à notre site « localhost » d’une manière sécurisé sur le navigateur « Google Chrome  » et sur Mozilla Firefox ». C’était le but recherché de ce didacticiel.

Pour obtenir un bon fonctionnement, nous avons besoin de nos deux certificats, et surtout que ceux-ci puisse être vu d’une manière hiérarchisée, comme ci-après :

Lien entre certificatsC’est ce lien qui permet la reconnaissance et la validation du certificat client vis-à-vis du certificat d’authorité (CA). Sans cela, notre certificat client ne serait pas valide.

Pour nos tests, il existe une autre solution, qui consiste à faire de nos deux certificats, un seul qui sera à la fois signé et d’authentification et que l’on nomme auto-signé.

9-D) Nécessité d’avoir un certificat officiel.

Depuis quelque temps, il est possible d’avoir un certificat de nom Let’s Encrypt, qui est gratuit. Oui, vous avez bien lu, il est gratuit.

Ca durée de vie n’excède pas les trois mois, et une alerte au bout de 60 jours, vous demande de le renouveller.

L’avantage de ce certificat SSL est que le CA se trouve sur tous les ordinateurs du monde sous le nom de Let’s Encrypt Autority X3 qui se trouve dans le magasin des cetrtificats intermédiaire.

10) Les outils qui m’ont permis de faire ce test.

Afin de faire ce didacticiel, je mets à votre disposition les fichiers qui m’ont servi à créer less certificats. Vous pouvez modifier ces fichiers afin de créer les votre.

flecheopenssl.cnf

flechelancer.bat

De même, je vous donne aussi le descriptif à installer dans le fichier ‘httpd.conf’, à savoir celui du paragraphe 4-B) et celui du 4-C).

flecheconfiguration du protocole SSL

flecheconfiguration du site ‘Localhost’

11) Conclusion.

Ce didacticiel est un peu plus complet que ce que j’ai pu trouvé sur le net car fréquemment, on n’aborde que la question de la création des certificats sans parler ni du paramétrage, ou très peu, ni du fichier ‘httpd.conf’, ni où ranger ces certificats dans votre environnement.

Pour un usage local, ce didacticiel répond à toutes vos demandes d’un site sécurisé. Comme nous venons de le voir, on peut créer nos propres certificats.

Mais si maintenant, vous avez besoin de rendre accessible votre site depuis internet, vous aurez besoin d’un certificat officiel de nom Let’s Encrypt.

Si vous avez des réponses à mes questions, vous pouvez me joindre par l’onglet contact afin de venir compléter ce didacticiel.

Clins d'oeil

3Vision-Group en promo sur les réalisations de Site-web, applications mobile et web

3Vision-Group en promo sur les réalisations de Site-web, applications mobile et web

3Vision-Group casse ses prix.
Vos voeux de possession de site-web de qualité et pourquoi pas d’une application mobile ou web viennent de se réaliser.
Du 10 Septembre au 25 Décembre, profitez d’importantes réductions sur tous nos services.
3Vision-Group par cette promotion compte aider surtout les jeunes entrepreneurs et les petits budgets à réaliser sereinement leurs projets.

Ainsi, vous avez la possibilité de vous offrir un site-web interactif et répondant à toutes les exigences du marché à 100000 FCFA seulement.
Un site-web étant la vitrine de votre entreprise, projet ou personne (dans le cas des personnalités publiques), il vous offre une visibilité accrue à travers le monde et offre une assurance pour le client potentiel.
Il peut donc s’agir d’un investissement très rentable en matière de chiffre d’affaires donc ne ratez pas cette occasion unique.
Nous réalisons aussi vos applications mobiles toujours dans cette période de promotion à des tarifs incroyables.
Saisissez cette occasion unique en nous confiant la réalisation de vos projets d’applications innovantes. Pour ceux disposant déjà d’un site-web, distinguez vous du lot en vous offrant une application mobile.

  • Application native: Une application native est une application mobile qui est développée spécifiquement pour un des systèmes d’exploitation utilisé par les smartphones et tablettes (iOS, Android, etc.).
  • Application Web view: Android System WebView est un composant système pour Android permettant d’afficher les contenus web dans les applications Android de votre smartphone ou de votre tablette. Nativement préinstallé sur tous les appareils Android, il peut arriver que ce composant indispensable ne se mette pas à jour automatiquement.
  • Application Hybride: Une application hybride est à mi-chemin entre web app et application native. Elle se télécharge depuis un store, se lance comme une application classique mais s’exécute dans une web view (une page Internet chargée dans l’application).

Les applications web communément appelés logiciels font aussi partie de notre promotion générale. Déboursez juste 150000 FCFA pour vous en offrir.

Profitez donc de cette période exceptionnelle de promotion qui s’étend du 10 Septembre au 25 Décembre pour nous confier vos projets sans se soucier du côté financier!

Commandez rapidement ici

Astuces, Clins d'oeil, Inspirations, Showcase, Support

Télécharger l'application Mobile Doingbuzz creer par 3Vision-Group

La toute nouvelle application native gratuite permet de consulter une sélection d’articles de Doingbuzz sur votre téléphone avec quelques goodies en plus.
Musique. Culture. Emploi . People . Téléchargement . Culture · Cinéma · Films · Interviews · Albums · Clips · Actu · Playlists etc..
Doingbuzz application vous permet de regarder Africa 24 et France 24 en direct , d’écouter sans écouteur requis les stations radios de la place .
La possibilité de télécharger de la musique en un clic disponible dans notre base de données.
Lâchez des commentaires dans l’application mobile et bien d’autres choses intéressante à découvrir

Télécharger depuis Playstore

Clins d'oeil

3Vision-Group offre la conception de site e commerce à 170.000Fcfa WAOOOOO!!!

Nous réalisons votre site ecommerce. Confiez votre projet à un professionnel utilisant les languages informatiques du moment et vendez vos produits sur internet. Nous assurons aussi l’hébergement et la maintenance et l’assistance de votre site. – site web prestashop – site web wordpress – développeur web, assistance – création de boites mails , – référencement – sites vitrine et e commerce.
Plus qu’un simple outil web, votre site web e commerce est votre meilleur commercial en ligne. Il vous vend au mieux.

Pour vous aider à mettre en œuvre votre projet e-commerce, L’Agence 3Vision-Group vous propose une solution vous permettant le succès commercial que vous escomptez. Nous sommes là pour accompagner votre entreprise et l’inscrire au cœur des logiques du e-commerce afin de développer votre chiffre d’affaires.
Pour faire cadeau , nous allons concevoir votre site ecommere (Boutique en ligne) sur lequel vous devrez vous aller exposé vos produits , votre business en ligne , les visiteurs pourront selon vos désires payés en ligne , ou passés les commandes ensuite payés à la livraison.
Avec ce site vous allez pourvoir booster votre business sur internet via notre équipe de spécialiste de référencement
grâce à la puissance des moteurs de recherche (Google , Bing,Qwant ,Yahoo etc…)
 
Nous créons actuellement des sites Internet e commerce , en réduisant nos coûts de production au minimum
et offrons du sur-mesure à prix très bas à nos clients mais à un résultat garantissant la satisfaction.
La réussite de la création d’un site e-commerce dépend le plus souvent de la qualité du site, de son efficacité, de son ergonomie, de la stratégie webmarketing, mais surtout de son référencement et de la visibilité donnée aux produits en vente. Les questions du référencement naturel et de la visibilité donnée aux produits étant très spécifiques et sensibles, il serait imprudent de chercher à en estimer ici les budgets.
Pour de raisons de confidentialités, contactez nous si vous désiriez consulter nos Réalisations e commerce
Notre devise : « High Tech / Low Cost »
Avec nous, vous gagnez en efficacité, du temps et de l’argent !
pour plus d’information vous pouvez nous contactez par email ou par tél sur

Whatsapp ou App
Togo: +228 90 54 37 14
France: +33 6 18 08 97 21
Sénégal: +221 77 874 3482
Email:[email protected]
www.3vision-group.com

 

Astuces

Plusieurs noms de domaine est-ce utile pour le référencement ? 3Vision-Group

Il y a quelques semaines une dame dont le site web est hébergé chez nous me contacte  et me demande de rediriger les 10 noms de domaines qu’elle vient d’acheter vers son site web… dans la discussion je lui demande pour quelle raison elle veut faire ça ?
Elle me répond que pendant une formation très officielle  et organisé par un un organisme accompagnant les créations d’entreprise un professionnel du web lui a dit de faire ça pour être sûr d’être en première page sur Google…
Je ne vous cache pas que quand j’ai entendu ça j’ai halluciné de constater que de nos jours encore il y a des professionnels ( ou soit disant professionnel)  qui osent donner ce genre de conseils pendant des formations.
Qu’on se le dise  chers amis, ça fait bien longtemps que cette technique de redirection de nom de domaine n’a plus aucune valeur en ce qui concerne le référencement. Pire encore,  mal fait ça pourrait être pénalisant


Quelques explications :

l’idée au départ c’est d’acheter plusieurs domaines et de faire des redirections

  • mon domaine. Com   et le site principal

Et on achète

  • mon domaine. Fr
  • mon domaine. Org
  • mon domaine. Net
  • mon domaine.eu
  • Mon domaine.xxx

puis on les redirige vers : mon domaine. Com

Ainsi  l’idée reçue est que quand on tape le mot “ mon domaine” on ressort obligatoirement en premier car le nom de domaine aurait une importance top prioritaire sur le positionnement.
Bon clairement tout ça c’est du pipeau…  car l’achat d’un nom de domaine ne garantit pas du tout le fait d’être positionner sur ce nom.


Illustration avec un exemple

J’achète le nom domaine “Pizza.com”…  selon la théorie si je tape pizza dans google je dois ressortir en premier…

mais quand on top pizza sur Google qu’est ce qui ressort ?

marmiton.com
pizzatoy.com
750g.com
photo.cuisineactuelle.fr
 
Pizza.com n’est présent ni en première, ni en deuxième, ni en 3eme page…
Et c’est tout à fait logique   parce ce que le contenu du site pizza.com n’est pas assez intéressant pour être positionné.
Google va positionner prioritairement les sites qui ont un contenu intéressant…  le nom de domaine joue un rôle mineur et n’a que peu d’importance dans le positionnement du site internet.
 
Autrement dit vous pouvez acheter un nom de domaine  toto.Com et vous positionner sur le mot clé pizza  si vous avez un site au contenu intéressant


Pourquoi la technique de redirection de domaine peut être pénalisante ?

j’ai précisé aussi que ça pouvait être pénalisant de faire des redirections de nom de domaine
En effet  selon la manière dont se fait on peut avoir une sorte de redirection invisible et nous aurions plusieurs noms de domaine avec un contenu identique qui pourrait être interprété comme du copier-coller par Google ( et on sait que Google n’aime pas trop qu’on fasse du copier-coller)


Pourquoi acheter plusieurs noms de domaine  alors ?

Pour le référencement la seule possibilité vraiment efficace en termes de positionnement serait de faire un site internet différent pour chaque nom de domaine et bien entendu de faire du contenu différent et un référencement indépendant pour chaque  site réalisé… c’est un peu un travail de dingue mais ça permet ce positionner en première page plusieurs fois sur une thématique donnée.
C’est une stratégie que nous avons adopté parfois avec certains clients qui était déjà présent en première page mais qui voulait y être plusieurs fois.
Sinon la plupart du temps quand on achète plusieurs noms de domaine c’est surtout pour éviter que des concurrents achète les noms de domaine efface leur propre site dessus de manière à vous faire concurrence ( ce qui s’apparente un petit peu la concurrence déloyale d’ailleurs)


Conclusion

Voilà vous l’aurez compris ça ne vaut pas vraiment le coup d’acheter 25 noms de domaine dans le but être positionné en première page ça ne marche pas.
J’espère que cet article aurait été intéressant et vous rapporter quelque chose,  n’hésitez pas à le partager sur les réseaux sociaux, ça nous aide, et n’hésitez pas à laisser un commentaire un petit peu plus bas
Je vous souhaite une excellente journée et à très bientôt
3Vision-Group

Clins d'oeil

3Vision-Group, votre application mobile de votre site sera un succés !!

3Vision-Group est une agence mobile spécialisée dans la conception et le développement d’applications mobiles multiplateformes (Android et iOS). Que vous soyez une grande entreprise ou une startup innovante, quel que soit votre projet mobile, nous sommes présents pour réaliser votre application mobile sur mesure.

Toutes les applications mobiles sont téléchargeables depuis Google Play Store et l’AppStore. Elles répondent à une utilisation récurrente des utilisateurs. Une application pour smartphones et tablettes pourra vous être très utile en tant qu’utilisation interne et de développement spécifique à l’usage de vos employés. Vous pouvez créer une application mobile que vous distribuez sur la flotte de téléphones portables et tablettes de vos employés. Ils peuvent ainsi accéder aux informations de votre entreprise et communiquer en temps réél partout, de manière centralisée.

Pourquoi créer une application mobile ?

Comme un site web, une application mobile peut faire partie de stratégies très variées. Un marché conséquent à ne pas négliger : 93% des français de plus de 12 ans ont un smartphone et 71% des ventes commencent sur un mobile. La navigation y est intuitive et prend en compte la pluralité des moments, des lieux et des modes d’utilisation privilégiés des mobinautes. Chaque paramètre de votre appli professionnelle est ajusté à votre activité, mais aussi à ses contraintes afin de répondre pleinement à vos objectifs de communication et de productivité.

Nous pouvons convertir votre site web wordpress en application beaucoup moins cher

Contact:
Whatsapp ou App
Togo: +228 90 54 37 14
France: +33 6 18 08 97 21
Sénégal: +221 77 874 3482
[email protected]
www.3vision-group.com

Clins d'oeil

3Vision-Group : Le référencement pour votre site web SEO

La concurrence est telle qu’il est indispensable de se démarquer en optant pour des solutions de référencement efficaces.

Avoir du contenu rédactionnel de qualité et bien optimisé n’est désormais plus une option.
Aujourd’hui, 3Vision-Group (3VG) est la solution ! Il vous offre la possibilité d’améliorer le positionnement et la visibilité de votre site rapidement, facilement et durablement !
Performant, expert pour optimiser votre référencement naturel SEO, à travers votre contenu.
Placez ainsi votre site en haut des résultats de recherche google. 3Vision-Group optimise vos rédactions, ainsi que votre site internet et améliore ainsi son expérience
Contact:
Whatsapp ou App
Togo: +228 90 54 37 14
France: +33 6 18 08 97 21
Sénégal: +221 77 874 3482
 
 

Showcase

3Vision-group converti vos sites wordpress en application mobile conviviale

Votre site Web est une composante essentielle de la présence en ligne de votre entreprise. C’est pourquoi vous passez tellement de temps à perfectionner tous les petits recoins. C’est aussi pour cela que vous vous assurez qu’il soit responsive et optimisé pour tous les périphériques.
Mais est-ce tout vraiment ?
Un site responsive est idéal pour présenter toutes les informations de votre site Web habituel de manière amicale. Parfois, il n’est tout simplement pas succinct ou assez précis pour les besoins des utilisateurs mobiles.
3Vision-group créer une application android quelque soit vos projets web basé sur wordpress à 150000Fcfa seulement à vie.
Avec des fonctionnalités supplémentaires qui le rendent plus adapté aux applications, y compris:

  • Notifications push
  • Annonces en ligne
  • Enregistrer le contenu hors connexion
  • Support de liaison approfondi (ce qui est essentiel si vous souhaitez que différentes pages de votre application s’affichent à la recherche)
  • Zoom d’image
  • Thèmes et couleurs personnalisés pour correspondre à votre site etc ..