Índice de contenidos
Problema contenido mixto en HTTPS
Después de instalar el certificado SSL y modificar nuestra conexión a HTTPS debemos revisar que todo funcione correctamente. Un problema común cuando cambiamos nuestra web de HTTP a HTTPS son las advertencias generadas por el navegador que nos indican que la web no es completamente segura. Es lo que denominamos: problema contenido mixto.
¿Qué es el contenido mixto?
El contenido mixto en una web con conexión HTTPS es cuando dentro del HTML hay llamadas a carga de recursos con conexiones HTTP.
Contenido mixto HTTPS pasivo y activo
Hay dos tipos de contenido mixto: pasivo y activo.
El contenido mixto pasivo es cuando se cargan recursos HTTP en el atributo src de etiquetas <img>, <audio>, <video>…
<img src=»http://
Este tipo de contenido pasivo, supone una amenaza de seguridad menor que el contenido activo. El contenido activo son llamadas a HTTP dentro de las etiquetas HTML <script>, <link> …
Conclusión: el contenido mixto en tu WordPress puede estar en los widget que cargan imágenes o en archivos php, css y js de tu sitio.
Mostrar contenido mixto
Cuando una página de nuestro sitio contiene contenido mixto, el navegador nos lo indica con una advertencia. En la imagen siguiente puedes ver un ejemplo de advertencia en Chrome. Si pulsamos sobre el indicador de advertencia leeremos la siguiente información : «Es posible que los atacantes puedan ver las imágenes que ves en este sitio web y que las modifiquen para engañarte«.
En este caso concreto el navegador ya nos advierte que el problema contenido mixto es debido a la carga de una o varias imágenes empleando el protocolo HTTP. Para localizar la imagen o imágenes que causan el problema lo mejor, es abrir las «Herramientas para desarrolladores» de tu navegador. Esta herramienta localiza el fragmento de código que causa el problema. Te muestro un ejemplo con Chrome.
Ya hemos localizado que la advertencia: «la provoca un widget que carga una imagen con conexión http».
He marcado las dos llamadas HTTP dentro del widget, pero OJO solo una provoca la advertencia de contenido mixto:
La llamada HTTP la realiza una etiqueta <a> AHÍ NO ESTÁ EL PROBLEMA, obviamente los enlaces pueden pedir conexiones HTTP y eso no es contenido mixto, no carga nada, no estamos pidiendo ningún recurso.
El problema se encuentra en el atributo src de la etiqueta <img> (Carga de contenido pasivo). Para solucionarlo cambiamos la URL dentro del atributo src y quitamos el HTTPS:. Nos debe quedar de la siguiente forma:
<img style=»border:0px» src=»//www.elegantthemes.com/banners/120x600gif.gif» width=»120″ height=»600″ alt=»»>
Guardamos los cambios y listo.
Vamos revisando todas las páginas y modificamos los widget que producen error.
Si el problema lo provoca contenido mixto activo, carga de recursos en archivos del sitio (por ejemplo, llamadas dentro de archivos PHP), debes proceder de la misma forma. Localiza los archivos que provocan el error:
- si son enlaces internos a tu propia web modifica http por https.
- Si estás cargando recursos externos modifica http:// por // (quitamos el http para llamar a otras páginas web).
Si usas la función get_template_directory_uri() en tu sitio y devuelve http
Si desde algún archivo de tu tema, cargas un recurso empleando la función de WordPress «get_template_directory_uri()» y observas que apunta a la dirección de tu blog con http, puedes añadir el siguiente script en el archivo functions.php
function check_if_https() {
if ( !is_ssl() ) {
wp_redirect('https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], 301 );
exit();
}
}
add_action ( 'template_redirect', 'check_if_https', 1 );
Este script comprueba si se está utilizando SSL (https). Si no se está utilizando, crea una redirección (301) a la URL con https.
Cambiar de HTTP a HTTPS los enlaces internos de WordPress
Debes asegurarte que en Ajustes >> Generales de tu WordPress, la dirección de sitio y wordpress esté modificada.
Por supuesto todos los enlaces internos a tu sitio deben estar modificados. No tendrás ningún problema con estas últimas consideraciones si has seguido los pasos del tutorial:
⇒ Cómo cambiar de HTTP a HTTPS todos los enlaces internos de tu WordPress
Te pasaste!!! Me evitaste un tremendo dolor de cabeza, y pude resolver fácilmente mi problema. Muchas gracias!!!
Sandra gracias a ti por comentar, no sabes lo importante que es trabajar unas horas y que le sirva de ayuda a alguien.
Feliz día compañera!
de verdad muchisimas gracias! me has quitado un dolor de cabeza tremendo! estaba tan molesto y frustrado con mi problema de «sitio no seguro» y gracias a tu articulo me sirvió a la perfección
Buenos días Walter, gracias a ti, te deseo un feliz día
Esa gente como tú merece una habitación VIP en el cielo, muchas
Gracias Jose Rodriguez,
añadiría a tu comentario: con gente como tú merece la pena hacer el esfuerzo de escribir tutoriales.
Feliz día
Hola!! Gracias por este articulo, creo entonces que mi sitio tiene contenido mixto, como hago para solucionar eso? 🙁 SOS El sitio web es: https://crudenfs.nl/
Buenos días, José Miguel
he intentado entrar en tu sitio para ayudarte con el contenido mixto, pero parece que tienes la web en mantenimiento:
«Excuses voor het ongemak, maar we verbeteren de website voor een betere ervaring. Kom snel terug …»
me avisas cuando esté disponible.
Feliz día!
Tengo problemas con eso, creo que tengo contenido mixto pero no se como se soluciona. Gracias por abrir este espacio para aprender.
Como saber si tengo contenido mixto en https://crudenfs.nl/ gracias de ante mano
Buenos días, José Miguel
he intentado entrar en tu sitio para ayudarte con el contenido mixto, pero parece que tienes la web en mantenimiento:
«Excuses voor het ongemak, maar we verbeteren de website voor een betere ervaring. Kom snel terug …»
me avisas cuando esté disponible.
Feliz día!
Buenas noches, tengo el sitio xradio.ar los reproductores de repente (si el usuario navega en chrome) no funcionan, el sitio es seguro mixto, cuando uno aplicaba el reproductor se volvía sitio no seguro, pero ahora ya no deja que funcionen. Qué podré hacer? saludos
Hola Jorge, también tengo problemas para reproducir en Safari. Para escuchar audio redireccionas a http://alsegundo.com.ar/xradio/?
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD
Ese error lo produce http://alsegundo.com.ar/xradio/
Saludos
Hola, creo que tengo este mismo problema con una web que estoy haciendo.
https://cristalesmacachin.com.ar/
pero no puedo ver las imagenes de tu tutorial. gracias
Buenos días Felipe, ya puedes ver las imágenes.
hola saludos, tengo problema con una web ya que no me carga, solo aparece el signo de exclamacion en un circulito y dice que la conexion no es segura, la web no es mia pero la utilizo como forma de trabajo si puede ayudarme se lo agradeceria https://iqoption.com/es/download
hola, saludos estoy tratando de abrir una pagina web, es un broken trato de cargarla y nada si puedes ayudarme porfa esta es la url: https://eu.iqoption.com/es/login
Hola, una consulta, se puede tener contenido mixto por el formulario? Ese es el único mensaje que me sale pero no lo llego a identificar.
Buenos días Andrés, estoy repasando la página y no encuentro donde tienes el problema con el contenido mixto, si me indicas la URL que da problemas lo revisó y te informo.
Saludos,
hola. por que bloquea mi reproductor html de mi pagina web. cuando instalo https://
Hola Rodrigo, observa lo siguiente:
(index):150 Mixed Content: The page at ‘https://www.radioenergiaperu.com/’ was loaded over HTTPS, but requested an insecure resource ‘http://player.cloudvps.live/radioenergiaperu/’. This request has been blocked; the content must be served over HTTPS.
ese es uno de los errores, por eso lo bloquea, para solucionarlo, modifica dentro del iframe el siguiente enlace:
src=»http://player.cloudvps.live/radioenergiaperu/
le quitas el http y lo dejas así:
src=»//player.cloudvps.live/radioenergiaperu/»
y en la cabecera en la etiqueta audio, modifica este enlace:
src=»http://radio.dns-extreme.info:9994/;»
por el siguiente:
src=»//radio.dns-extreme.info:9994/;»
Cuando hagas las comprobaciones tienes que seguir revisando todas las páginas y asegurarte que no tienes enlaces http, ni propios ni externos. En el post está explicado cómo trabajar con unos u otros.
Que tengas un buen día.
Muchas gracias, información simple pero muy valiosa.
Gracias a ti Gustavo.
Que tengas un buen día
Hola buen día. Escribo porque coloco en https://www.whynopadlock.com/r que es un programa para detectar porque no funciona mi SSL y me dice que es una imagen pero ya la borre de todos los archivos y nada que se quita. Ayudame por fa
https://www.whynopadlock.com/results/427ae1b8-44a6-4be2-a63a-9a1aaff43fa4
Buenos días Natalia,
la imagen que te da problemas es la siguiente
http://remaxhorizonscommercial.com/wp-content/uploads/2019/01/li-icon.png
si solucionas eso ya lo tienes.
Feliz día
hola muy buenos dias, no se si envie este mensaje antes, me disculpas si asì lo hice.
tengo un problema con bokehphotography.com.co, me notifica que tengo contenido no seguro, el cual corresponde a la imagen del slider del home
me podrìas colaborar para solucionar el problema?
Buenos días Ricardo, ¿me envías la url que provoca la notificación?
Saludos,
Gracias por responder, bueno, pues el problema lo pude solucionar con un plugin, aunque me gustaría poder hacerlo sin necesidiad de eso , o sea me gustaría deshacerme de un plugin
bokehphotography.com.co
Hola Ricardo, si desactivas el plugin y haces una lista de las URL donde están las imágenes que dan problemas, podemos revisarlas todas e ir tratando cada una de ellas. Con el plugin activado no puedo hacer el seguimiento.
Feliz día
hola muy buenos dìas, tengo un problema con una imagen en mi website, me podrìas colaborar?
bokehphotography.com.co
Buenos dias Nerea, tengo un problema que ya se cual es, es una imagen que esta en http y resulta que cuando la subo por elementor dice que esta en https la imagen y cuando actualizo la informacion se convierte nuevamente en http.
Me podrias ayudar con eso?
Muchas gracias
Buenos días Joaquin, ¿me indicas la URL de la imagen para que pueda ver lo que pasa?
Que tengas un buen día,
¡Que genial! ya funciona en mi sitio https://www.laboratorio-castillo.com y ahora estoy actualizando este otro https://www.villasdelujoacapulco.com/
Muchas gracias por la información, realmente valiosa!
Saludos Alejandro
Hola! Tengo contenido mixto en mi web pero me dice que en las hojas de estilo. No uso wordpress sino osclass. Te puedo enviar una captura de pantalla? Es que no cuentro dónde están las líneas de código que me indica el navegador. Gracias.
Buenos días Carolina, claro que me puedes enviar una captura, de todas formas revisa si tienes algún http en la hoja de estilos, seguramente cargas alguna imagen desde el css.
Hola, gracias por el post.
He pasado mi web de http a https sin problema pero no me aparece el candado porque tengo contenido mixto en dos imágenes que siguen en http.
¿Alguien sabe cómo las puedo pasar a https? Paso por paso porque no entiendo dónde debo acceder.
Muchas gracias por la ayuda.
Buenos días Ana, si me facilitas la URL de tu web te indico donde tienes el problema.
Hola Raquel, muchas gracias por tu artículo, muy útil. He seguido tus indicaciones y he localizado el motivo de contenido mixto: insecure image ‘http://image/example.png’.
¿Podrías indicarme qué debo modificar y desde dónde realizarlo?
Observación: En el panel de administración de wordpress no localizo esa imagen en la biblioteca de medios.
Gracias
Buenos días Marta, estamos hablando de la web: http://www.aprgrupo.com, veo que en el pie de página también tienes que modificar enlaces, respecto a la imagen concreta (http://image/example.png‘) si me das la URL de la página de error lo miro. De todas formas supongo que has revisado los widget laterales y todos los archivos del tema.
Ya me cuentas,
Buenas tardes, muchísimas gracias por el artículo, este tipo de cosas me vienen muy bien porque soy una principiante…pero me surge una duda. He llegado hasta la parte en la que dices «Ya hemos localizado que la advertencia: “la provoca un widget que carga una imagen con conexión http”. Y a partir de ahí, no sé cómo seguir para solucionar el problema. Es decir, no sé ni hacer que me aparezca la ventanita que a ti te sale con los dos enlaces, por lo que no sé cómo continuar. Agradecería cualquier ayuda y disculpa si es una pregunta un poco tonta, estoy muy perdida ahora mismo.
Muchísimas gracias!
Hola Raquel, la ventanita es un widget de WordPress que puedes ver en tu administrador en: Apariencia >> Widget
ánimo!
Tengo una web ya con su candadito verde pero un archivo php (que muestra la canción que esta sonado) no muestra su resultado en la misma pues hace referencia a un sitio sin https que solo es con numero IP, ya he probado poner // delante. Si lo ejecuto localmente funciona pero en el servidor de la web no. No puedo dar con la solución. Agradecería mucho una ayuda.
Hola Claudio, prueba añadiendo el siguiente script al archivo functions.php:
function check_if_https() {
if ( !is_ssl() ) {
wp_redirect(‘https://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’], 301 );
exit();
}
}
add_action ( ‘template_redirect’, ‘check_if_https’, 1 );
muchas gracias me funciono perfectamente
tuve que hacer un UPDATE imagenes SET urlimg= REPLACE(ulrimg,’http:’,»); para quitar el http: de mis imagenes en mi tabla pero ahora hay algunas imagenes que no me estan cargando , localmente si cargan las imagenes pero en prouccion no….
ni modo tendre que cambiar algunas imagenes pero ya tengo el candadito verde que queria.. GRACIAS
Gracias a ti, si necesitas algo por aquí estoy.
Feliz día!
Genial, no encontraba el problema y era eso!! muchísimas gracias
Gracias a ti Alejandro, me alegra que hayas solucionado el problema!!!
Gracias, estaba teniendo problemas con mi blog de afiliado, había puesto una foto en el widget que me estaba volviendo loco.
Gracias a ti Ricardo, me alegra que me comuniques que el artículo te ha ayudado.
Que tengas un feliz día!