Qu’est ce que le mixed-content

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.

 

En cas de problème lors du passage au HTTPS, l’équipe de migration.boutique est spécialiste Prestashop : https://migration.boutique (Dites leur que vous venez de la part de mixed-content.info, je suis certains que vous aurez le droit à une petite ristourne) 😉

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 ?

  1. Ouvrez votre site dans Google Chrome.
  2. Pour vérifier la sécurité d’un site, regarder l’état de sécurité à gauche de l’adresse du site internet :
    • Cadenas Sécurisé
    • Informations Informations ou Non sécurisé
    • Dangereux Non sécurisé ou Dangereux
  3. 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 :

  1. Cliquez droit n’importe où sur votre page > Inspecter,
  2. Une nouvelle fenêtre s’ouvre en bas de votre page,
  3. 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.

 

Se rendre compte du mixed-content
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.

 

Error
La console affiche une erreur
Warning
La console affiche un Warning

 

Corriger le code source de la page
Dans le code source de la page, il suffit de modifier le HTTP par HTTPS ou // (protocol-less)
Après correction du protocol HTTP
Après avoir modifier le protocole voici le résultat
Résultat : HTTPS OK
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 :

  1. Mettre le chemin en relatif, si la ressource est hébergée sur le serveur,
  2. Utilisez https://votredomaine.fr/
  3. 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