The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

O que é conteúdo misto?

Conteúdo misto surge quando o HTML inicial é carregado por uma conexão HTTPS protegida, mas outros recursos (como imagens, vídeos, folhas de estilo, scripts e outros) são carregados por uma conexão HTTP desprotegida. O nome desse fenômeno é conteúdo misto porque são carregados conteúdos em HTTP e HTTPS para exibir a mesma página, e a solicitação inicial estava protegida por HTTPS. Os navegadores modernos exibem advertências sobre esse tipo de conteúdo para indicar ao usuário que essa página contém recursos que apresentam risco.

TL;DR

  • O HTTPS é importante para proteger o seu site e os usuários de ataques e invasões.
  • O conteúdo misto reduz o nível de segurança e a experiência do usuário oferecidos pelo seu site HTTPS.

Solicitações de recurso e navegadores web

Quando um navegador acessa uma página de um site, ele está solicitando um recurso HTML. Por isso, o servidor web retorna o conteúdo HTML, que o navegador analisa e exibe aos usuários. Muitas vezes, um único arquivo HTML não é suficiente para exibir a página inteira. Para compensar isso, o arquivo HTML inclui referências a outros recursos que o navegador precisa solicitar. Estes sub-recursos podem ser imagens, vídeos, HTML extra, CSS ou JavaScript, e são obtidos por meio de solicitações individuais.

Benefícios do HTTPS

Quando um navegador solicita recursos por HTTPS — que significa HTTP seguro —, ele usa uma conexão criptografada para se comunicar com o servidor web.

Usar HTTPS tem três principais benefícios:

  • Authentication
  • Integridade de dados
  • Confidencialidade

Autenticação

O site com quem estou me comunicando é quem afirma ser?

O HTTPS permite que o navegador verifique se abriu o site correto e não foi redirecionado a um site malicioso. Ao navegar para o site do seu banco, seu navegador autentica o site, evitando, assim, que um invasor atue como o seu banco e roube suas credenciais de acesso.

Integridade de dados

Alguém adulterou o conteúdo que estou enviando ou recebendo?

O HTTPS permite que o navegador detecte se um invasor alterou algum dado que o navegador recebeu. Ao transferir dinheiro usando o site do seu banco, isto evita que um invasor altere o número da conta de destino enquanto a solicitação está sendo processada.

Confidencialidade

Alguém consegue acessar o conteúdo que estou enviando ou recebendo?

O HTTPS impede que um invasor espione as solicitações do navegador, controle os sites acessados ou roube informações enviadas ou recebidas.

HTTPS, TLS e SSL

HTTPS significa HTTP seguro, protocolo de transferência de hipertexto seguro. A parte segura aqui vem da criptografia adicionada às solicitações enviadas e recebidas pelo navegador. Atualmente, a maioria dos navegadores usa o protocolo TLS para fornecer criptografia. O TLS também é chamado de SSL.

Os detalhes de HTTPS, TLS e SSL estão além do objetivo deste artigo, mas, se quiser saber mais, ler os materiais a seguir é um bom começo:

Conteúdo misto enfraquece HTTPS

Solicitar sub-recursos usando o protocolo HTTP desprotegido enfraquece a segurança de toda a página, já que essas solicitações são vulneráveis a ataques indiretos, em que um invasor espiona uma conexão de rede e visualiza ou modifica a comunicação entre duas partes. Usando estes recursos, um invasor pode, muitas vezes, controlar completamente a página, e não apenas o recurso comprometido.

Embora muitos navegadores comuniquem advertências de conteúdo misto ao usuário, quando isso acontece, é tarde demais: as solicitações desprotegidas já foram realizadas e a segurança da página está comprometida. Infelizmente, esse cenário é muito comum na web, por isso os navegadores não conseguem simplesmente bloquear todas as solicitações mistas sem restringir o funcionamento de muitos sites.

Conteúdo misto: A página foi carregada por HTTPS, mas solicitou uma imagem não confiável. Este conteúdo também deve ser fornecido por HTTPS.
Cabe a você, desenvolvedor, consertar problemas de conteúdo misto do seu aplicativo.

Um exemplo simples

Carregar um script não confiável de uma página HTTPS.

A exibição desta página de exemplo por HTTPShttps://googlesamples.github.io/web-fundamentals/.../simple-example.html— contém uma tag de script HTTP que tenta carregar conteúdo misto.

<!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>

Experimente

Neste exemplo, o script simple-example.js é carregado com um URL HTTP. Este é o caso mais simples de conteúdo misto. Quando o navegador solicita o arquivo simple-example.js, um invasor pode injetar código no conteúdo retornado e assumir o controle de toda a página.

Felizmente, os navegadores mais modernos bloqueiam este tipo de conteúdo perigoso por padrão. Acesse como o navegador lida com conteúdo misto.

Conteúdo misto: A página foi carregada por HTTPS, mas solicitou um script não confiável. Esta solicitação foi bloqueada. O conteúdo deve ser fornecido por HTTPS.
O Chrome bloqueia script não confiável.

Um exemplo de XMLHttpRequest

Carregar dados não confiáveis com XMLHttpRequest.

A exibição desta página de exemplo por HTTPShttps://googlesamples.github.io/web-fundamentals/.../xmlhttprequest-example.html— contém uma XMLHttpRequest por HTTP para recuperar dados JSON do conteúdo misto.

<!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>

Experimente

Aqui, o URL HTTP é construído dinamicamente em JavaScript e, eventualmente, é usado por XMLHttpRequest para carregar um recurso desprotegido. Como no exemplo simples acima, quando o navegador solicita o arquivo xmlhttprequest-data.js, um invasor pode injetar código no conteúdo retornado e assumir o controle de toda a página.

A maioria dos navegadores modernos bloqueia essas solicitações perigosas.

Conteúdo misto: A página foi carregada por HTTPS, mas solicitou um ponto de extremidade XMLHttpRequest não confiável. Esta solicitação foi bloqueada. O conteúdo deve ser fornecido por HTTPS.
O Chrome bloqueia XMLHttpRequest não confiável.

Um exemplo de galeria de imagens

Carregar imagens não confiáveis com lightbox jQuery.

A exibição desta página de exemplo por HTTPShttps://googlesamples.github.io/web-fundamentals/.../image-gallery-example.html — inicialmente não tem problemas com conteúdo misto, mas, quando a imagem em miniatura recebe um clique, uma imagem de conteúdo misto de tela cheia é carregada por 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>

Experimente

As galerias de imagens com frequência dependem do atributo src da tag <img> para exibir imagens em miniatura na página, o atributo href da tag de âncora (<a>), em seguida, é usado para carregar a imagem de tela cheia para a sobreposição da galeria. Normalmente, as tags <a> não geram conteúdo misto, mas, neste caso, o código jQuery neutraliza o comportamento padrão do link — navegar para uma nova página — e carrega a imagem HTTP nesta página.

Conteúdo misto: A página foi carregada por HTTPS, mas solicitou uma imagem não confiável. Este conteúdo também deve ser fornecido por HTTPS.

Imagens não confiáveis prejudicam a segurança do seu site, mas não são tão perigosas quanto outros tipos de conteúdo misto. Os navegadores modernos ainda carregam imagens de conteúdo misto, mas também exibem advertências ao usuário.

Tipos de conteúdo misto e riscos à segurança associados

Os dois tipos de conteúdo misto são: o ativo e o passivo.

O conteúdo misto passivo refere-se ao conteúdo que não interage com o resto da página e, portanto, um ataque indireto é restringido em relação a o que podem fazer se interceptarem ou alterarem o conteúdo. O conteúdo misto passivo inclui imagens, vídeos e áudios, junto com outros recursos que não interagem com o resto da página.

O conteúdo misto ativo interage com a página como um todo e permite que um invasor faça praticamente o que quiser com ela. Conteúdo misto ativo inclui scripts, folhas de estilo, iframes, recursos em flash e outros códigos que o navegador pode baixar e executar.

Conteúdo misto passivo

O conteúdo misto passivo também representa uma ameaça à segurança do site e dos usuários. Por exemplo, um invasor pode interceptar solicitações HTTP de imagens do site e trocar ou substituí-las, pode inverter a imagem dos botões de salvar e apagar, fazendo com que os usuários excluam conteúdo equivocadamente, substitui os diagramas do seu produto por conteúdo pornográfico ou lascivo, distorcendo o seu site, ou até substitui as imagens do seu produto por anúncios de um site ou produto diferente.

Mesmo que o invasor não altere o conteúdo do site, você ainda terá um grande problema de privacidade, já que o invasor pode rastrear usuários usando solicitações de conteúdo misto. O invasor consegue determinar que páginas os usuários acessam e que produtos visualizam com base em imagens ou outros recursos que o navegador carrega.

Veja a seguir um exemplo de conteúdo misto passivo:

<!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="http://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>

Experimente

A maioria dos navegadores ainda renderiza este tipo de conteúdo misto ao usuário, no entanto, uma advertência também é exibida, uma vez que representa um risco à privacidade e à segurança do site e dos usuários.

Conteúdo misto: A página foi carregada por HTTPS, mas solicitou um vídeo não confiável. Este conteúdo também deve ser fornecido por HTTPS.
Advertências de conteúdo misto do console do JavaScript no Chrome.

Conteúdo misto ativo

O conteúdo misto ativo representa um maior risco em relação ao passivo. Um invasor pode interceptar e modificar o conteúdo ativo e, com isso, assumir controle total sobre a página ou até mesmo sobre todo o site. Isso permite que o invasor altere qualquer coisa na página, incluindo a exibição de conteúdo totalmente diferente, roubo de senhas do usuário ou outras credenciais de acesso, roubo de cookies da sessão do usuário ou redirecionamento do usuário para um site totalmente diferente.

Devido à gravidade dessa ameaça, muitos navegadores bloqueiam esse tipo de conteúdo por padrão para proteger os usuários, mas o funcionamento varia entre provedores e versões de navegador.

Veja a seguir alguns exemplos de conteúdo misto ativo:

<!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>

Experimente

Conteúdo misto: A página foi carregada por HTTPS, mas solicitou um recurso não confiável. Esta solicitação foi bloqueada. O conteúdo deve ser fornecido por HTTPS.
Erros de conteúdo misto do console do JavaScript no Chrome.

Comportamento do navegador com conteúdo misto

Devido às ameaças descritas acima, o ideal seria os navegadores bloquearem todo o conteúdo misto. No entanto, isto prejudicaria diversos sites que milhões de usuários usam e confiam todos os dias. O compromisso, no momento, é bloquear os tipos mais perigosos de conteúdo misto e permitir que tipos menos perigosos ainda possam ser solicitados.

Os navegadores modernos seguem as especificações de conteúdo misto, que definem as categorias de conteúdo opcionalmente bloqueável e conteúdo bloqueável.

De acordo com as especificações, os recursos se qualificam como conteúdo opcionalmente bloqueável "quando o risco de permitir seu uso como conteúdo misto é menor que o risco de prejudicar partes importantes da web". Este é um subconjunto da categoria conteúdo misto passivo descrita acima. No momento desta gravação, recursos de imagem, vídeo e áudio, assim como links pré-fornecidos são os únicos tipos de recurso incluídos em conteúdo opcionalmente bloqueável. Esta categoria provavelmente ficará menor com o tempo.

Todo conteúdo que não é opcionalmente bloqueável é considerado bloqueável e é bloqueado pelo navegador.

Versões do navegador

É importante lembrar que nem todo visitante do seu site usa os navegadores com a atualização mais recente. Cada versão de cada provedor de navegador se comporta de forma diferente com conteúdo misto. Na pior das hipóteses, alguns navegadores e versões não bloqueiam nenhum conteúdo misto, o que é muito prejudicial ao usuário.

O exato comportamento de cada navegador muda constantemente, por isso não incluiremos especificidades aqui. Se tiver interesse em saber como um navegador específico se comporta, busque informações publicadas diretamente pelo provedor.

Observação: seus usuários contam com você para mantê-los protegidos enquanto acessam seu site. É importante consertar os problemas de conteúdo misto para proteger todos os visitantes, incluindo os que usam navegadores antigos ou desatualizados.