Comment autoriser le contenu http dans une iframe sur un site https


145

Je charge du HTML dans une iframe mais lorsqu'un fichier référencé utilise http et non https, j'obtiens l'erreur suivante:

[bloqué] La page à {current_pagename} a diffusé du contenu non sécurisé à partir de {referenced_filename}

Existe-t-il un moyen de désactiver cela ou un moyen de le contourner?

L'iframe n'a pas d' srcattribut et le contenu est défini en utilisant:

frame.open();
frame.write(html);
frame.close();


fait une modification. Le src n'est pas défini car le contenu est écrit dans l'iframe
georgephillips

1
Merci pour toutes les réponses. Pour faire court, c'est proxy le contenu.
georgephillips

@georgephillips partageriez-vous le code de proxy du contenu?
Gintas_

Réponses:


28

Sur la base de la généralité de cette question, je pense que vous devrez configurer votre propre proxy HTTPS sur un serveur en ligne. Suivez les étapes suivantes:

  • Préparez votre serveur proxy - installez IIS, Apache
  • Obtenez un certificat SSL valide pour éviter les erreurs de sécurité (gratuit sur startssl.com par exemple)
  • Écrivez un wrapper, qui téléchargera du contenu non sécurisé (comment faire ci-dessous)
  • Depuis votre site / application, accédez à https://yourproxy.com/?page=http://insecurepage.com

Si vous téléchargez simplement le contenu du site distant via file_get_contents ou similaire, vous pouvez toujours avoir des liens non sécurisés vers le contenu. Vous devrez les trouver avec regex et également les remplacer. Les images sont difficiles à résoudre, mais j'ai trouvé une solution de contournement ici: http://foundationphp.com/tutorials/image_proxy.php


1
Cela ne fonctionnera pas, car de nombreuses pages derrière l'iframe ne veulent pas être incorporées dans une iframe et définissent donc l'en-tête X-Frame-Options sur SAMEORIGIN. Même si vous êtes en mesure de contourner cela en utilisant le proxy, la page essaiera de charger quelque chose comme /insecurepage.css et votre navigateur demandera yourdomain / insecurepage.css
antidote

135

Remarque: bien que cette solution ait fonctionné dans certains navigateurs lors de sa rédaction en 2014, elle ne fonctionne plus. La navigation ou la redirection vers une URL HTTP dans une page iframeintégrée dans une page HTTPS n'est pas autorisée par les navigateurs modernes, même si le cadre a commencé avec une URL HTTPS.

La meilleure solution que j'ai créée est d'utiliser simplement google comme proxy ssl ...

https://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky

Testé et fonctionne sous Firefox.

Autres méthodes:

  • Utilisez un tiers tel que embed.ly (mais ce n'est vraiment bon que pour les API http bien connues).

  • Créez votre propre script de redirection sur une page https que vous contrôlez (une simple redirection javascript sur une page liée relative devrait faire l'affaire. Quelque chose comme: (vous pouvez utiliser n'importe quelle langue / méthode)

    https://example.com Cela a un lien iframe vers ...

    https://example.com/utilities/redirect.html Qui a un simple script de redirection js comme ...

    document.location.href ="http://thenonsslsite.com";

  • Vous pouvez également ajouter un flux RSS ou écrire un lecteur / analyseur pour lire le site http et l'afficher dans votre site https.

  • Vous pouvez / devriez également recommander au propriétaire du site http de créer une connexion SSL. Si pour aucune autre raison que cela augmente le référencement .

À moins que vous ne puissiez demander au propriétaire du site http de créer un certificat SSL, la solution la plus sûre et la plus permanente serait de créer un flux RSS en saisissant le contenu dont vous avez besoin (vraisemblablement, vous ne faites rien sur le site http, c'est-à-dire dire ne pas se connecter à un système).

Le vrai problème est que le fait d'avoir des éléments http dans un site https représente un problème de sécurité. Il n'y a pas de moyens complètement casher de contourner ce risque de sécurité, donc les éléments ci-dessus ne sont que des solutions de rechange actuelles.

Notez que vous pouvez désactiver cette mesure de sécurité dans la plupart des navigateurs (vous-même, pas pour les autres). Notez également que ces «hacks» peuvent devenir obsolètes avec le temps.


10
Excellente réponse, merci. Juste pour vous faire savoir dans Chrome, la méthode de redirection JS ne fonctionne pas, empêche simplement le changement (comme c'est le cas lorsque vous essayez de le charger normalement).
georgephillips

9
L'astuce de redirection semble fonctionner uniquement dans Firefox. Chrome refuse toujours de charger le contenu non sécurisé. Existe-t-il d'autres solutions de contournement connues?
Andreas Gohr

47
Je voulais juste signaler que la méthode "Créez votre propre script de redirection sur une page https que vous contrôlez" ne fonctionne plus avec les versions actuelles de Chrom (e | ium) et Firefox, même en utilisant JS.
kako-nawao

17
Cette réponse n'est pas valide à ce jour, toutes les autres solutions
samdd

22
La réponse doit avoir une option pour être étiquetée comme «obsolète». Cela crée de la confusion à moins que vous ne lisiez tous les commentaires.
Nitin

28

Je sais que c'est un ancien post, mais une autre solution serait d'utiliser cURL, par exemple:

redirect.php:

<?php
if (isset($_GET['url'])) {
    $url = $_GET['url'];
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    echo $data;
}

puis dans votre tag iframe, quelque chose comme:

<iframe src="/redirect.php?url=http://www.example.com/"></iframe>

Ceci est juste un exemple MINIMAL pour illustrer l'idée - il ne nettoie pas l'URL, ni n'empêcherait quelqu'un d'autre d'utiliser le redirect.php à ses propres fins. Considérez ces choses dans le contexte de votre propre site.

L'avantage, cependant, est qu'il est plus flexible. Par exemple, vous pouvez ajouter une validation des données $ curl'd pour vous assurer que c'est vraiment ce que vous voulez avant de l'afficher - par exemple, testez pour vous assurer qu'il ne s'agit pas d'un 404, et ayez un contenu alternatif prêt s'il est est.

De plus, je suis un peu fatigué de me fier aux redirections Javascript pour tout ce qui est important.

À votre santé!


4
Cela fonctionne assez bien, mais les liens à l'intérieur du site deviennent invalides. Par exemple, j'ai un domaine appelé example.comqui a un SSL. J'intègre un iframe avec example.netqui n'a pas de SSL. Le example.coma un lien comme href="https://stackoverflow.com/path/file.html"et en cliquant dessus, il s'ouvre comme https://example.com/path/file.htmlau lieu dehttp://example.net/path/file.html
Sibidharan

1
Le lien ne peut pas être relatif si vous souhaitez que cela fonctionne. En d'autres termes, spécifiez l'URL complète dans le href. Si cela est dynamique, il existe des bibliothèques pour saisir chaque segment de l'URL en Javascript ainsi que côté serveur.
Anthony Mason

css du site cible sous iframe est cassé. Veuillez vérifier
Raju yourPepe

14

ajouter <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">en tête

référence: http://thehackernews.com/2015/04/disable-mixed-content-warning.html

compatibilité du navigateur: http://caniuse.com/#feat=upgradeinsecurerequests


23
Cette solution ne vous permet pas de diffuser du contenu http sur un site https. Tout cela ne fait que forcer les requêtes http en tant que requêtes https. Si la ressource n'existe pas sur https, vous obtiendrez simplement une erreur 404 à la place.
Felix

Cela fonctionne en fait au moins pour mes besoins .. testé avec Firefox et confirmé son fonctionnement. Mon problème est que l'URL source n'est pas conforme à HTTPS alors que mon propre site Web utilise HTTPS.
Fernan Vecina

Travailler comme un charme dans la version chrome 76.0.3809.132 (version officielle)
Mohamed Azharuddin

8

Vous recevrez toujours des avertissements de contenu bloqué dans la plupart des navigateurs lorsque vous essayez d'afficher du contenu non sécurisé sur une page https. Ceci est délicat si vous souhaitez intégrer des éléments provenant d'autres sites qui ne sont pas derrière SSL. Vous pouvez désactiver les avertissements ou supprimer le blocage dans votre propre navigateur, mais pour les autres visiteurs, c'est un problème.

Une façon de le faire consiste à charger le côté serveur de contenu et à enregistrer les images et autres éléments sur votre serveur et à les afficher à partir de https.

Vous pouvez également essayer d'utiliser un service comme embed.ly et obtenir le contenu via eux. Ils ont un support pour obtenir le contenu derrière https.


si vous grattez le contenu et l'affichez sur votre site, il y a toujours un risque de script intersite. Donc, une solution divine consiste à gratter le contenu sur une URL distincte et à présenter les données dans une iframe à partir de cette URL avec https. De cette façon, vous évitez les scripts intersites sur votre site principal et le détournement de session.
Addeladde

6

L'utilisation de Google comme proxy SSL ne fonctionne pas actuellement,

Pourquoi?

Si vous avez ouvert une page de google, vous trouverez qu'il y a un x-frame-optionschamp dans l'en-tête. En-tête de réponse Google

L'en-tête de réponse HTTP X-Frame-Options peut être utilisé pour indiquer si un navigateur doit être autorisé à afficher une page dans un fichier <frame>, <iframe>ou <object>. Les sites peuvent l'utiliser pour éviter les attaques de détournement de clic, en s'assurant que leur contenu n'est pas intégré à d'autres sites.

(Citation de MDN)

Une des solutions

Voici mon travail autour de ce problème:

Téléchargez le contenu sur AWS S3 et il créera un lien https pour la ressource.
Remarque: définissez l'autorisation sur le fichier html pour permettre à tout le monde de le visualiser.

Après cela, nous pouvons l'utiliser comme srciframe sur les sites Web https. AWS


2

Vous pouvez essayer de récupérer tout ce dont vous avez besoin avec PHP ou un autre langage côté serveur, puis placer l'iframe sur le contenu récupéré. Voici un exemple avec PHP:

scrapedcontent.php:

<?php
$homepage = file_get_contents('http://www.example.com/');
echo $homepage;
?>

index.html:

<iframe src="scrapedcontent.php"></iframe>

3
Comment allez-vous gérer les images, les fichiers JS et CSS inclus, les hyperliens et les requêtes AJAX?
dotancohen

@dotancohen vous avez raison, ce n'est pas une solution parfaite, mais je pense que c'est la meilleure pour cette situation. Certains sites ne rencontrent pas les problèmes dont vous avez discuté.
Grant

1
Cela fonctionne, mais cela double effectivement le chargement du contenu et donc le temps de chargement lorsque votre serveur gratte puis ré-sert le contenu ...
ChristoKiwi


1

Utilisez votre propre proxy inverse HTTPS vers HTTP.

Si votre cas d'utilisation concerne quelques URL qui changent rarement à intégrer dans iframe, vous pouvez simplement configurer un proxy inverse pour cela sur votre propre serveur et le configurer de sorte qu'une httpsURL sur votre serveur mappe à une httpURL sur le serveur proxy. Puisqu'un proxy inverse est entièrement côté serveur, le navigateur ne peut pas découvrir qu'il ne parle "que" à un proxy du site Web réel, et ne se plaindra donc pas car la connexion au proxy utilise correctement SSL.

Si, par exemple, vous utilisez Apache2 comme serveur Web, consultez ces instructions pour créer un proxy inverse.


1
mitmproxyest un outil de débogage, pas un système de proxy de production. ngrokest un service de tunnel, principalement pour les serveurs de développement, je ne comprends pas comment cela peut être utile pour cela.
kolen le

@kolen Il ne s'agit pas des outils, mais de l'idée d'utiliser un proxy inverse pour cela, non encore mentionné dans les autres réponses. Passer à Apache maintenant, qui est une manière beaucoup plus courante de faire un proxy inverse.
tanius
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.