So lassen Sie http-Inhalte in einem Iframe auf einer https-Site zu

145

Ich lade etwas HTML in einen Iframe, aber wenn eine Datei, auf die verwiesen wird, http und nicht https verwendet, wird der folgende Fehler angezeigt:

[blockiert] Auf der Seite unter {aktueller_Pagename} wurde unsicherer Inhalt von {referenzierter_Dateiname} ausgeführt.

Gibt es eine Möglichkeit, dies auszuschalten oder es zu umgehen?

Der Iframe hat kein srcAttribut und der Inhalt wird festgelegt mit:

frame.open();
frame.write(html);
frame.close();
Georgephillips
quelle
eine Bearbeitung vorgenommen. Der src ist nicht gesetzt, da der Inhalt in den iframe geschrieben wird
Georgephillips
1
Danke für alle Antworten. Lange Rede kurzer Sinn ist Stellvertreter des Inhalts.
Georgephillips
@georgephillips Würden Sie den Code für den Proxy des Inhalts freigeben?
Gintas_

Antworten:

28

Aufgrund der Allgemeinheit dieser Frage denke ich, dass Sie Ihren eigenen HTTPS-Proxy auf einem Server online einrichten müssen. Führen Sie die folgenden Schritte aus:

  • Bereiten Sie Ihren Proxyserver vor - installieren Sie IIS, Apache
  • Holen Sie sich ein gültiges SSL-Zertifikat, um Sicherheitsfehler zu vermeiden (z. B. kostenlos von startssl.com).
  • Schreiben Sie einen Wrapper, der unsichere Inhalte herunterlädt (wie unten beschrieben)
  • Rufen Sie von Ihrer Website / App https://yourproxy.com/?page=http://insecurepage.com auf

Wenn Sie einfach Remote-Site-Inhalte über file_get_contents oder ähnliches herunterladen, können Sie immer noch unsichere Links zu Inhalten haben. Sie müssen sie mit Regex finden und auch ersetzen. Bilder sind schwer zu lösen, aber ich habe hier eine Problemumgehung gefunden: http://foundationphp.com/tutorials/image_proxy.php

panpernicek
quelle
1
Dies funktioniert nicht, da viele Seiten hinter iframe nicht in einen iframe eingebettet werden möchten und daher den X-Frame-Options-Header auf SAMEORIGIN setzen. Selbst wenn Sie dies mithilfe des Proxys umgehen können, würde die Seite versuchen, etwas wie /insecurepage.css zu laden, und Ihr Browser fordert Ihre Domain / unsicherespage.css an
Gegenmittel
135

Hinweis: Während diese Lösung möglicherweise in einigen Browsern funktioniert hat, als sie 2014 geschrieben wurde, funktioniert sie nicht mehr. Das Navigieren oder Umleiten zu einer HTTP-URL in einer iframein eine HTTPS-Seite eingebetteten Seite ist von modernen Browsern nicht zulässig, selbst wenn der Frame mit einer HTTPS-URL begann.

Die beste Lösung, die ich erstellt habe, ist, einfach Google als SSL-Proxy zu verwenden ...

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

Getestet und funktioniert in Firefox.

Andere Methoden:

  • Verwenden Sie einen Drittanbieter wie embedded.ly (aber es ist wirklich nur für bekannte http-APIs geeignet).

  • Erstellen Sie Ihr eigenes Umleitungsskript auf einer von Ihnen kontrollierten https-Seite (eine einfache Javascript-Umleitung auf einer relativ verknüpften Seite sollte den Trick ausführen. So etwas wie: (Sie können jede Sprache / Methode verwenden)

    https://example.com Das hat einen Iframe, der auf ...

    https://example.com/utilities/redirect.html Welches hat ein einfaches js Redirect-Skript wie ...

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

  • Alternativ können Sie einen RSS-Feed hinzufügen oder einen Reader / Parser schreiben, um die http-Site zu lesen und auf Ihrer https-Site anzuzeigen.

  • Sie können / sollten dem Eigentümer der http-Site auch empfehlen, eine SSL-Verbindung herzustellen. Wenn aus keinem anderen Grund als es SEO erhöht .

Sofern Sie den Eigentümer der http-Site nicht dazu bringen können, ein SSL-Zertifikat zu erstellen, besteht die sicherste und dauerhafteste Lösung darin, einen RSS-Feed zu erstellen, der den von Ihnen benötigten Inhalt erfasst (vermutlich tun Sie auf der http-Site tatsächlich nichts, was zu tun ist) sagen, sich nicht bei einem System anzumelden).

Das eigentliche Problem besteht darin, dass das Vorhandensein von http-Elementen auf einer https-Site ein Sicherheitsproblem darstellt. Es gibt keine völlig koscheren Wege, um dieses Sicherheitsrisiko zu umgehen. Die oben genannten sind nur aktuelle Umgehungsmöglichkeiten.

Beachten Sie, dass Sie diese Sicherheitsmaßnahme in den meisten Browsern deaktivieren können (selbst, nicht für andere). Beachten Sie auch, dass diese "Hacks" im Laufe der Zeit veraltet sein können.

Matthew Peters
quelle
10
Tolle Antwort, danke. Nur um Sie in Chrome wissen zu lassen, funktioniert die JS-Umleitungsmethode nicht. Sie verhindert nur die Änderung (wie beim normalen Laden).
Georgephillips
9
Der Weiterleitungstrick scheint nur in Firefox zu funktionieren. Chrome verweigert weiterhin das Laden des unsicheren Inhalts. Gibt es andere bekannte Problemumgehungen?
Andreas Gohr
47
Ich wollte nur darauf hinweisen, dass die Methode "Eigenes Umleitungsskript auf einer von Ihnen gesteuerten https-Seite erstellen" mit aktuellen Versionen von Chrom (e | ium) und Firefox nicht mehr funktioniert, selbst wenn JS verwendet wird.
Kako-Nawao
17
Diese Antwort ist bis heute ungültig, alle anderen Lösungen
samdd
22
Die Antwort sollte eine Option haben, die als "veraltet" gekennzeichnet werden kann. Es schafft Verwirrung, wenn Sie nicht alle Kommentare lesen.
Nitin
28

Ich weiß, dass dies ein alter Beitrag ist, aber eine andere Lösung wäre die Verwendung von cURL, zum Beispiel:

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;
}

dann in Ihrem iframe-Tag so etwas wie:

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

Dies ist nur ein MINIMALES Beispiel, um die Idee zu veranschaulichen. Es bereinigt weder die URL noch verhindert es, dass jemand anderes die Datei redirect.php für seine eigenen Zwecke verwendet. Betrachten Sie diese Dinge im Kontext Ihrer eigenen Site.

Der Vorteil ist jedoch, dass es flexibler ist. Sie können beispielsweise eine Validierung der Curl'd $ -Daten hinzufügen, um sicherzustellen, dass sie wirklich Ihren Wünschen entsprechen, bevor Sie sie anzeigen. Testen Sie beispielsweise, ob es sich nicht um einen 404 handelt, und halten Sie gegebenenfalls Ihren eigenen alternativen Inhalt bereit ist.

Plus - ich bin es ein wenig leid, mich für alles Wichtige auf Javascript-Weiterleitungen zu verlassen.

Prost!

David R.
quelle
4
Das funktioniert ziemlich gut, aber die Links auf der Website werden ungültig. Zum Beispiel habe ich eine Domain namens example.comSSL. Ich binde einen Iframe ein, mit example.netdem kein SSL vorhanden ist. Das example.comhat einen Link wie href="https://stackoverflow.com/path/file.html"und während Sie darauf klicken, öffnet es sich als https://example.com/path/file.htmlanstelle vonhttp://example.net/path/file.html
Sibidharan
1
Der Link kann nicht relativ sein, wenn dies funktionieren soll. Mit anderen Worten, geben Sie die vollständige URL in der href an. Wenn dies dynamisch ist, gibt es Bibliotheken, mit denen jedes Segment der URL sowohl in Javascript als auch auf der Serverseite abgerufen werden kann.
Anthony Mason
CSS der Zielsite unter Iframe ist fehlerhaft. Bitte überprüfen Sie
Raju yourPepe
14

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">Kopf hinzufügen

Referenz: http://thehackernews.com/2015/04/disable-mixed-content-warning.html

Browserkompatibilität: http://caniuse.com/#feat=upgradeinsecurerequests

user2523022
quelle
23
Mit dieser Lösung können Sie keine http-Inhalte auf einer https-Site bereitstellen. Dies erzwingt lediglich http-Anforderungen als https-Anforderungen. Wenn die Ressource auf https nicht vorhanden ist, wird stattdessen nur ein 404-Fehler angezeigt.
Felix
Dies funktioniert tatsächlich zumindest für meine Bedürfnisse. Ich habe es mit Firefox getestet und bestätigt, dass es funktioniert. Mein Problem ist, dass die Quell-URL nicht der HTTPS-Konformität entspricht, während meine eigene Website HTTPS verwendet.
Fernan Vecina
Arbeiten wie Charme in Chrom Version 76.0.3809.132 (Official Build)
Mohamed Azharuddin
8

In den meisten Browsern werden immer Warnungen vor blockierten Inhalten angezeigt, wenn Sie versuchen, nicht sichere Inhalte auf einer https-Seite anzuzeigen. Dies ist schwierig, wenn Sie Inhalte von anderen Websites einbetten möchten, die nicht hinter ssl stehen. Sie können die Warnungen deaktivieren oder die Blockierung in Ihrem eigenen Browser entfernen, aber für andere Besucher ist dies ein Problem.

Eine Möglichkeit besteht darin, die Seite des Inhaltsservers zu laden, die Bilder und andere Dinge auf Ihrem Server zu speichern und über https anzuzeigen.

Sie können auch versuchen, einen Dienst wie embedded.ly zu verwenden und den Inhalt über diesen abzurufen. Sie haben Unterstützung, um den Inhalt hinter https zu erhalten.

Addeladde
quelle
Wenn Sie den Inhalt kratzen und auf Ihrer Website anzeigen, besteht immer das Risiko von Cross-Site-Scripting. Eine gute Lösung besteht also darin, den Inhalt auf einer separaten URL zu kratzen und die Daten in einem Iframe von dieser URL mit https zu präsentieren. Auf diese Weise verhindern Sie Cross-Site-Scripting auf Ihrer Mainsite und Sitzungsentführung.
Addeladde
6

Die Verwendung von Google als SSL-Proxy funktioniert derzeit nicht.

Warum?

Wenn Sie eine Seite von Google geöffnet haben, finden Sie x-frame-optionsin der Kopfzeile ein Feld. Google-Antwortheader

Der X-Frame-Options HTTP - Response - Header kann verwendet werden , um anzuzeigen , ob ein Browser erlaubt sein sollte , eine Seite in einem zu machen <frame>, <iframe>oder <object>. Websites können dies verwenden, um Clickjacking-Angriffe zu vermeiden, indem sichergestellt wird, dass ihr Inhalt nicht in andere Websites eingebettet ist.

(Zitat aus MDN)

Eine der Lösungen

Unten ist meine Arbeit für dieses Problem:

Laden Sie den Inhalt in AWS S3 hoch, und es wird ein https-Link für die Ressource erstellt.
Hinweis: Legen Sie die Berechtigung für die HTML-Datei fest, damit alle Benutzer sie anzeigen können.

Danach können wir es als srciframe auf den https-Websites verwenden. AWS

David Guan
quelle
2

Sie können versuchen, alles, was Sie brauchen, mit PHP oder einer anderen serverseitigen Sprache zu kratzen, und dann den Iframe auf den kratzenden Inhalt setzen. Hier ist ein Beispiel mit PHP:

Scrapedcontent.php:

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

index.html:

<iframe src="scrapedcontent.php"></iframe>
Gewähren
quelle
3
Wie werden Sie mit Bildern, enthaltenen JS- und CSS-Dateien, Hyperlinks und AJAX-Anforderungen umgehen?
Dotancohen
@dotancohen Sie haben Recht, es ist keine perfekte Lösung, aber ich denke, es ist das Beste für diese Situation. Auf einigen Websites treten die von Ihnen besprochenen Probleme nicht auf.
Grant
1
Dies funktioniert, aber es lädt effektiv den Inhalt und damit die Ladezeit, wenn Ihr Server den Inhalt kratzt und dann erneut
bereitstellt
1

Verwenden Sie Ihren eigenen HTTPS-zu-HTTP-Reverse-Proxy.

Wenn es sich bei Ihrem Anwendungsfall um einige wenige, selten zu ändernde URLs handelt, die in die eingebettet werden sollen iframe, können Sie einfach einen Reverse-Proxy dafür auf Ihrem eigenen Server einrichten und so konfigurieren, dass eine httpsURL auf Ihrem Server einer zugeordnet isthttp URL auf dem Proxyserver zugeordnet ist. Da ein Reverse-Proxy vollständig serverseitig ist, kann der Browser nicht feststellen, dass er "nur" mit einem Proxy der realen Website spricht, und beschwert sich daher nicht, da die Verbindung zum Proxy SSL ordnungsgemäß verwendet.

Wenn Sie beispielsweise Apache2 als Webserver verwenden, lesen Sie diese Anweisungen , um einen Reverse-Proxy zu erstellen.

Tanius
quelle
1
mitmproxyist ein Debugging-Tool, kein Produktions-Proxy-System. ngrokist Tunneldienst, hauptsächlich für Entwicklungsserver, ich verstehe nicht, wie es dafür nützlich sein kann.
Kolen
@kolen Es geht nicht um die Tools, es geht um die Idee, dafür einen Reverse-Proxy zu verwenden, der in den anderen Antworten noch nicht erwähnt wurde. Wechseln Sie jetzt zu Apache. Dies ist eine weitaus häufigere Methode, um einen Reverse-Proxy zu erstellen.
Tanius