Erreur de contenu mixte lors de l'utilisation de pages github avec un domaine personnalisé

Question

J'héberge mon site web git-hub pages (peps09791.github.io) en utilisant un domaine personnalisé (https://thebotspeaks.com) avec Cloudflare. Pour activer le protocole HTTPS, je l'ai fait les configurations suivantes:

1. Dans mon fichier _config.yaml J'ai mis la clé d'URL en conséquence

   url: "https://peps0791.github.io"

2. De mon Cloudflare tableau de bord, j'ai activé l'option de réécritures HTTPS pour éviter les erreurs de contenu mixte. J'ai également activé Flexible SSL depuis CloudFlare.

Je n'ai pas activé la redirection HTTPS par défaut, car le site Web casse le protocole HTTPS. Sur HTTP, cela fonctionne bien.

En ce moment, lorsque je tente d'accéder à mon site web en utilisant le protocole HTTPS, j'obtiens l'erreur de contenu mixte:

Mixed Content: The page at ' https://thebotspeaks.com/ ' was loaded over HTTPS, but requested an insecure image ' http://thebotspeaks.com/assets/images/bio-photo.jpg '. This content should also be served over HTTPS.

09:54:45.323 (index):1 Mixed Content: The page at ' https://thebotspeaks.com/ ' was loaded over HTTPS, but requested an insecure stylesheet ' http://thebotspeaks.com/assets/css/main.css '. This request has been blocked; the content must be served over HTTPS.

09:54:45.785 (index):1 Mixed Content: The page at ' https://thebotspeaks.com/ ' was loaded over HTTPS, but requested an insecure script ' http://thebotspeaks.com/assets/js/main.min.js '. This request has been blocked; the content must be served over HTTPS.

de la console, je peux voir ceci:

<script src="https://peps0791.github.io/assets/js/main.min.js"></script> 

<link rel="stylesheet" href="https://peps0791.github.io/assets/css/main.css"> 

Comment puis-je résoudre ce problème ?

Answer 1

Le problème ici est que vos actifs (c'est-à-dire votre CSS ou votre JavaScript) sont redirigés vers la version HTTP de votre site. En effet, vos éléments référencent directement votre site GitHub au lieu du domaine activé Cloudflare.

Par exemple; votre HTML référence des fichiers CSS à https://peps0791.github.io/assets/css/main.css au lieu de https://thebotspeaks.com/assets/css/main.css

Pour résoudre ce problème, il semble que vous aurez besoin de mettre à jour votre fichier _config.yaml pour avoir la clé URL suivante:

url: "https://thebotspeaks.com" 

Plus générale des conseils sur la résolution d'une variété de problèmes de contenu mixte peuvent être trouvés dans l'article suivant sur la base de connaissances Cloudflare: How do I fix the SSL Mixed Content Error Message?