school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

¿Qué es el contenido mixto?

El contenido mixto ocurre cuando un HTML inicial se carga en una conexión HTTPS segura, pero otros recursos (como imágenes, videos, hojas de estilo y secuencias de comandos) se cargan en una conexión HTTP insegura. Esto se denomina contenido mixto porque los contenidos HTTP y HTTPS se cargan para mostrar la misma página y la solicitud inicial estaba segura en HTTPS. Los navegadores modernos muestran advertencias sobre este tipo de contenido para indicarle al usuario que esta página contiene recursos inseguros.

TL;DR

  • HTTPS es importante para proteger tu sitio y tus usuarios de un ataque.
  • El contenido mixto degrada la seguridad de tu sitio y la experiencia del usuario de tu sitio HTTPS.

Solicitudes de recursos y navegadores web

Cuando un navegador visita una página del sitio web, está solicitando un recurso HTML. Luego el servidor web muestra el contenido HTML, que el navegador analiza y le muestra a sus usuarios. A menudo, un único archivo HTML no es suficiente para mostrar una página completa, entonces el archivo HTML incluye referencias a otros recursos que el navegador necesita solicitar. Estos recursos secundarios pueden ser imágenes, videos, HTML extra, CSS o JavaScript, los cuales se obtienen mediante el uso de solicitudes separadas.

Beneficios de HTTPS

Cuando un navegador solicita recursos en HTTPS; que significa HTTP seguro, usa una conexión encriptada para comunicarte con el servidor web.

El uso de HTTPS tiene tres beneficios principales:

  • Autenticación
  • Integridad de los datos
  • Confidencialidad

Autenticación

¿La identidad del sitio web con el que me comunico es la que el sitio afirma tener?

HTTPS permite que el navegador compruebe la apertura del sitio web correcto y que no se ha redireccionado a un sitio malicioso. Cuando visitas el sitio web de tu banco, tu navegador autentica el sitio web, y evita que un atacante se haga pasar por la entidad y robe tus credenciales de acceso.

Integridad de los datos

¿Alguien ha manipulado el contenido que estoy enviando o recibiendo?

HTTPS permite al navegador detectar si un atacante ha cambiado algún dato recibido. Cuando transfieres dinero usando el sitio web de tu banco, HTTPS evita que un atacante cambie el número de cuenta de destino mientras la solicitud está en tránsito.

Confidencialidad

¿Pueden otras personas ver el contenido que envío o recibo?

HTTPS evita que un atacante espíe las solicitudes del navegador, realice un seguimiento de los sitios web visitados o robe la información enviada o recibida.

HTTPS, TLS y SSL

HTTPS significa “HTTP seguro” (protocolo seguro de transferencia de hipertexto). La parte segura se debe a la encriptación agregada a las solicitudes que el navegador envía y recibe. Actualmente, la mayoría de los navegadores usan el protocolo TLS para proporcionar encriptación; TLS a veces se denomina SSL.

Los detalles de HTTPS, TLS y SSL están fuera del alcance de este artículo, pero si quieres obtener más información, los siguientes recursos son un buen lugar para comenzar:

El contenido mixto debilita el protocolo HTTPS

Si se realizan solicitudes de subrecursos usando el protocolo HTTP inseguro, la seguridad de toda la página se verá comprometida porque estas solicitudes serán vulnerables a ataques de intermediarios, en los cuales un atacante espía una conexión de red y es capaz de ver o modificar la comunicación entre dos partes. Mediante estos recursos, un atacante a menudo puede tomar todo el control de una página, no solo del recurso comprometido.

Si bien muchos navegadores muestran advertencias al usuario cuando aparece contenido mixto, para el momento en que estas lleguen será demasiado tarde: se habrán concretado las solicitudes inseguras y la seguridad de la página estará comprometida. Desafortunadamente, esto es bastante común en la web. Por eso, los navegadores no pueden simplemente bloquear todas las solicitudes mixtas sin que con ello restrinjan la funcionalidad de muchos sitios.

Contenido mixto: La página se cargó en HTTPS, pero solicitó una imagen insegura. Este contenido también debería ofrecerse en HTTPS.
Depende de ti, el desarrollador, solucionar los problemas de contenido mixto de tu app.

Un ejemplo simple

Carga de una secuencia de comandos insegura en una página HTTPS.

Si visitas esta página de ejemplo a través de HTTPS (https://googlesamples.github.io/web-fundamentals/.../simple-example.html), verás que hay una etiqueta de secuencia de comandos HTTP que intentará cargar contenido mixto.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title>Simple mixed content example</title>
  </head>
  <body>
    <div role="main">
      <h1>
        Simple mixed content example!
      </h1>
      <p>
        View page over: <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/prevent-mixed-content/simple-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/prevent-mixed-content/simple-example.html">HTTPS</a>
      </p>
      <p>
        This page loads the script simple-example.js using HTTP. This is the simplest case of mixed content. When the simple-example.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS.
      </p>
      <div id="output">Waiting for insecure script to run...</div>
      <script src="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/prevent-mixed-content/simple-example.js"></script>
    </div>
    <script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='https://www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Pruébalo

En este ejemplo, la secuencia de comandos simple-example.js se carga con una URL HTTP. Este es el ejemplo más simple de contenido mixto. Cuando el navegador solicita el archivo simple-example.js, un atacante puede insertar código en el contenido enviado y tomar el control de toda la página.

Afortunadamente, la mayoría de los navegadores actuales bloquean este tipo de contenido peligroso de forma predeterminada. Consulta la sección Comportamiento de los navegadores con contenido mixto.

Contenido mixto: La página se cargó en HTTPS, pero solicitó una secuencia de comandos insegura. Esta solicitud se bloqueó; el contenido se debe ofrecer en HTTPS.
Chrome bloquea la secuencia de comandos insegura.

Un ejemplo de XMLHttpRequest

Carga de datos inseguros con XMLHttpRequest.

En la visualización de esta página de ejemplo a través de HTTPS (https://googlesamples.github.io/web-fundamentals/.../xmlhttprequest-example.html) se incluirá una XMLHttpRequest a través de HTTP para capturar datos JSON con contenido mixto.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title>XMLHttpRequest mixed content example</title>
  </head>
  <body>
    <div role="main">
      <h1>
        XMLHttpRequest mixed content example!
      </h1>
      <p>
        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-example.html">HTTPS</a>
      </p>
      <p>
        This page constructs an HTTP URL dynamically in JavaScript, the URL is eventually used to load an insecure resource by XMLHttpRequest. When the xmlhttprequest-data.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS.
      </p>
      <div id="output">Waiting for data...</div>
      <script>
        var rootUrl = 'http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content';
        var resources = {
          jsonData: '/xmlhttprequest-data.js'
        };
        var request = new XMLHttpRequest();
        request.addEventListener('load', function() {
          var jsonData = JSON.parse(request.responseText);
          document.getElementById('output').innerHTML += '<br>' + jsonData.data;
        });
        request.open('GET', rootUrl + resources.jsonData, true);
        request.send();
      </script>
    </div>
    <script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Pruébalo

En este caso, la URL HTTP se construye dinámicamente en JavaScript y, en un momento dado, XMLHttpRequest la usa para cargar un recurso inseguro. Como en el ejemplo simple anterior, cuando el navegador solicita el archivo xmlhttprequest-data.js, un atacante puede insertar código en el contenido enviado y tomar el control de toda la página.

La mayoría de los navegadores actuales también bloquean estas solicitudes peligrosas.

Contenido mixto: La página se cargó en HTTPS, pero solicitó un punto final XMLHttpRequest inseguro. Esta solicitud se bloqueó; el contenido se debe ofrecer en HTTPS.
Chrome bloquea la XMLHttpRequest insegura.

Un ejemplo de una galería de imágenes

Carga de imágenes inseguras con un lightbox jQuery.

Si visitas esta página de ejemplo a través de HTTPS (https://googlesamples.github.io/web-fundamentals/.../image-gallery-example.html), verás que no se muestra ningún problema de contenido mixto al principio. Sin embargo, cuando hagas clic en una imagen en miniatura, se cargará una imagen de tamaño completo y contenido mixto a través de HTTP.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title>Image gallery mixed content example</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('.gallery').click(function(e) {
          e.preventDefault();
          $('.overlay-foreground').css('background-image', 'url(' + $(this).attr('href') + ')');
          $('.overlay').fadeIn('slow');
        })
        $('.overlay').click(function() {
          $('.overlay').fadeOut('slow');
        })
      });
    </script>
    <style>
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .overlay-background {
        background-color: #000;
        filter:alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
        z-index: 10000;
      }
      .overlay-foreground {
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 10001;
      }
    </style>
  </head>
  <body>
    <div role="main">
      <h1>
        Image gallery mixed content!
      </h1>
      <p>
        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html">HTTPS</a>
      </p>
      <p> 
        Image galleries often rely on the &lt;img&gt; tag src attribute to display thumbnail images on the page, the anchor ( &lt;a&gt; ) tag href attribute is then used to load the full sized image for the gallery overlay. Normally &lt;a&gt; tags do not cause mixed content, but in this case the jQuery code overrides the default link behavior &mdash; to navigate to a new page &mdash; and instead loads the HTTP image on this page. While this content isn't blocked, modern browsers display a warning in the JavaScript console. This can be seen when the page is viewed over HTTPS and the thumbnail is clicked.
      </p>
      CLICK ME! -->
      <a class="gallery" href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy.jpg">
        <img src="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy-thumb.jpg">
      </a>
      <div class="overlay overlay-background" style="display: none;"></div>
      <div class="overlay overlay-foreground" style="display: none;"></div>
    </div>
    <script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Pruébalo

A menudo, las galerías de imágenes dependen del atributo src de las etiquetas <img> para mostrar las imágenes en miniatura en la página. Después, se usa el atributo href de las etiquetas delimitadoras (<a>) para cargar la imagen de tamaño completo de la superposición de la galería. Por lo general, las etiquetas <a> no generan contenido mixto. Sin embargo, en este caso, el código jQuery anula el comportamiento predeterminado del vínculo (navegar a una página nueva) y, en su lugar, carga la imagen HTTP en esta página.

Contenido mixto: La página se cargó en HTTPS, pero solicitó una imagen insegura. Este contenido también debería ofrecerse en HTTPS.

Las imágenes inseguras degradan la seguridad de tu sitio, pero no son tan peligrosas como otros tipos de contenido mixto. Los navegadores actuales cargan imágenes de contenido mixto, pero también muestran advertencias a los usuarios.

Tipos de contenido mixto y amenazas de seguridad relacionadas

Los dos tipos de contenido mixto son el activo y el pasivo.

El contenido mixto pasivo es el contenido que no interactúa con el resto de la página. Por lo tanto, los ataques de un intermediario están limitados a lo que el intermediario puede hacer si intercepta o cambia dicho contenido. En este contenido se incluyen imágenes, videos y material de audio, además de otros recursos que no pueden interactuar con el resto de la página.

El contenido mixto activo interactúa con toda la página y permite a los atacantes hacer casi cualquier cosa en ella. En este contenido se incluyen secuencias de comandos, hojas de estilo, iframes, recursos flash y otros códigos que el navegador puede
descargar y ejecutar.

Contenido mixto pasivo

El contenido mixto pasivo puede, no obstante, representar una amenaza de seguridad para tu sitio y los usuarios. Un atacante puede, por ejemplo, interceptar solicitudes HTTP de imágenes en tu sitio y reemplazar o cambiar estas imágenes. También puede cambiar las imágenes de los botones guardar y borrar, y hacer que los usuarios borren contenido sin desearlo. Además, puede reemplazar los diagramas de tus productos por contenido lascivo o pornográfico y dañar la apariencia de tu sitio. Por último, también puede reemplazar las fotos de tus productos con avisos de otros sitios o productos.

Aun cuando el atacante no altere el contenido de tu sitio, seguirás teniendo un grave problema de privacidad, ya que podrá realizar un seguimiento de los usuarios que usen solicitudes de contenido mixto. El atacante puede conocer las páginas que visita un usuario y los productos que ve a partir de imágenes y otros recursos cargados por el navegador.

A continuación, se muestra un ejemplo de contenido mixto pasivo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title>Passive mixed content example</title>
    <style>
      audio, img, video {
        display: block;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div role="main">
      <h1>
        Passive mixed content!
      </h1>
      <p>
        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html">HTTPS</a>
      </p>
      <p>
        Several examples of passive mixed content. When viewed over HTTPS most browsers do <b>not</b> block this content but instead display warnings in the JavaScript console.
      </p>

      <!-- An insecure audio file loaded on a secure page -->
      <audio src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/sleep.mp3" type="audio/mp3" controls></audio>

      <!-- An insecure image loaded on a secure page -->
      <img src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy.jpg">

      <!-- An insecure video file loaded on a secure page -->
      <video src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" controls></video>
    </div>
    <script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Pruébalo

La mayoría de los navegadores muestran este tipo de contenido mixto a los usuarios. Sin embargo, también muestran una advertencia, ya que este contenido representa un riesgo para la seguridad y privacidad de tu sitio y tus usuarios.

Contenido mixto: La página se cargó en HTTPS, pero solicitó un video inseguro. Este contenido también debería ofrecerse en HTTPS.
Advertencias de contenido mixto en la consola JavaScript de Chrome.

Contenido mixto activo

El contenido mixto activo es una mayor amenaza que el pasivo. Un atacante puede interceptar y reescribir contenido activo. De esta forma, puede tomar todo el control de tu página o, incluso, de todo tu sitio web. Esto le permite cambiar cualquier elemento de la página; esto incluye mostrar contenido completamente diferente, robar contraseñas u otras credenciales de acceso de los usuarios, robar cookies de sesión de los usuarios o redireccionarlos a un sitio totalmente diferente.

Debido a la gravedad de esta amenaza, muchos navegadores bloquean este tipo de contenido de forma predeterminada para proteger a los usuarios, pero la funcionalidad varía según el proveedor y la versión del navegador.

A continuación, se muestran algunos ejemplos de contenido mixto activo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title>Active mixed content example</title>
    <!-- An insecure script file loaded on a secure page -->
    <script src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.js"></script>

    <!-- An insecure stylesheet loaded on a secure page -->
    <link href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/style.css" rel="stylesheet">

    <style>
      .insecure-background {
        /* An insecure resources loaded from a style property on a secure page, this can   
           happen in many places including, @font-face, cursor, background-image, and so on. */
        background: url('http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy-thumb.jpg') no-repeat;
      }
    </style>

    <style>
      .insecure-style-holder span {
        color: #fff;
      }
      .insecure-background {
        color: #000;
        font-weight: bold;
        background-position: left center;
        background-repeat: no-repeat;
        width: 300px;
        height: 140px;
      }
      iframe {
        width: 400px;
        height: 300px;
      }
    </style>

  </head>
  <body>
    <div role="main">
      <h1>
        Active mixed content!
      </h1>
      <p>
        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/active-mixed-content.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/active-mixed-content.html">HTTPS</a>
      </p>
      <p>
        Several examples of active mixed content. When viewed over HTTPS most browsers block this content and display errors in the JavaScript console.
      </p>
      <div class="insecure-style-holder">
        <span style="ba">Insecure style loaded</span>
      </div>
      <div class="insecure-background">
        Loading insecure background here...
      </div>

      <p>Loading insecure iframe...</p>
      <!-- An insecure iframed page loaded on a secure page -->
      <iframe src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html"></iframe>

      <!-- Flash resources also qualify as active mixed content and pose a
      serious security risk. Be sure to look for <object> tags with type set
      to "application/x-shockwave-flash", and an http:// data attribute. -->
      <!-- <object type="application/x-shockwave-flash" data="http://..."></object> -->

      <script>
        // An insecure resource loaded using XMLHttpRequest
        var request = new XMLHttpRequest();
        request.addEventListener('load', function() {
          var jsonData = JSON.parse(request.responseText);
          document.getElementById('output').innerHTML += '<br>' + jsonData.data;
        });
        request.open("GET", "http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-data.js", true);
        request.send();
      </script>
      <div id="output">Waiting for insecure script to run...</div>
    </div>
    <script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Pruébalo

Contenido mixto: La página se cargó en HTTPS, pero solicitó un recurso inseguro. Esta solicitud se bloqueó; el contenido se debe ofrecer en HTTPS.
Errores de contenido mixto en la consola de JavaScript de Chrome.

Comportamiento de los navegadores con contenido mixto

Debido a las amenazas descritas anteriormente, sería ideal que los navegadores bloquearan todo el contenido mixto. Sin embargo, esto dañaría una gran cantidad de sitios web que millones de usuarios usan a diario. La medida adoptada actualmente consiste en bloquear los tipos de contenido mixto más peligrosos y permitir que se continúen solicitando los tipos de contenido que presenten menos peligro.

Los navegadores actuales cumplen con la especificación de contenido mixto, en la cual se definen las categorías de contenido que se puede bloquear y contenido que se debe bloquear.

Según esta especificación, un recurso se asocia al contenido que se puede bloquear “cuando el riesgo permitir su uso como contenido mixto se inferior al de ocasionar perjuicios a sectores importantes de la Web”. Se trata de un subconjunto de la categoría de contenido mixto pasivo descrita anteriormente. Al momento de la redacción de este documento, las imágenes, los videos y los recursos de audio, además de los vínculos capturados previamente, son los únicos tipos de recursos que forman parte del contenido que se puede bloquear. Es probable que esta categoría se reduzca a medida que pase el tiempo.

Todo contenido que no sea contenido que se pueda bloquear se considerará como contenido que se debe bloquear y el navegador lo bloqueará.

Versiones del navegador

Es importante recordar que no todos los visitantes de tu sitio web usan los navegadores más actualizados. Las diferentes versiones de los distintos proveedores de navegadores se comportan de manera diferente respecto del contenido mixto. En el peor de los casos, en algunos navegadores y algunas versiones no se bloquea ningún tipo de contenido mixto, lo cual representa un grave peligro para el usuario.

No incluimos información específica sobre cada navegador, ya que el comportamiento exacto de estos cambia constantemente. Si te interesa conocer el comportamiento de un navegador en particular, busca información que el proveedor haya publicado directamente.