Posts Tagged ‘https’

Détecter vos contenus mixtes avec les CSP

Je continue ma série d’articles sur le https avec une problématique assez chronophage qui est la détection des contenus mixtes sur une page https.
Avec les nouvelles sécurité des navigateurs si une image , une feuille de style ou un fichier javascript n’est pas appellé en https il ne sera pas interprété.

Et donc votre site ne sera pas affiché correctement.
La tâche d’identification de ces contenus est relativement longue et implique de passer sur toutes les pages de votre site si vous souhaitez le faire manuellement.
La bonne nouvelle est que ce n’est pas nécessaire 🙂

Avec les headers Content Security Policy ( CSP ) il est possible de détecter automatiquement les éléments bloquants.
Mon exemple est relativement basique, pour des informations complètes sur les CSP vous pouvez consulter le site suivant : https://content-security-policy.com/

Comme le nom ( header ) le défini, nous allons ajouter l’entête spécifique à notre document.

Content-Security-Policy-Report-Only "default-src https://your-site.com https: 'unsafe-inline';report-uri https://your-site.com/csp-https-report.php"

Celle-ci signifie que nous souhaitons avoir un rapport d’erreur sur l’url https://your-site.com/csp-https-report.php, dès qu’un média ( js/image/font/css ) n’est pas appelé en https

Cette entête peut être rajoutée de différente manière

Apache : dans le fichier htaccess

 Header set Content-Security-Policy-Report-Only "default-src https://your-site.com https: 'unsafe-inline';report-uri https://your-site.com/csp-https-report.php"

Nginx : dans votre fichier de conf

 add_header Content-Security-Policy-Report-Only "default-src https://your-site.com https: 'unsafe-inline';report-uri https://your-site.com/csp-https-report.php";

Directement dans votre document php

 header('Content-Security-Policy-Report-Only "default-src https://your-site.com https: 'unsafe-inline';report-uri https://your-site.com/csp-https-report.php";');

Voici à présent le contenu du fichier php qui va traiter ces retours.…

Pas de commentaires

Passage du blog en https

Après tous les articles récents publiés sur le https, il était temps de mettre la recommandation du passage en full https sur ce blog en application.
Pour le coup c’est plutôt facile à faire avec wordpress, et c’était en place en moins de 30 minutes 🙂

Voici les différentes étapes effectuées pour passer wordpress en https.

A savoir que le https est déjà géré et disponible sans configuration via les dns cloudflare que j’utilise ( c’est pareil pour tous les hébergements mutualisés via les dns ovh également )

Configuration de wordpress

Pour commencer , il suffit de changer les urls du site dans la configuration de wordpress en allant dans “Réglages / Généraux”

Correction du contenu mixte

Le site est à présent disponible en https, cependant si vous avez des images vous allez rapidement constater des avertissements de contenus mixtes.
C’est à dire que votre navigateur vous alerte que votre page charge des éléments non sécurisés ( protocole http ), sur une page sécurisée ( https )

Pour corriger cela il va être nécessaire de mettre à jour votre base de données pour remplacer les urls http par du https
(Attention à bien sauvegarder votre base avant )

Dans mon cas cela est passé par l’éxécution de la requête suivante

UPDATE wp_posts SET `post_content` = REPLACE (`post_content`, 'http://www.h-hennes.fr', 'https://www.h-hennes.fr')

Une fois cette requête exécutés tout vos liens vers des médias ou entre les différents articles sont mis à jours.…

Pas de commentaires

Générer un certificat SSL autosigné

Afin de pouvoir utiliser le protocole https lors de vos développements locaux, il est nécessaire de générer un certificat https.

Voici une commande rapide qui vous permettra de générer un certificat auto-signé qui aura une validité d’un an.

 openssl req -x509 -nodes -days 365 -newkey rsa:1024 -out /etc/ssl/ssl.crt -keyout /etc/ssl/ssl.key

Dans le cas d’un site live, il est recommandé d’utiliser un vrai certificat ssl ( qu’il soit payant ou généré via LetsEncrypt cf. https://www.h-hennes.fr/blog/2016/10/11/passer-au-https-avec-letsencrypt/ )

Vous pouvez ensuite ajouter ce certificat facilement à votre configuration nginx ou apache :

Nginx :

server {
    listen 443 ssl;
    ssl_certificate /etc/ssl/ssl.crt
    ssl_certificate_key /etc/ssl/ssl.key;
 
    server_name local.dev;
    root /home/www;
}

 

Apache :

<VirtualHost *:443>
       
        ServerName local.dev
        DocumentRoot /home/www
        SSLEngine on
        SSLCertificateFile /etc/ssl/ssl.crt
        SSLCertificateKeyFile /etc/ssl/ssl.key
 
        <Directory "/home/www">
           Options Indexes FollowSymLinks MultiViews
           Order allow,deny
           Allow from all
           AllowOverride All
           # New directive needed in Apache 2.4.3:
           Require all granted
        </Directory>
 
 
</VirtualHost>

 …

1 commentaire

Passer au https avec letsencrypt

Si il était conseillé auparavant l’utilisation du protocole https est maintenant une nécessité.
Ce paramètre est même pris en compte par google pour l’indexation de votre site.

Pour ceux qui font tourner une boutique de taille raisonnable et qui ne souhaitent pas de garantie étendue ( ou qui n’ont tout simplement pas le budget ), il existe une possibilité d’obtenir des certificats https gratuitement via letsencrypt : https://letsencrypt.org/

Le seul point à prendre en compte est que le certificat est valide pour une durée de 3 mois, il sera donc nécessaire de le renouveler régulièrement.

L’installation et la génération des certificats sont très rapide et pratique , nous allons voir comment procéder pour installer ces certificats sur notre serveur dédié avec Ubuntu 14.04

(Un accès root ou sudo est nécessaire )

#Telechargement du robot de certification
wget https://dl.eff.org/certbot-auto
#Mise à jour des droits
chmod a+x certbot-auto

Pour un serveur avec apache2

#Execution avec la configuration apache
$ sudo .
Pas de commentaires

Testez vos sites de développement en https

L’usage du https se généralise sur les sites web, lors du développement des sites, il devient donc important de vérifier que le passage du site en mode https ne renvoie pas d’erreur.

Pour mes développements j’utilise une machine virtuelle avec un stack lamp gérée via vagrant.
Nous allons voir comment rendre fonctionnel le https sur cette vm en moins de 5 minutes.

Sur votre vm saisissez les commandes suivantes :

#Activation du mode ssl apache
sudo a2enmod ssl
#Activation du site par défaut avec le ssl d'apache
a2ensite default-ssl

Si vos fichiers web sont situés à l’emplacement par défaut d’apache ( var/www/html ), il vous suffit de recharger apache

#Rechargement de la configuration d'apache
service apache2 reload

Et le https fonctionne 🙂

Si vous bossez dans un autre dossier, éditer le fichier de configuration du site default-sslsudo vim /etc/apache2/site-enabled/default-ssl.conf
et remplacer

DocumentRoot /var/www/public

par l’emplacement de vos fichiers web.…

Pas de commentaires


Compte Github