www, redirection et contenu mixte

Module 3: Adresse, https et utilisateurs · Temps de lecture : 9 minutes

Objectif pédagogique : après cette leçon, vous saurez choisir une adresse principale unique, rediriger toutes les variantes vers celle-ci en une seule redirection, et repérer et résoudre le contenu mixte.

Notions clés : adresse canonique, 301 et 308, chaîne de redirections, contenu mixte (mixed content), recherche et remplacement dans la base de données, données sérialisées

Quatre adresses, un seul site

Votre site est accessible via quatre adresses :

http://example.com
http://www.example.com
https://example.com
https://www.example.com

Pour un visiteur, cela ne change rien, mais pour les moteurs de recherche, ce sont quatre adresses différentes avec le même contenu. Les cookies (comme votre cookie de connexion) sont également valables par nom : si vous vous connectez sur www, vous n'êtes pas connecté sur le domaine sans www. C'est pourquoi vous choisissez une seule adresse canonique (l'adresse principale) et redirigez les trois autres vers celle-ci.

Le choix de l'adresse est une question de préférence (leçon 2.1). L'important est que l'adresse principale soit identique partout : dans le DNS, dans le certificat, dans Réglages > Général (leçon 3.1) et dans les redirections.

Rediriger avec un 301, en une seule étape

Une redirection est une réponse du serveur : « cette page se trouve ailleurs ». Le navigateur se rend alors automatiquement à la nouvelle adresse. Le code indique le type de redirection :

Une redirection permanente indique aux moteurs de recherche que la nouvelle adresse est la bonne. Avec une redirection temporaire, ils continuent à mémoriser l'ancienne adresse.

Faites également attention à la chaîne de redirections. Supposons que votre adresse principale soit https://example.com. Vous souhaitez alors :

http://www.example.com   301  https://example.com/
http://example.com       301  https://example.com/
https://www.example.com  301  https://example.com/
https://example.com      200

Chaque variante arrive à l'adresse principale en une seule étape. Ce qui se produit souvent :

http://www.example.com   301  https://www.example.com/
https://www.example.com  301  https://example.com/

Cela fonctionne, mais cela ajoute une étape supplémentaire (temps d'attente additionnel, surtout sur mobile) et une poignée de main TLS supplémentaire. Plus grave est une boucle : le serveur web redirige vers https, WordPress redirige vers http parce que les adresses dans les réglages sont encore en http, et le navigateur signale « trop de redirections ». Dans ce cas, deux réglages s'opposent. Veillez à ce qu'une seule partie redirige vers https (le serveur web ou le panneau de contrôle), et que les adresses dans WordPress soient déjà réglées sur l'adresse principale.

WordPress effectue lui aussi des redirections : si quelqu'un demande https://www.example.com/contact/ alors que l'adresse du site est https://example.com, WordPress redirige vers https://example.com/contact/. Cela ne fonctionne que si la requête parvient jusqu'à WordPress, donc si le serveur web fait également aboutir le nom www vers ce site.

Contenu mixte

Le contenu mixte (mixed content) désigne une page https qui charge des éléments via http:// : une image, une feuille de style, un script, une police ou une vidéo intégrée. Le navigateur considère cela comme non sécurisé, car ces éléments peuvent être modifiés en cours de route.

• Les scripts, feuilles de style et iframes chargés via http sont bloqués par les navigateurs. Votre site peut alors sembler cassé ou une fonctionnalité peut ne pas fonctionner.
• Les images, l'audio et la vidéo via http sont automatiquement récupérés via https par les navigateurs modernes ; si cela échoue, ils sont bloqués. Le cadenas peut alors afficher un avertissement.

D'où cela provient :

1. D'anciens liens dans votre contenu : un site qui fonctionnait autrefois en http contient dans des milliers d'articles des liens du type <img src="http://example.com/wp-content/uploads/...">. WordPress enregistre ces liens tels quels dans la base de données.
2. Des réglages de thème ou d'extension avec une adresse complète, par exemple un logo ou un fond d'écran en http://.
3. Des éléments externes d'un autre site accessibles uniquement via http. Il faut les remplacer ou les supprimer.
4. Des adresses dans Réglages > Général encore réglées en http (leçon 3.1).

Comment le repérer

Ouvrez la page, appuyez sur F12 et regardez dans l'onglet Console. Le navigateur signale chaque contenu mixte avec l'adresse de l'élément concerné. Vous pouvez aussi rechercher dans le code source de la page (Ctrl+U) les occurrences de src="http:// et href="http://. Les liens ordinaires vers d'autres sites dans le texte (<a href="http://...">) ne constituent pas du contenu mixte ; il s'agit des éléments que la page charge.

Recherche et remplacement, mais correctement

La solution pour les anciens liens dans votre contenu consiste à remplacer tous les http://example.com dans la base de données par https://example.com. La tentation est d'utiliser une commande SQL du type :

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

Ne faites pas cela. De nombreux réglages de thèmes, d'extensions et de widgets sont enregistrés sous forme sérialisée. Cela ressemble à ceci :

s:27:"http://example.com/logo.png";

Le s:27 signifie : voici un texte de 27 caractères. Après un remplacement brut, le texte compte 28 caractères (un s s'est ajouté), mais l'indication reste à 27. PHP ne peut alors plus lire la valeur et le réglage disparaît silencieusement : un menu vide, un logo disparu, des widgets qui s'évanouissent.

Utilisez un outil qui met à jour ces longueurs :

• WP-CLI : d'abord vérifier, puis agir.

wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run
wp search-replace 'http://example.com' 'https://example.com' --all-tables

Avec --dry-run, vous voyez combien de remplacements seraient effectués par table, sans rien modifier.

• Une extension de recherche et remplacement qui prend en charge les données sérialisées (il en existe plusieurs dans le répertoire d'extensions de wordpress.org). Supprimez ensuite l'extension.

Faites toujours une sauvegarde au préalable (leçon 8.1). Ne remplacez jamais non plus quelque chose comme example.com sans le http:// devant : vous toucheriez alors aussi les adresses e-mail et d'autres textes.

En pratique : à quoi cela ressemble dans un panneau de contrôle

Nous utilisons DirectAdmin comme exemple. D'autres panneaux disposent d'un interrupteur similaire pour « toujours https ».

1. Dans les réglages du domaine, activez Forcer SSL avec HTTPS Redirect (leçon 3.1).
2. Choisissez, au niveau du domaine, si www doit rediriger vers le domaine sans www ou l'inverse (dans DirectAdmin, dans les réglages du domaine ; sinon via une redirection via Redirections de site ou .htaccess).
3. Vérifiez la chaîne de redirections avec la commande ci-dessous ou avec les outils de développement de votre navigateur (onglet Réseau, case « Conserver le journal » cochée).

Résumé

• Choisissez une adresse canonique unique et faites en sorte que les trois autres variantes y mènent avec un 301 (ou 308), en une seule étape.
• Laissez une seule partie rediriger vers https ; sinon vous obtiendrez une boucle.
• Le contenu mixte est une page https qui charge des éléments via http ; la console du navigateur indique lesquels.
• Les anciens liens dans la base de données se remplacent avec wp search-replace ou une extension qui comprend les données sérialisées, jamais avec un simple REPLACE SQL.
• Faites toujours une sauvegarde au préalable, et un essai d'abord.

Quiz

Exercice

Exercice A3.2 : Une seule adresse principale et aucun contenu mixte. Indiquez votre domaine. Le programme ouvre les quatre variantes (http et https, avec et sans www) et suit les redirections. Un bon résultat est que les quatre aboutissent à la même adresse en https, avec au maximum une redirection par variante et uniquement des codes permanents (301 ou 308). Ensuite, le programme lit le code HTML de la page d'accueil et recherche les scripts, feuilles de style, images, iframes et polices chargés via http://.

Pour aller plus loin

Ces articles décrivent les étapes dans les panneaux de contrôle de WebOké ; dans d'autres panneaux, cela fonctionne de manière similaire.

• Guide DirectAdmin 6.4: Rediriger toujours les visiteurs vers HTTPS
• Guide DirectAdmin 4.7: Redirections de site : rediriger un domaine ou une page
• Redirection obligatoire des visiteurs vers https
• Cours DNS gratuit 3.4: www, redirection et ce que le DNS ne fait pas
• Contenu mixte (MDN, en anglais) : https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
• wp search-replace (developer.wordpress.org, en anglais) : https://developer.wordpress.org/cli/commands/search-replace/