Cómo permitir contenido http dentro de un iframe en un sitio https


145

Cargo algo de HTML en un iframe, pero cuando un archivo al que se hace referencia usa http, no https, aparece el siguiente error:

[bloqueado] La página en {current_pagename} ejecutó contenido inseguro desde {referenced_filename}

¿Hay alguna forma de desactivar esto o alguna forma de evitarlo?

El iframe no tiene srcatributo y los contenidos se configuran usando:

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


hizo una edición El src no está configurado ya que el contenido está escrito en el iframe
georgephillips

1
Gracias por todas las respuestas. Larga historia corta es proxy del contenido.
georgephillips

@georgephillips, ¿compartirías el código para representar el contenido?
Gintas_

Respuestas:


28

Según la generalidad de esta pregunta, creo que necesitará configurar su propio proxy HTTPS en algún servidor en línea. Haz los siguientes pasos:

  • Prepare su servidor proxy: instale IIS, Apache
  • Obtenga un certificado SSL válido para evitar errores de seguridad (libre de startssl.com, por ejemplo)
  • Escriba un contenedor, que descargará contenido inseguro (cómo a continuación)
  • Desde su sitio / aplicación obtenga https://yourproxy.com/?page=http://insecurepage.com

Si simplemente descarga contenido del sitio remoto a través de file_get_contents o similar, aún puede tener enlaces inseguros al contenido. Tendrás que encontrarlos con expresiones regulares y también reemplazarlos. Las imágenes son difíciles de resolver, pero encontré una solución aquí: http://foundationphp.com/tutorials/image_proxy.php


1
Esto no funcionará, ya que muchas páginas detrás de iframe no quieren incrustarse en un iframe y, por lo tanto, establecer el encabezado X-Frame-Options en SAMEORIGIN. Incluso si puede evitar esto usando el proxy, la página intentará cargar algo como /insecurepage.css y su navegador solicitará yourdomain / insecurepage.css
antídoto el

135

Nota: Si bien esta solución puede haber funcionado en algunos navegadores cuando se escribió en 2014, ya no funciona. Los iframenavegadores modernos no permiten navegar o redirigir a una URL HTTP en una página incrustada en HTTPS, incluso si el marco comenzó con una URL HTTPS.

La mejor solución que creé es simplemente usar google como proxy SSL ...

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

Probado y funciona en firefox.

Otros metodos:

  • Use un tercero como embed.ly (pero realmente solo es bueno para las API http conocidas).

  • Cree su propio script de redireccionamiento en una página https que controle (un simple redireccionamiento de JavaScript en una página vinculada relativa debería ser el truco. Algo así como: (puede usar cualquier idioma / método)

    https://example.com Eso tiene un iframe vinculado a ...

    https://example.com/utilities/redirect.html Que tiene un script de redirección js simple como ...

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

  • Alternativamente, puede agregar una fuente RSS o escribir un lector / analizador para leer el sitio http y mostrarlo dentro de su sitio https.

  • También podría / debería recomendar al propietario del sitio http que cree una conexión SSL. Si por ninguna otra razón que aumenta seo .

A menos que pueda hacer que el propietario del sitio http cree un certificado ssl, la solución más segura y permanente sería crear una fuente RSS que grabe el contenido que necesita (presumiblemente no está 'haciendo' nada en el sitio http, eso es decir no iniciar sesión en ningún sistema).

El problema real es que tener elementos http dentro de un sitio https representa un problema de seguridad. No hay formas completamente kosher de este riesgo de seguridad, por lo que lo anterior son solo soluciones actuales.

Tenga en cuenta que puede deshabilitar esta medida de seguridad en la mayoría de los navegadores (usted mismo, no para otros). También tenga en cuenta que estos 'hacks' pueden volverse obsoletos con el tiempo.


10
Gran respuesta, gracias. Solo para hacerle saber en Chrome, el método de redireccionamiento JS no funciona, solo previene el cambio (como lo hace cuando intenta cargarlo normalmente).
georgephillips

9
El truco de redireccionamiento parece funcionar solo en Firefox. Chrome sigue negando cargar el contenido inseguro. ¿Hay alguna otra solución conocida?
Andreas Gohr

47
Solo quería señalar que el método "Crear su propio guión de redireccionamiento en una página https que controle" ya no funciona con las versiones actuales de Chrom (e | ium) y Firefox, incluso utilizando JS.
kako-nawao

17
Esta respuesta no es válida hasta la fecha, cualquier otra solución
samdd

22
La respuesta debe tener una opción para ser etiquetada como 'obsoleta'. Crea confusión a menos que lea todos los comentarios.
Nitin

28

Sé que esta es una publicación anterior, pero otra solución sería usar cURL, por ejemplo:

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

luego en su etiqueta de iframe, algo como:

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

Este es solo un ejemplo MÍNIMO para ilustrar la idea: no desinfecta la URL ni evitará que otra persona use el redirect.php para sus propios fines. Considere estas cosas en el contexto de su propio sitio.

La ventaja, sin embargo, es que es más flexible. Por ejemplo, puede agregar alguna validación de los datos $ curl'd para asegurarse de que es realmente lo que desea antes de mostrarlo; por ejemplo, pruebe para asegurarse de que no sea un 404 y tenga contenido alternativo propio si está es.

Además, estoy un poco cansado de confiar en los redireccionamientos de JavaScript para cualquier cosa importante.

¡Salud!


44
Esto funciona bastante bien, pero los enlaces dentro del sitio se están volviendo inválidos. Por ejemplo, tengo un dominio llamado example.comque tiene un SSL. Estoy incrustando un iframe con el example.netque no tiene SSL. El example.comtiene un enlace como href="https://stackoverflow.com/path/file.html"y mientras hace clic en él, como es la apertura https://example.com/path/file.htmlen lugar dehttp://example.net/path/file.html
Sibidharan

1
El enlace no puede ser relativo si desea que esto funcione. En otras palabras, especifique la URL completa dentro de href. Si esto es dinámico, hay bibliotecas para tomar cada segmento de la URL en Javascript, así como en el lado del servidor.
Anthony Mason

css del sitio de destino bajo iframe está roto. Por favor verifique
Raju yourPepe

14

agregar <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">en la cabeza

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

compatibilidad del navegador: http://caniuse.com/#feat=upgradeinsecurerequests


23
Esta solución no le permite servir contenido http en un sitio https. Todo lo que hace es forzar las solicitudes http como solicitudes https. Si el recurso no existe en https, solo obtendrá un error 404.
Felix

Esto en realidad funciona al menos para mis necesidades ... lo probé con firefox y confirmó que funciona. Mi problema es que la URL de origen no cumple con HTTPS mientras mi propio sitio web usa HTTPS.
Fernan Vecina

Trabajando como encanto en Chrome Versión 76.0.3809.132 (Versión oficial)
Mohamed Azharuddin

8

Siempre recibirá advertencias de contenido bloqueado en la mayoría de los navegadores cuando intente mostrar contenido no seguro en una página https. Esto es complicado si desea insertar cosas de otros sitios que no están detrás de SSL. Puede desactivar las advertencias o eliminar el bloqueo en su propio navegador, pero para otros visitantes es un problema.

Una forma de hacerlo es cargar el lado del servidor de contenido y guardar las imágenes y otras cosas en su servidor y mostrarlas desde https.

También puede intentar usar un servicio como embed.ly y obtener el contenido a través de ellos. Tienen soporte para obtener el contenido detrás de https.


Si raspa el contenido y lo muestra en su sitio, siempre existe el riesgo de secuencias de comandos entre sitios. Entonces, una solución de Dios es raspar el contenido en una url separada y presentar los datos en un iframe desde esa url con https. De ese modo, evita las secuencias de comandos entre sitios en su sitio principal y el secuestro de sesión.
Addeladde

6

Usar Google como proxy SSL no funciona actualmente,

¿Por qué?

Si abrió alguna página de google, encontrará que hay un x-frame-optionscampo en el encabezado. Encabezado de respuesta de Google

El encabezado de respuesta HTTP X-Frame-Options se puede usar para indicar si un navegador debe tener permiso para representar una página en un <frame>, <iframe>o <object>. Los sitios pueden usar esto para evitar ataques de clickjacking, asegurando que su contenido no esté incrustado en otros sitios.

(Cita de MDN)

Una de las soluciones

A continuación se muestra mi solución para este problema:

Cargue el contenido en AWS S3 y creará un enlace https para el recurso.
Aviso: establezca el permiso para el archivo html para permitir que todos lo vean.

Después de eso, podemos usarlo como srciframe en los sitios web https. AWS


2

Puede intentar eliminar todo lo que necesite con PHP u otro lenguaje del lado del servidor, luego colocar el iframe en el contenido eliminado. Aquí hay un ejemplo con PHP:

scrapedcontent.php:

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

index.html:

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

3
¿Cómo manejará las imágenes, incluidos los archivos JS y CSS, los hipervínculos y las solicitudes AJAX?
dotancohen

@dotancohen tienes razón, no es una solución perfecta, pero creo que es lo mejor para esta situación. Algunos sitios no se encontrarán con los problemas que discutió.
Grant

1
Esto funciona, pero efectivamente duplica el contenido y, por lo tanto, el tiempo de carga a medida que su servidor raspa y luego vuelve a servir el contenido ...
ChristoKiwi


1

Use su propio proxy inverso HTTPS a HTTP.

Si su caso de uso se trata de unos pocos, que rara vez cambian las URL para incrustarlas iframe, simplemente puede configurar un proxy inverso para esto en su propio servidor y configurarlo para que una httpsURL en su servidor se asigne a una httpURL en el servidor proxy. Dado que un proxy inverso está completamente en el lado del servidor, el navegador no puede descubrir que está "solo" hablando con un proxy del sitio web real y, por lo tanto, no se quejará, ya que la conexión al proxy usa SSL correctamente.

Si, por ejemplo, usa Apache2 como su servidor web, consulte estas instrucciones para crear un proxy inverso.


1
mitmproxyes una herramienta de depuración, no un sistema proxy de producción. ngrokes un servicio de tunelización, principalmente para servidores de desarrollo, no entiendo cómo puede ser útil para esto.
kolen

@kolen No se trata de las herramientas, se trata de la idea de usar un proxy inverso para esto, que aún no se menciona en las otras respuestas. Cambiando a Apache ahora, que es una forma mucho más común de hacer un proxy inverso.
Tanius
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.