www, redirection et contenu mixte

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

Objectif : après cette leçon, vous saurez choisir une adresse principale, y renvoyer toutes les variantes avec une seule redirection, et détecter puis corriger le contenu mixte.

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

Quatre adresses, un seul site

Votre site web 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. Pour les moteurs de recherche, en revanche, ce sont quatre adresses différentes avec le même contenu. Les cookies (comme votre cookie de connexion) sont eux aussi liés à un nom : une personne connectée sur www n'est pas connectée 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 est une question de goût (leçon 2.1). L'essentiel est que l'adresse principale soit la même 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 de quel type de redirection il s'agit :

Une redirection permanente indique aux moteurs de recherche que la nouvelle adresse est la véritable. Avec une redirection temporaire, ils continuent de retenir l'ancienne adresse.

Faites aussi attention à la chaîne. Supposons que votre adresse principale soit https://example.com. Vous voulez 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 sur 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 coûte une étape supplémentaire (un temps d'attente en plus, surtout sur mobile) et une négociation TLS supplémentaire. Pire encore, la boucle : le serveur web redirige vers https, WordPress renvoie vers http parce que les adresses dans les réglages sont encore en http, et le navigateur affiche « trop de redirections ». Deux réglages se contredisent alors. Veillez à ce qu'un seul acteur redirige vers https (le serveur web ou le panneau) et à ce que les adresses dans WordPress correspondent déjà à l'adresse principale.

WordPress effectue aussi ses propres 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 à WordPress, donc si le serveur web dirige aussi le nom www vers ce site.

Contenu mixte

Le contenu mixte (mixed content), c'est une page en 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 dangereux, car ces éléments peuvent être modifiés en chemin.

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

D'où cela vient :

1. D'anciens liens dans votre contenu : un site autrefois en http contient dans des milliers d'articles <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 contenant une adresse complète, par exemple un logo ou un arrière-plan en http://.
3. Des éléments externes provenant d'un autre site et accessibles uniquement via http. Vous devez les remplacer ou les supprimer.
4. Des adresses dans Réglages > Général encore en http (leçon 3.1).

Comment le trouver

Ouvrez la page, appuyez sur F12 et regardez l'onglet Console. Le navigateur signale chaque contenu mixte avec l'adresse de l'élément concerné. Vous pouvez aussi chercher dans le code source de la page (Ctrl+U) src="http:// et href="http://. Les liens vers d'autres sites dans le texte (<a href="http://...">) ne créent pas de contenu mixte ; ce qui compte, ce sont les éléments que la page charge.

Rechercher et remplacer, mais correctement

Pour corriger les anciens liens de votre contenu, il faut remplacer dans la base de données toutes les occurrences de http://example.com par https://example.com. On est tenté d'utiliser une requête SQL comme :

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

Ne le faites pas. 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 : suit un texte de 27 caractères. Après un simple remplacement, le texte compte 28 caractères (un s a été ajouté), mais il est toujours indiqué 27. PHP ne peut alors plus lire la valeur et le réglage disparaît sans prévenir : un menu vide, un logo disparu, des widgets envolés.

Utilisez un outil qui met ces longueurs à jour, et faites toujours une sauvegarde au préalable (leçon 8.1) : rechercher et remplacer n'a pas de corbeille.

• WP-CLI : d'abord vérifier, ensuite agir. Dans le terminal, placez-vous dans le dossier de votre WordPress et lancez d'abord l'essai (première ligne), puis seulement le vrai remplacement (deuxième ligne).

wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run
wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

Avec --dry-run, vous voyez combien de remplacements seraient effectués par table, sans rien modifier. --skip-columns=guid laisse intacts les identifiants fixes des articles (colonne guid) ; WordPress recommande de ne jamais les modifier. Sans option supplémentaire, WP-CLI ne travaille que sur les tables de WordPress. Si une extension possède ses propres tables avec le même préfixe, ajoutez --all-tables-with-prefix. N'utilisez --all-tables que si vous savez pourquoi : cette option touche toutes les tables de la base de données, y compris celles d'un autre site ou d'une autre application.

• 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). Là aussi, utilisez d'abord le mode d'essai, puis supprimez l'extension ensuite.

Ne remplacez jamais quelque chose comme example.com sans http:// ou https:// devant : vous toucheriez aussi les adresses e-mail et d'autres textes. La méthode complète, y compris pour ceux qui n'ont pas de terminal, est décrite dans l'article de la base de connaissances sur la recherche et le remplacement dans la base de données WordPress (voir Pour aller plus loin).

En pratique : à quoi cela ressemble dans un panneau

Nous prenons DirectAdmin comme exemple. Les autres panneaux disposent d'un interrupteur comparable pour « toujours https ».

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

Résumé

• Choisissez une adresse canonique et faites pointer les trois autres variantes vers celle-ci avec un 301 (ou 308), en une seule étape.
• Ne laissez qu'un seul acteur rediriger vers https ; sinon, vous obtenez une boucle.
• Le contenu mixte, c'est une page en https qui charge des éléments via http ; la console du navigateur indique lesquels.
• Remplacez les anciens liens de la base de données avec wp search-replace ou une extension qui comprend les données sérialisées, jamais avec un simple REPLACE en SQL.
• Toujours une sauvegarde d'abord, et un essai d'abord (--dry-run) ; ne touchez pas à la colonne guid et restez sur les tables de WordPress.

Quiz

Exercice

Exercice A3.2 : Une seule adresse principale et aucun contenu mixte. Saisissez votre domaine. Le programme ouvre les quatre variantes (http et https, avec et sans www) et suit les redirections. C'est correct si les quatre aboutissent à la même adresse en https, avec au plus une redirection par variante et uniquement des codes permanents (301 ou 308). Ensuite, le programme lit le 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 WebOké ; dans d'autres panneaux, elles fonctionnent de manière comparable.

• Guide DirectAdmin 6.4: Rediriger toujours les visiteurs vers HTTPS
• Guide DirectAdmin 4.7: Redirections de site : rediriger un domaine ou une page
• Rechercher et remplacer dans la base de données WordPress
• Rediriger obligatoirement les 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/