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.

Apa yang Dimaksud Dengan Materi Campuran?

Materi campuran terjadi bila HTML pertama dimuat melalui koneksi HTTPS aman, namun sumber daya lainnya (seperti gambar, video, stylesheet, skrip) dimuat melalui koneksi HTTPS tidak aman. Ini disebut materi campuran karena materi HTTP maupun materi HTTPS dimuat untuk menampilkan laman yang sama, dan permintaan awal sudah aman melalui HTTPS. Browser modern menampilkan peringatan tentang tipe materi ini untuk menunjukkan kepada pengguna bahwa laman ini berisi sumber daya yang tidak aman.

TL;DR

  • HTTPS penting untuk melindungi situs maupun pengguna Anda dari serangan.
  • Materi campuran mengurangi keamanan dan pengalaman pengguna pada situs HTTPS Anda.

Permintaan sumber daya dan browser web

Bila browser mengunjungi sebuah laman situs web, ia akan meminta sumber daya HTML. Server web kemudian mengembalikan materi HTML, yang akan di-parse dan ditampilkan browser kepada pengguna. Sering kali, satu file HTML tidak cukup untuk menampilkan satu laman lengkap, sehingga file HTML menyertakan referensi ke sumber daya lain yang perlu diminta oleh browser. Sub-sumber daya ini bisa berupa gambar, video, HTML ekstra, CSS, atau JavaScript, yang masing-masing akan diambil menggunakan permintaan terpisah.

Manfaat HTTPS

Bila browser meminta sumber daya melalui HTTPS—singkatan dari HTTP Secure—ia akan menggunakan koneksi yang dienkripsi untuk berkomunikasi dengan server web.

Penggunaan HTTPS memiliki tiga manfaat utama:

  • Autentikasi
  • Integritas data
  • Kerahasiaan

Autentikasi

Apakah situs web yang saya masuki ini memang situs web yang asli?

HTTPS memungkinkan browser memeriksa apakah ia telah membuka situs web yang benar dan tidak dialihkan ke situs yang jahat. Saat mengunjungi situs web bank Anda, browser akan mengautentikasi situs web tersebut, untuk menghindari penyerang yang berpura-pura menjadi bank Anda dan mencuri kredensial proses masuk Anda.

Integritas data

Apakah ada orang yang mengutak-atik materi yang saya kirim atau terima?

HTTPS memungkinkan browser mendeteksi apakah penyerang telah mengubah data yang diterima browser. Saat mentransfer uang menggunakan situs web bank Anda, ini akan mencegah penyerang mengubah nomor rekening tujuan saat permintaan Anda sedang dikirim.

Kerahasiaan

Bisakah seseorang melihat materi yang sedang saya kirim atau terima?

HTTPS mencegah penyerang menyadap permintaan browser, melacak situs web yang dikunjungi, atau mencuri informasi yang dikirim atau diterima.

HTTPS, TLS, dan SSL

HTTPS singkatan dari HTTP Secure, Hyper(t)ext Transfer Protocol Secure. Bagian secure di sini berasal dari enkripsi yang ditambahkan ke permintaan yang dikirim dan diterima oleh browser. Saat ini hampir semua browser menggunakan protokol TLS untuk menyediakan enkripsi; TLS terkadang disebut SSL.

Detail HTTPS, TLS, dan SSL di luar cakupan artikel ini, namun jika Anda ingin mengetahui selengkapnya, sumber daya berikut merupakan tempat memulai yang tepat:

Materi campuran melemahkan HTTPS

Meminta sub-sumber daya menggunakan protokol HTTP tidak aman akan melemahkan keamanan keseluruhan laman, karena permintaan ini rawan terhadap man-in-the-middle attacks, karena penyerang menyadap koneksi jaringan dan melihat atau memodifikasi komunikasi di antara kedua pihak. Dengan sumber daya ini, penyerang sering kali bisa menguasai penuh suatu laman, bukan cuma sumber daya yang diretas.

Walaupun banyak browser melaporkan peringatan materi campuran kepada pengguna, pada saat ini terjadi, semua sudah terlambat: permintaan tidak aman sudah dilaksanakan dan keamanan laman sudah diretas. Sayangnya, skenario ini sangat umum di web, itu sebabnya browser tidak bisa sekadar memblokir semua permintaan campuran tanpa membatasi fungsionalitas banyak situs.

Materi Campuran: Laman telah dimuat melalui HTTPS, namun meminta gambar yang tidak aman. Materi ini seharusnya juga disajikan melalui HTTPS.
Semua terserah Anda, sebagai developer, untuk memperbaiki masalah materi campuran di aplikasi Anda.

Contoh sederhana

Memuat skrip tidak aman dari laman HTTPS.

Dengan menampilkan contoh laman ini melalui HTTPShttps://googlesamples.github.io/web-fundamentals/.../simple-example.html—menyertakan tag skrip HTTP yang berusaha memuat materi campuran.

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

Cobalah

Dalam contoh ini, skrip simple-example.js dimuat dengan URL HTTP. Inilah kasus paling sederhana dari materi campuran. Bila browser meminta file simple-example.js, penyerang bisa menyuntikkan kode ke dalam materi yang dikembalikan dan mengambil alih keseluruhan laman.

Untunglah, hampir semua browser modern memblokir tipe materi berbahaya ini secara default. Lihat perilaku browser dengan materi campuran.

Materi Campuran: Laman telah dimuat melalui HTTPS, namun meminta skrip yang tidak aman. Permintaan ini telah diblokir; materi harus disajikan melalui HTTPS.
Chrome memblokir skrip yang tidak aman.

Contoh XMLHttpRequest

Memuat data tidak aman dengan XMLHttpRequest.

Dengan menampilkan contoh laman ini melalui HTTPShttps://googlesamples.github.io/web-fundamentals/.../xmlhttprequest-example.html—menyertakan XMLHttpRequest melalui HTTP untuk mengambil data JSON materi campuran.

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

Cobalah

Di sini, HTTP URL dibuat secara dinamis dalam JavaScript, dan akhirnya digunakan oleh XMLHttpRequest untuk memuat sumber daya tidak aman. Seperti contoh sederhana di atas, bila browser meminta file xmlhttprequest-data.js, penyerang bisa menyuntikkan kode ke dalam materi yang dikembalikan dan mengambil alih keseluruhan laman.

Sebagian besar browser modern juga memblokir permintaan berbahaya ini.

Materi Campuran: Laman telah dimuat melalui HTTPS, namun meminta endpoint XMLHttpRequest yang tidak aman. Permintaan ini telah diblokir; materi harus disajikan melalui HTTPS.
Chrome memblokir XMLHttpRequest yang tidak aman.

Contoh galeri gambar

Memuat gambar tidak aman dengan lightbox jQuery.

Bila menampilkan contoh laman ini melalui HTTPShttps://googlesamples.github.io/web-fundamentals/.../image-gallery-example.html—mula-mula tidak memiliki masalah materi campuran; akan tetapi bila gambar kecil diklik, gambar materi campuran berukuran penuh akan dimuat melalui 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>

Cobalah

Galeri gambar sering kali mengandalkan tag <img> atribut src untuk menampilkan gambar kecil di laman, tag jangkar (<a>) atribut href kemudian digunakan untuk memuat gambar berukuran penuh untuk overlay galeri. Biasanya, tag <a> tidak menyebabkan materi campuran, namun dalam hal ini, kode jQuery menggantikan perilaku tautan default—untuk mengarahkan ke laman baru—dan sebagai ganti memuat gambar HTTP pada laman ini.

Materi Campuran: Laman telah dimuat melalui HTTPS, namun meminta gambar yang tidak aman. Materi ini seharusnya juga disajikan melalui HTTPS.

Gambar tidak aman mengurangi keamanan situs Anda, namun tidak sebahaya tipe materi campuran lainnya. Browser modern tetap memuat gambar materi campuran, namun juga menampilkan peringatan kepada pengguna.

Tipe materi campuran & ancaman keamanan berkaitan

Ada dua tipe materi campuran: aktif dan pasif.

Materi campuran pasif adalah materi yang tidak berinteraksi dengan bagian selebihnya pada laman, dan karenanya Man-in-the-Middle Attack terbatas pada apa yang bisa dilakukannya jika mereka menyadap atau mengubah materi itu. Materi campuran pasif meliputi gambar, video, dan materi audio, bersama sumber daya lain yang tidak bisa berinteraksi dengan bagian selebihnya pada laman.

Materi campuran aktif berinteraksi dengan laman secara keseluruhan dan memungkinkan penyerang melakukan hampir semua hal pada laman. Materi campuran aktif meliputi skrip, stylesheet, iframe, sumber daya flash, dan kode lainnya yang bisa diunduh dan dieksekusi oleh browser.

Materi campuran pasif

Materi campuran pasif tetap menimbulkan ancaman keamanan pada situs dan pengguna Anda. Misalnya, penyerang bisa menyadap permintaan HTTP untuk gambar pada situs Anda dan menukar atau mengganti gambar-gambar ini; penyerang bisa menukar gambar tombol simpan dan hapus, sehingga menyebabkan pengguna menghapus materi tanpa sengaja; mengganti diagram produk Anda dengan materi porno atau jorok, memalsukan situs Anda; atau mengganti gambar produk Anda dengan iklan untuk situs atau produk yang berbeda.

Walaupun penyerang tidak mengubah materi situs, Anda tetap memiliki masalah privasi yang besar karena penyerang bisa melacak pengguna dengan menggunakan permintaan materi campuran. Penyerang bisa tahu laman mana yang dikunjungi pengguna dan produk mana yang mereka lihat berdasarkan gambar atau sumber daya lain yang dimuat oleh browser.

Berikut ini adalah contoh materi campuran pasif:

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

Cobalah

Sebagian besar browser tetap merender tipe materi campuran ini pada pengguna, akan tetapi juga menampilkan peringatan karena ini menimbulkan risiko keamanan dan privasi pada situs dan pengguna Anda.

Materi Campuran: Laman telah dimuat melalui HTTPS, namun meminta video yang tidak aman. Materi ini seharusnya juga disajikan melalui HTTPS.
Peringatan materi campuran dari Konsol JavaScript Chrome.

Materi campuran aktif

Materi campuran aktif menimbulkan ancaman lebih besar daripada yang pasif. Penyerang bisa mencegat dan menulis ulang materi aktif yang akan mengambil alih sepenuhnya kontrol atas laman Anda atau bahkan seluruh situs web Anda. Ini memungkinkan penyerang mengubah apa saja pada laman, termasuk menampilkan materi yang berbeda sama sekali, mencuri kata sandi pengguna atau kredensial proses masuk lainnya, mencuri cookie sesi pengguna, atau mengalihkan pengguna ke situs yang sama sekali berbeda.

Karena gawatnya ancaman ini, banyak browser yang memblokir tipe materi ini secara default untuk melindungi pengguna, namun fungsionalitas berbeda-beda antar vendor dan versi browser.

Yang berikut ini berisi contoh materi campuran aktif:

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

Cobalah

Materi Campuran: Laman telah dimuat melalui HTTPS, namun meminta sumber daya yang tidak aman. Permintaan ini telah diblokir; materi harus disajikan melalui HTTPS.
Kesalahan materi campuran dari Konsol JavaScript Chrome.

Perilaku browser dengan materi campuran

Oleh karena ancaman yang dijelaskan di atas, maka idealnya browser memblokir semua materi campuran. Akan tetapi, ini akan mengganggu banyak sekali situs web yang dimanfaatkan jutaan pengguna setiap hari. Kompromi saat ini adalah memblokir hampir semua tipe materi campuran yang berbahaya, dan mengizinkan tipe yang kurang berbahaya untuk tetap diminta.

Browser modern mengikuti spesifikasi materi campuran, yang mendefinisikan kategori materi yang bisa diblokir secara opsional dan materi yang bisa diblokir.

Dari spesifikasi ini, sumber daya tergolong materi yang bisa diblokir secara opsional "bila risiko membiarkan penggunaannya sebagai materi campuran lebih penting daripada risiko melanggar bagian signifikan dari web"; inilah subset kategori materi campuran pasif yang dijelaskan di atas. Pada saat menulis artikel ini, sumber daya gambar, video, dan audio, serta tautan yang diambil lebih dini, adalah satu-satunya tipe sumber daya yang disertakan dalam materi yang bisa diblokir secara opsional. Kategori ini mungkin akan semakin kecil seiring waktu.

Semua materi yang tidak bisa diblokir secara opsional dianggap bisa diblokir, dan akan diblokir oleh browser.

Versi browser

Perlu diingat bahwa tidak setiap pengunjung situs web Anda menggunakan browser terbaru. Aneka versi dari aneka vendor browser masing-masing berperilaku berbeda dengan materi campuran. Yang terburuk, sebagian browser dan versi tidak memblokir materi campuran sama sekali, sehingga sangat tidak aman bagi pengguna.

Perilaku persis setiap browser terus berubah, sehingga kita tidak akan memasukkannya secara spesifik di sini. Jika Anda tertarik dengan cara perilaku browser spesifik, carilah informasi yang dipublikasikan oleh vendornya secara langsung.