{"id":4309,"date":"2020-12-23T15:50:08","date_gmt":"2020-12-23T14:50:08","guid":{"rendered":"https:\/\/www.lucushost.com\/blog\/?p=4309"},"modified":"2021-05-26T13:09:29","modified_gmt":"2021-05-26T12:09:29","slug":"contenido-mixto","status":"publish","type":"post","link":"https:\/\/www.lucushost.com\/blog\/contenido-mixto\/","title":{"rendered":"C\u00f3mo corregir el contenido mixto en WordPress"},"content":{"rendered":"<p>Activas un certificado SSL en tu web pensando que el navegador la va a mostrar como segura, pero\u2026 \u00a1Sorpresa! Se sigue mostrando una advertencia de seguridad, tu WordPress tiene <strong>contenido mixto<\/strong>.<\/p>\n<p><!--more--><\/p>\n<p>Pero, \u00bfqu\u00e9 es eso del contenido mixto? \u00bfPor qu\u00e9 se genera este error si mi web ya funciona con HTTPS? \u00bfEs culpa del certificado?<\/p>\n<p>Es normal que si es la primera vez que te ocurre esto te vengan mil preguntas a la cabeza, pero no te preocupes. En este art\u00edculo voy a explicarte con detalle qu\u00e9 es el contenido mixto, c\u00f3mo identificarlo y, por supuesto, c\u00f3mo corregirlo para que tu web en WordPress se muestre como SEGURA (s\u00ed, con may\u00fasculas).<\/p>\n<p>\u00a1Vamos a ello!<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Tabla de contenidos:<\/p><ul class=\"toc_list\"><li><a href=\"#Que_es_el_contenido_mixto\">\u00bfQu\u00e9 es el contenido mixto?<\/a><ul><li><a href=\"#Contenido_mixto_activo\">Contenido mixto activo<\/a><\/li><li><a href=\"#Contenido_mixto_pasivo\">Contenido mixto pasivo<\/a><\/li><\/ul><\/li><li><a href=\"#Contenido_mixto_en_WordPress\">Contenido mixto en WordPress<\/a><\/li><li><a href=\"#Como_corregir_el_contenido_mixto_en_WordPress\">C\u00f3mo corregir el contenido mixto en WordPress<\/a><ul><li><a href=\"#1o_Instala_el_plugin_Really_Simple_SSL_en_WordPress\">1\u00ba. Instala el plugin Really Simple SSL en WordPress<\/a><\/li><li><a href=\"#2o_Habilita_la_seguridad_SSL\">2\u00ba. Habilita la seguridad SSL<\/a><\/li><li><a href=\"#3o_Activa_la_redireccion_301_por_htaccess\">3\u00ba. Activa la redirecci\u00f3n 301 por .htaccess<\/a><\/li><\/ul><\/li><li><a href=\"#Mi_web_todavia_muestra_contenido_mixto_que_hago\">Mi web todav\u00eda muestra contenido mixto, \u00bfqu\u00e9 hago?<\/a><ul><li><a href=\"#1o_Identifica_los_recursos_que_originan_el_contenido_mixto_en_tu_web\">1\u00ba. Identifica los recursos que originan el contenido mixto en tu web<\/a><\/li><li><a href=\"#2o_Reemplaza_el_recurso_por_uno_con_HTTPS\">2\u00ba. Reemplaza el recurso por uno con HTTPS<\/a><\/li><li><a href=\"#Alternativa_Modifica_el_htaccess_de_WordPress\">Alternativa: Modifica el .htaccess de WordPress<\/a><\/li><\/ul><\/li><li><a href=\"#Conclusion\">Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n\n<h2><span id=\"Que_es_el_contenido_mixto\">\u00bfQu\u00e9 es el contenido mixto?<\/span><\/h2>\n<p>El <strong>contenido mixto<\/strong> se produce cuando una web con HTTPS carga parcialmente contenido con HTTP. Es decir, la p\u00e1gina solamente est\u00e1 parcialmente encriptada, por lo que no es del todo segura. De hecho, en funci\u00f3n del navegador que utilizas, tus clientes recibir\u00e1n una advertencia en la que se indica que la conexi\u00f3n no es cifrada.<\/p>\n<p>En otras palabras, es una web que, pese a tener un certificado SSL, <strong>no tiene todo el contenido cifrado con HTTPS<\/strong>. Parece una web segura, pero no lo es.<\/p>\n<p>No s\u00e9 si hace falta recordar la importancia de que una p\u00e1gina web tenga todas sus conexiones cifradas con SSL, pero por si acaso lo voy a hacer.<\/p>\n<p>Las p\u00e1ginas que todav\u00eda trabajan con HTTP son vulnerables a que cualquier usuario malintencionado pueda interceptar la informaci\u00f3n que se transmite entre servidor y navegador web. Es decir, los datos no viajan cifrados y la informaci\u00f3n que se env\u00eda no est\u00e1 protegida.<\/p>\n<p>En cambio, cuando activas un SSL y tienes tu web trabajando con HTTPS toda la informaci\u00f3n que se transmite est\u00e1 a salvo. \u00bfEl resultado? M\u00e1s seguridad para tu negocio, pero tambi\u00e9n para tus clientes. Te recomiendo que le eches un ojo a este art\u00edculo en el que te explico de forma m\u00e1s exhaustiva la <strong><a href=\"https:\/\/www.lucushost.com\/blog\/diferencia-entre-http-y-https\/\">diferencia entre HTTP y HTTPS<\/a><\/strong>.<\/p>\n<p>Por tanto, podr\u00edamos decir que<strong> una web con contenido mixto es una p\u00e1gina que se encuentra a medio camino<\/strong>. Aunque la solicitud inicial se hace con HTTPS, una parte del contenido se carga con HTTP.<\/p>\n<p>Eso s\u00ed, es importante distinguir dos tipos de contenido mixto: contenido mixto activo y contenido mixto pasivo. Veamos en qu\u00e9 consiste cada uno de ellos.<\/p>\n<h3><span id=\"Contenido_mixto_activo\">Contenido mixto activo<\/span><\/h3>\n<p>El <strong>contenido mixto activo<\/strong> se refiere al contenido que interact\u00faa con la p\u00e1gina, ya que tiene acceso a todo o parte del modelo de documentos de la p\u00e1gina HTTPS. Esto hace posible que cualquier atacante pueda alterar el comportamiento de la web, introducir c\u00f3digo malicioso, robar informaci\u00f3n confidencial (contrase\u00f1as, datos de pago, etc.) o tomar el control total del sitio.<\/p>\n<p>Estas son algunas de las solicitudes HTTP que se consideran contenido mixto activo:<\/p>\n<ul>\n<li aria-level=\"1\">&lt;script&gt; (src attribute)<\/li>\n<li aria-level=\"1\">&lt;link&gt; (href attribute) (this includes <a href=\"https:\/\/www.lucushost.com\/blog\/css\/\">CSS<\/a> stylesheets)<\/li>\n<li aria-level=\"1\">&lt;iframe&gt; (src attribute)<\/li>\n<li aria-level=\"1\">XMLHttpRequest requests<\/li>\n<li aria-level=\"1\">etch() requests<\/li>\n<li aria-level=\"1\">Todos los casos en CSS cuando una url() utiliza el valor (@font-face, cursor, background-image, etc.).<\/li>\n<li aria-level=\"1\">&lt;object&gt; (data attribute)<\/li>\n<li aria-level=\"1\">Navigator.sendBeacon (url attribute)<\/li>\n<\/ul>\n<p>Debido a la peligrosidad de la presencia de contenido mixto activo en una web, todos los navegadores suelen bloquearlo para proteger a los usuarios.<\/p>\n<h3><span id=\"Contenido_mixto_pasivo\">Contenido mixto pasivo<\/span><\/h3>\n<p>El <strong>contenido mixto pasivo<\/strong> se refiere al contenido de una web que se carga mediante HTTP en una p\u00e1gina web HTTPS. Este tipo de contenido no interact\u00faa con el resto de la p\u00e1gina y se considera mucho <strong>menos problem\u00e1tico<\/strong> que el contenido mixto activo.<\/p>\n<p>Estos son los tipos de solicitudes HTTP que se consideran contenido pasivo:<\/p>\n<ul>\n<li>&lt;img&gt; (attribute src)<\/li>\n<li>&lt;audio&gt; (attribute src)<\/li>\n<li>&lt;video&gt; (attribute src)<\/li>\n<li>&lt;objeto&gt; subrecursos (cuando un &lt;objeto&gt; realiza solicitudes HTTP)<\/li>\n<\/ul>\n<p>En este tipo de casos un atacante podr\u00eda interceptar las peticiones HTTP como, por ejemplo, un v\u00eddeo, y eliminarlo o reemplazarlo con contenido inapropiado o malintencionado, pero no puede alterar otras partes de la p\u00e1gina web.<\/p>\n<p>No todos los navegadores se comportan igual ante la presencia de contenido mixto pasivo en una web. Para el mismo dominio, Google Chrome actualiza autom\u00e1ticamente este contenido para que cargue bajo HTTPS y, en caso de no poder hacerlo, no muestra el archivo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4315\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/contenido-mixto-pasivo-chrome.png\" alt=\"Ejemplo de una web con contenido mixto pasivo en Google Chrome\" width=\"469\" height=\"372\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/contenido-mixto-pasivo-chrome.png 469w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/contenido-mixto-pasivo-chrome-300x238.png 300w\" sizes=\"(max-width: 469px) 100vw, 469px\" \/><\/p>\n<p>Firefox, en cambio, s\u00ed muestra todo el contenido, pero advierte que parte de \u00e9l no es seguro.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4314\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ejemplo-contenido-mixto.png\" alt=\"Ejemplo de una p\u00e1gina web con contenido mixto en Firefox\" width=\"517\" height=\"364\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ejemplo-contenido-mixto.png 517w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ejemplo-contenido-mixto-300x211.png 300w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><\/p>\n<p>Por otra parte, Microsoft Edge muestra la p\u00e1gina como no segura e indica el motivo, pero carga todo el tipo de contenido.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4316\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/contenido-mixto-pasivo-microsoft-edge.png\" alt=\"Ejemplo de una web con contenido mixto pasivo en Microsoft Edge\" width=\"551\" height=\"479\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/contenido-mixto-pasivo-microsoft-edge.png 551w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/contenido-mixto-pasivo-microsoft-edge-300x261.png 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/p>\n<h2><span id=\"Contenido_mixto_en_WordPress\">Contenido mixto en WordPress<\/span><\/h2>\n<p>Aunque no es uno de los errores m\u00e1s comunes de WordPress, en algunos casos, tras activar el SSL en WordPress, la web muestra un mensaje de advertencia indicando que <strong>parte del contenido no es seguro<\/strong>.<\/p>\n<p>Pero, \u00bfpor qu\u00e9 ocurre esto? Hay muchas razones por las que se genera el problema de <strong>contenido mixto en WordPress<\/strong>, aunque estas son algunas de las causas m\u00e1s habituales que nos solemos encontrar en soporte:<\/p>\n<ul>\n<li aria-level=\"1\">La <strong><a href=\"https:\/\/www.lucushost.com\/blog\/redireccion-301\/\">redirecci\u00f3n 301<\/a><\/strong> de HTTP a HTTPS no est\u00e1 establecida correctamente y algunos elementos no cargan bajo el protocolo seguro.<\/li>\n<li aria-level=\"1\">Acabas de instalar un plugin en WordPress que utiliza rutas absolutas del tipo <em>http:\/\/tudominio.com\/style.css<\/em> en vez de rutas relativas como <em>\/style.css<\/em>.<\/li>\n<li aria-level=\"1\">Est\u00e1s utilizando un recurso o herramienta externa que carga con una ruta <em>http:\/\/, <\/em>en lugar de <em>https:\/\/<\/em>.<\/li>\n<li aria-level=\"1\">Las im\u00e1genes que subes a WordPress o las que muestran los <strong><a href=\"https:\/\/www.lucushost.com\/blog\/widgets-wordpress-que-son-para-que-sirven\/\">widgets<\/a><\/strong> cargan a trav\u00e9s de una URL del tipo <em>http:\/\/tudominio.com\/wp-content\/uploads\/imagen.jpg<\/em>, en vez de <em>https:\/\/tudominio.com\/wp-content\/uploads\/imagen.jpg<\/em>.<\/li>\n<\/ul>\n<p>Ahora toca pasar a la parte pr\u00e1ctica, as\u00ed que veamos <strong>c\u00f3mo corregir el contenido mixto en WordPress<\/strong>.<\/p>\n<h2><span id=\"Como_corregir_el_contenido_mixto_en_WordPress\">C\u00f3mo corregir el contenido mixto en WordPress<\/span><\/h2>\n<p>Para corregir el contenido mixto de WordPress te recomendamos que utilices el plugin <strong>Really Simple SSL<\/strong>, as\u00ed puedes forzar tu web para que todas las URLs con HTTP carguen con HTTPS.<\/p>\n<p>\u00bfVemos c\u00f3mo se hace?<\/p>\n<p><strong>\u00a1Importante!<\/strong> Siempre que vayas a hacer cualquier cambio en tu web, aseg\u00farate de tener una copia de seguridad completa de tu sitio. Recuerda que, si tienes tu <strong><a href=\"\/hosting-wordpress\">Hosting WordPress SSD<\/a><\/strong> con nosotros, desde tu \u00e1rea de cliente tienes acceso a <strong><a href=\"https:\/\/www.lucushost.com\/ayuda\/premium-backup-gestionar-copias-de-seguridad\/\">Premium Backup<\/a><\/strong>. Una herramienta que realiza dos copias de seguridad al d\u00eda del contenido de tu sitio y te permite realizar cualquier instalaci\u00f3n en solo unos clics. \u00a1As\u00ed siempre est\u00e1s a salvo!<\/p>\n<p>Recuerda tambi\u00e9n que, a partir de WordPress 5.7, ya es posible realizar el <strong><a href=\"https:\/\/www.lucushost.com\/blog\/wordpress-cambiar-http-a-https\/\">cambio de HTTP a HTTPS<\/a><\/strong> en solo un par de clics. As\u00ed evitas cualquier problema de contenido mixto u otros errores relacionados con la seguridad SSL de tu web.<\/p>\n<h3><span id=\"1o_Instala_el_plugin_Really_Simple_SSL_en_WordPress\">1\u00ba. Instala el plugin Really Simple SSL en WordPress<\/span><\/h3>\n<p>Lo primero que tienes que hacer es <a href=\"https:\/\/www.lucushost.com\/blog\/como-entrar-a-mi-wordpress-admin-o-cpanel\/\">acceder a WordPress<\/a> y, en el men\u00fa lateral, ve a la secci\u00f3n \u00abPlugins\u00bb \u2192 \u00abA\u00f1adir nuevo\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1264\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2019\/01\/anadir-plugins-wordpress.png\" alt=\"Instalar plugins en WordPress autom\u00e1ticamente: Paso 1\" width=\"160\" height=\"316\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2019\/01\/anadir-plugins-wordpress.png 160w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2019\/01\/anadir-plugins-wordpress-152x300.png 152w\" sizes=\"(max-width: 160px) 100vw, 160px\" \/><\/p>\n<p>En el buscador escribe \u00abReally Simple SSL\u00bb y pulsa sobre \u00abInstalar\u00bb \u2192 \u00abActivar\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4374\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/instalar-really-simple-ssl.png\" alt=\"Intalar el plugin Really Simple SSL en WordPress\" width=\"562\" height=\"270\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/instalar-really-simple-ssl.png 562w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/instalar-really-simple-ssl-300x144.png 300w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><\/p>\n<h3><span id=\"2o_Habilita_la_seguridad_SSL\">2\u00ba. Habilita la seguridad SSL<\/span><\/h3>\n<p>En la secci\u00f3n \u00abAjustes\u00bb del <a href=\"https:\/\/www.lucushost.com\/blog\/frontend-backend\/\">backend<\/a> de tu web pulsa sobre \u00abSSL\u00bb. Ah\u00ed ver\u00e1s un aviso en grande que te permite activar el SSL y corregir los problemas de contenido mixto en WordPress.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4373\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-really-simple-ssl-wordpress.png\" alt=\"Activar Really Simple SSL en WordPress\" width=\"1205\" height=\"352\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-really-simple-ssl-wordpress.png 1205w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-really-simple-ssl-wordpress-300x88.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-really-simple-ssl-wordpress-1024x299.png 1024w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-really-simple-ssl-wordpress-768x224.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-really-simple-ssl-wordpress-700x204.png 700w\" sizes=\"(max-width: 1205px) 100vw, 1205px\" \/><\/p>\n<h3><span id=\"3o_Activa_la_redireccion_301_por_htaccess\">3\u00ba. Activa la redirecci\u00f3n 301 por .htaccess<\/span><\/h3>\n<p>La redirecci\u00f3n de las URLs con <em>http:\/\/<\/em> a <em>https:\/\/<\/em> con el plugin Really Simple SSL se hacen a trav\u00e9s de PHP, pero te da la opci\u00f3n de activarla por <a href=\"https:\/\/www.lucushost.com\/blog\/htaccess\/\">.htaccess<\/a> para que sea m\u00e1s r\u00e1pida y eficiente.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4372\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-redireccion-301-htaccess-really-simple-ssl.png\" alt=\"Activar la redirecci\u00f3n 301 por .htaccess\" width=\"797\" height=\"428\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-redireccion-301-htaccess-really-simple-ssl.png 797w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-redireccion-301-htaccess-really-simple-ssl-300x161.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-redireccion-301-htaccess-really-simple-ssl-768x412.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-redireccion-301-htaccess-really-simple-ssl-700x376.png 700w\" sizes=\"(max-width: 797px) 100vw, 797px\" \/><\/p>\n<p>\u00a1Listo! Con la activaci\u00f3n de Really Simple SSL ya deber\u00edas tener corregido el contenido mixto en WordPress. Si no es as\u00ed, o si ya ten\u00edas este plugin instalado en WordPress, es posible que el contenido mixto se deba a URLs externas a tu web.<\/p>\n<h2><span id=\"Mi_web_todavia_muestra_contenido_mixto_que_hago\">Mi web todav\u00eda muestra contenido mixto, \u00bfqu\u00e9 hago?<\/span><\/h2>\n<p>Si ya has activado Really Simple SSL, pero el navegador sigue mostrando tu web con contenido mixto, lo mejor es identificar qu\u00e9 recursos est\u00e1n originando el problema y reemplazarlos.<\/p>\n<p>A continuaci\u00f3n te explico paso a paso c\u00f3mo se hace.<\/p>\n<h3><span id=\"1o_Identifica_los_recursos_que_originan_el_contenido_mixto_en_tu_web\">1\u00ba. Identifica los recursos que originan el contenido mixto en tu web<\/span><\/h3>\n<p>Uno de los mejores m\u00e9todos para identificar el contenido mixto en WordPress es <strong>a trav\u00e9s del inspector de elementos<\/strong>. Para ello, abre tu web con el navegador y pulsa la tecla F12 (tambi\u00e9n puedes acceder a trav\u00e9s de las herramientas para desarrolladores de tu navegador). Ve a la pesta\u00f1a \u00abRed\u00bb y pulsa sobre el bot\u00f3n \u00abRecargar\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4371 size-full\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/inspector-de-elementos-red-e1608728920753.png\" alt=\"Pesta\u00f1a de Red del inspector de elementos del navegador\" width=\"1041\" height=\"174\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/inspector-de-elementos-red-e1608728920753.png 1041w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/inspector-de-elementos-red-e1608728920753-300x50.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/inspector-de-elementos-red-e1608728920753-1024x171.png 1024w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/inspector-de-elementos-red-e1608728920753-768x128.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/inspector-de-elementos-red-e1608728920753-700x117.png 700w\" sizes=\"(max-width: 1041px) 100vw, 1041px\" \/><\/p>\n<p>En la fila <em>Estado, M\u00e9todo, Dominio, Archivo, etc.<\/em>, pulsa con el bot\u00f3n derecho del rat\u00f3n y selecciona la opci\u00f3n \u00abEsquema\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4377\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/esquema-inspector-de-elementos.png\" alt=\"Abrir esquema del inspector de elementos del navegador\" width=\"370\" height=\"455\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/esquema-inspector-de-elementos.png 370w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/esquema-inspector-de-elementos-244x300.png 244w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/><\/p>\n<p>De esta forma se crear\u00e1 una nueva columna llamada \u00abEsquema\u00bb que tienes que ordenar de forma ascendente. As\u00ed se mostrar\u00e1n primero los recursos que est\u00e1n cargando con HTTP, tal y como te muestro en este ejemplo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4375\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/detectar-contenido-mixto-con-el-inspector-de-elementos.png\" alt=\"Detectar el contenido mixto en WordPress con el inspector de elementos \" width=\"1394\" height=\"207\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/detectar-contenido-mixto-con-el-inspector-de-elementos.png 1394w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/detectar-contenido-mixto-con-el-inspector-de-elementos-300x45.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/detectar-contenido-mixto-con-el-inspector-de-elementos-1024x152.png 1024w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/detectar-contenido-mixto-con-el-inspector-de-elementos-768x114.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/detectar-contenido-mixto-con-el-inspector-de-elementos-700x104.png 700w\" sizes=\"(max-width: 1394px) 100vw, 1394px\" \/><\/p>\n<h3><span id=\"2o_Reemplaza_el_recurso_por_uno_con_HTTPS\">2\u00ba. Reemplaza el recurso por uno con HTTPS<\/span><\/h3>\n<p>Una vez localizados los elementos que est\u00e1n cargando con <em>http:\/\/<\/em>, tienes que reemplazarlos.<\/p>\n<p>Si se trata de un recurso externo a tu web, aseg\u00farate de sustituirlo con uno que funcione con HTTPS. En cambio, si se trata de una imagen o un v\u00eddeo interno, podr\u00e1s realizar el reemplazo desde el propio escritorio de WordPress, eliminando y subiendo el nuevo archivo.<\/p>\n<h3><span id=\"Alternativa_Modifica_el_htaccess_de_WordPress\">Alternativa: Modifica el .htaccess de WordPress<\/span><\/h3>\n<p>Otra opci\u00f3n para corregir los problemas de contenido mixto en WordPress es modificando el .htaccess a\u00f1adiendo la siguiente l\u00ednea de c\u00f3digo al inicio del fichero (ojo, antes de hacer cualquier cambio, aseg\u00farate de tener una copia de seguridad):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-linenumbers=\"false\">Header always set Content-Security-Policy \"upgrade-insecure-requests;\"<\/pre>\n<p>Esta l\u00ednea le dir\u00e1 al navegador que debe hacer las peticiones de todos los recursos a las versiones con <em>https:\/\/. <\/em><\/p>\n<p>En el caso de que un recurso se est\u00e9 intentando cargar con <em>http:\/\/<\/em> y el servidor no tenga un certificado instalado, dicho elemento no se cargar\u00e1.<\/p>\n<p>Estas l\u00edneas <strong>funcionan en todos los navegadores<\/strong> (Chrome, Firefox, Safari, Opera, Edge\u2026), pero no en Internet Explorer. Esto no quiere decir que tu web vaya a dar un error o deje de funcionar, solamente que el navegador seguir\u00e1 indicando a tus visitas que tu web tiene contenido mixto.<\/p>\n<p>Ten en cuenta que a partir del 17 de agosto de 2021 este navegador dejar\u00e1 de dar soporte por lo que su final est\u00e1 muy cerca. Tanto es as\u00ed que hace unos meses Microsoft ya est\u00e1 forzando a usuarios y empresas a utilizar Microsoft Edge.<\/p>\n<h2><span id=\"Conclusion\">Conclusi\u00f3n<\/span><\/h2>\n<p>\u00bfDespu\u00e9s de activar el SSL en tu WordPress el navegador muestra un aviso de contenido mixto? No te preocupes, la soluci\u00f3n es muy sencilla.<\/p>\n<p>Normalmente, instalando y activando el plugin Really Simple SSL el problema se corrige de ra\u00edz. Si no es as\u00ed, lo mejor es localizar el recurso que est\u00e1 cargando con <em>http:\/\/<\/em> a trav\u00e9s del inspector de elementos de tu navegador y reemplazarlo por uno con <em>https:\/\/, <\/em>o bien modificando el fichero .htaccess. Eso s\u00ed, elijas el m\u00e9todo que elijas, aseg\u00farate siempre de tener a mano una copia de seguridad de tu sitio.<\/p>\n<p>Ahora dime, \u00bfhas podido corregir el contenido mixto en WordPress? \u00bfQu\u00e9 opci\u00f3n has elegido? Por cierto, cualquier duda, d\u00e9jame un comentario e intento echarte una mano \ud83d\ude42 .<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Activas un certificado SSL en tu web pensando que el navegador la va a mostrar como segura, pero\u2026 \u00a1Sorpresa! Se sigue mostrando una advertencia de seguridad, tu WordPress tiene contenido mixto.<\/p>\n","protected":false},"author":3,"featured_media":4312,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,42],"tags":[69,51,54,91,52],"_links":{"self":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/4309"}],"collection":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/comments?post=4309"}],"version-history":[{"count":17,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/4309\/revisions"}],"predecessor-version":[{"id":5013,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/4309\/revisions\/5013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media\/4312"}],"wp:attachment":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media?parent=4309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/categories?post=4309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/tags?post=4309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}