web-dev-qa-db-fra.com

Iframe HTTPS dans une page HTTPS ne fonctionne pas

Comment utiliser correctement les pages Github intégrées dans un iframe?

J'ai hébergé un site Web dans Firebase et il utilise un domaine personnalisé sur https, par exemple, https://www.example.com.

Ce site Web utilise React et d'autres choses, mais pour un itinéraire (celui de la page de destination), j'aimerais utiliser une page statique hébergée sur github, par exemple https: // exemple .github.io/page. Donc, pour y parvenir, j'ai créé un iframe à l'intérieur de l'itinéraire https://www.example.com/page .

Le problème est que je reçois l'erreur suivante:

Contenu mixte: la page à ' https://www.example.com/page ' a été chargée via HTTPS, mais a demandé une ressource non sécurisée ' http://example.github.io/page / '. Cette demande a été bloquée; le contenu doit être diffusé via HTTPS.

Ce qui est étrange, c'est que l'iframe ressemble correctement:

<iframe title="Page" src="https://example.github.io/page">unwanted text</iframe>

Il utilise déjà https, mais il semble que cela soit ignoré. J'ai déjà essayé d'utiliser cette méta <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">, fermez l'iframe avec </iframe> et ajoutez un texte indésirable à l'intérieur de l'iframe.

Pouvons-nous résoudre cela?

iframehttpsgithub-pagesfirebase-hostingmixed-content
11
GarouDan

Si vous examinez attentivement votre code HTML et le message d'erreur, vous remarquerez une légère différence dans les URL en plus de la partie protocole:

  • https://example.github.io/page - dans la balise iframesrc
  • http://example.github.io/page/ - dans le message d'erreur

La raison pourrait être que l'URL https://example.github.io/page renvoie une redirection vers le "canonique" "version avec la barre oblique de fin (/page/), mais une URL de redirection doit être une URL complète et le serveur, pour une raison quelconque, n'inclut pas le protocole réel dans l'URL de redirection, en utilisant toujours http:// au lieu. Cela pourrait être dû à la configuration ou au codage côté serveur (voir aussi problème github # 289 ).

Pour contourner ce problème, utilisez une URL qui ne déclenche pas la redirection de canonisation, c'est-à-dire https://example.github.io/page/.

26
rustyx