Tout savoir sur le mixed-content – Définition, astuces et corrections autour du HTTPS

1 – Définition du Mixed-Content :

On retrouve (HTTP) sur de nombreux sites internet car ce sont des sites internet où les informations qui s’échangent ne sont pas importantes.

Tant dis que (HTTPS) lui offre une protection aux sites internet avec la présence de son cadenas vert, à côté du https dans a barre d’adresse. Quand un site web utilise le protocole « securisé » (HTTPS) mais qu’une images, vidéos ou scripts/styles est demandées, elle peut-être potentiellement la source du Mixed-Content.

Le site internet Migration.boutique spécialisé dans les plateformes Prestashop et WordPress, à d’ailleurs publié un article sur la deadline de Google pour l’affichage du marqueur « non sécurisé » dans les futures version de Google Chrome.

Voir l’article ici : https://vinvin.dev/google-pose-dead-line-passage-https/

Dites leur que vous venez de la part de mixed-content.info, je suis certains que vous aurez le droit à une petite ristourne) 😉

Blog

Les conversions de mesures sont fréquemment utilisées dans la cuisine, la médecine, l’ingénierie et de nombreux autres domaines. Elles permettent de passer d’une unité de mesure à une autre, ce qui est souvent nécessaire lorsque l’on travaille avec des recettes, des formules ou des données provenant de différentes sources.

Il existe différentes méthodes pour effectuer des conversions de mesures, mais la plupart reposent sur l’utilisation de facteurs de conversion. Un facteur de conversion est un nombre qui indique combien d’unités d’une mesure correspondent à une unité d’une autre mesure. Par exemple, le facteur de conversion entre les pouces et les centimètres est de 2,54, ce qui signifie qu’un pouce équivaut à 2,54 centimètres.

Pour effectuer une conversion, il suffit de multiplier la valeur à convertir par le facteur de conversion approprié. Par exemple, pour convertir 12 pouces en centimètres, on peut utiliser la formule suivante: 12 pouces x 2,54 = 30,48 centimètres.

Il existe également des outils en ligne et des calculatrices qui peuvent effectuer des conversions pour vous. Il est important de vérifier la précision de ces outils et de vous assurer qu’ils utilisent les unités et les facteurs de conversion appropriés pour votre application.

Il est important de noter que pour certaines conversions comme celle de température, il y a des formules spécifiques à utiliser pour obtenir une conversion correcte.

Il est important de connaître les conversions pour éviter les erreurs potentiellement dangereuses, comme celles qui peuvent survenir lors de la préparation de médicaments ou de mélanges chimiques. Il est donc important de prendre le temps de comprendre les conversions de mesures et de les utiliser correctement dans toutes les situations.

Vous cherchez à convertir des cl en ml ? Ces 2 articles peuvent vous aider à comprendre comment faire des convertions de liquide.
https://labelingenue.fr/blog/comment-convertir-les-centilitres-en-millilitres/ ou https://www.lespandasroux.com/comprendre-la-conversion-des-centilitres-en-millilitres/

Oui, la conversion de cl en ml est simple. Il suffit de multiplier le nombre de centilitres (cl) par 10 pour obtenir le nombre de millilitres (ml). Par exemple, 5 cl équivalent à 50 ml (5 x 10 = 50).

Types de format qui peuvent poser problèmes :

Images
Polices (Police / Font)
Styles (Feuille de style – CSS)
Scripts (Javascript)

Par exemple, une page web en (HTTPS), qui contient des données (HTTP) est au final vulnérable aux attaques de piratages car elle n’est qu’en partis chiffrée.

Google chrome affiche un signe « ! » lorsque la page contient du contenu mixte. Donc, vous perdez l’affichage du cadenas vert et donc le côté rassurant pour le visiteur.

Comment vérifier si ma page est sécurisée ?

Ouvrez votre site dans Google Chrome.
Pour vérifier la sécurité d’un site, regarder l’état de sécurité à gauche de l’adresse du site internet :
- Sécurisé
- Informations ou Non sécurisé
- Non sécurisé ou Dangereux
Pour afficher les détails et les autorisations du site, cliquez sur l’icône. En haut du panneau se trouve un récapitulatif sur la sécurité de la connexion de votre page selon Chrome.

Plus de détail ici : https://support.google.com/chrome/answer/95617

2 – Comment détecter le mixed-content :

Si des pages HTTPS sont proposées, tous les contenue mixtes actif proposés via HTTP sera bloqué par défault. Par conséquent les utilisateurs verront le site web inaccessible ou cassé.

Des messages comme : blocage du chargement du contenu mixte actif peuvent vous donner des indications sur des éventuelles « mixed-content« .

Il existe plusieurs solutions pour detecter la présence de mixed-content :

L’affiche du « ! » sur une page HTTPS. Google Chrome donne l’informations concernant le contenu-mixte dans sa console de débuggage.
Utilisation de l’outil : Mixed content détecteur en ligne
Cette outil permet en un clic de detecter toutes les contenus-mixtes …

Comment avoir les informations sur le mixed-content :

Utilisez la bar d’outil incluse dans google chrome :

Cliquez droit n’importe où sur votre page > Inspecter,
Une nouvelle fenêtre s’ouvre en bas de votre page,
Dans l’onglet « Console« , retrouvez les coupables des contenus mixes

« mixed content the page at was loaded over https but requested an insecure script » est le message en anglais qui peut apparaitre dans la console.

Une icône indique un soucis lors de la connexion au site internet :

Google chrome, utilise 3 façons pour informer, en un coup d’oeil, la niveau de confiance du site :

Un cadenas vert : Tout va bien, la page est bien sécurisée et toute les informations seront protégées
Un (!) : La connexion semble être sécurisé mais certains points de sont pas valides ou alors le site est en HTTP
Un cadenas rouge : La connexion semble être chargée en HTTPS mais le certificat n’est pas valide.

En un coup d’oeil, vous pouvez vous rendre compte qu’il y un soucis probable avec du « mixed-content »

Utilisation de Inspecter l'élément et la console de google chrome

Utilisation de la google « toolbar » pour obtenir plus de détail sur l’erreur de connexion.

La console affiche une erreur

La console affiche un Warning

Dans le code source de la page, il suffit de modifier le HTTP par HTTPS ou // (protocol-less)

Après avoir modifier le protocole voici le résultat

Résultat : Cadenas vert et plus d’erreur dans la console

3 – Quels sont les éléments à corriger ?

Les éléments HTML suivant sont susceptible d’afficher une erreur due au contenu mixe. Il suffit de charger l’URL de la ressource en HTTPS dans l’attribut souvent src= »URL », href ou data…

Les éléments de types « passif » :

<img> (src attribut)
<audio> (src attribut)
<vidéo> (src attribut)
<object>

Les éléments HTML de types « actif » :

<script> (src attribut)
<link> (href attribut)
<iframe> (src attribut)
XMLHttpRequest requête
Tous les règles CSS : (@font-face, cursor, background-image, etc.)
<object> (data attribut)

4 – Comment corriger le mixed-content :

Une fois le contenu mixe identifié, il va falloir modifier les protocoles de chaque URLs qui posent problème.

Pour un site « statique »:

comme vu au dessus, il faut changer en dur l’adresse de la ressource incriminé. 3 solutions sont offertes à vous pour corriger :

Mettre le chemin en relatif, si la ressource est hébergée sur le serveur,
Utilisez https://votredomaine.fr/
Ou le protocol-less : // au lieu de https

Exemple : http://votredomaine.fr/img/img-logo.jpg devient :

/img/img-logo.jpg en relatif (Chemin relatif : Si ressource hébergé sur le serveur)
https://votredomaine.fr/img/img-logo.jpg (HTTPS)
//votredomaine.fr/img/img-logo.jpg (Protocol-less)

Pour les sites WordPress ou Prestashop :

Dans le cas des plateformes tel que les systèmes WordPress ou Prestashop, voici plus de détail sur les solutions existantes :

Solutions pour corriger le Mixed-Content après le passage au HTTPS

5 – Corriger le mixed-content via le htaccess :

Il existe aussi une solution pour corriger le mixed-content via le htaccess, certains navigateurs permet de forcer l’usage du HTTPS lors qu’un contenu mixed-content est détecté.

<ifModule mod_headers.c>
Header always set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>

Cette directive est pratique pour rapidement deployer le HTTPS et rendre les pages sécurisés sans avoir a changés les URLs en base.

Utilisez mixed-content checker