混合コンテンツとは

最初の HTML が安全な HTTPS 接続で読み込まれ、その他のリソース(画像、動画、スタイルシート、スクリプトなど)が安全ではない HTTP 接続で読み込まれると、混合コンテンツが発生します。

これが混合コンテンツと呼ばれるのは、同じページを表示するために HTTP と HTTPS 両方のコンテンツが読み込まれているためで、最初のリクエストは HTTPS で保護されています。

最新のブラウザでは、この種のコンテンツに関する警告が表示され、このページに安全でないリソースが含まれていることがユーザーに示されます。

TL;DR

  • HTTPS は、サイトとユーザーの両方を攻撃から保護するために重要です。
  • 混合コンテンツは、HTTPS サイトのセキュリティとユーザー エクスペリエンスを低下させます。

リソース リクエストとウェブブラウザ

ブラウザがウェブサイト ページにアクセスすると、ブラウザは HTML リソースをリクエストします。これに対してウェブサーバーは HTML コンテンツを返し、ブラウザはこれを解析して、ユーザーに表示します。多くの場合、完全なページを表示するには単一の HTML ファイルでは不十分です。このため、HTML ファイルにはその他のリソースへの参照が含まれますが、これをブラウザがリクエストする必要があります。これらのサブリソースには、画像、動画、追加の HTML、CSS、JavaScript などがあり、それぞれ個別のリクエストを使用して取得されます。

HTTPS のメリット

ブラウザは HTTPS(HTTP Secure の略)でリソースをリクエストする場合、暗号化された接続を使用してウェブサーバーと通信します。

HTTPS を使用すると、主に次の 3 つのメリットがあります。

  • 認証
  • データの整合性
  • 秘密保護

認証

アクセスしているウェブサイトは、本当に相手が名乗っているとおりのウェブサイトでしょうか。

HTTPS を使用する場合、ブラウザは、正しいウェブサイトを開いており、悪意のあるサイトにリダイレクトされていないことを確認します。 銀行のウェブサイトにアクセスした場合、ブラウザはそのウェブサイトを認証し、攻撃者が銀行になりすましてログイン認証情報を盗むことを防ぎます。

データの整合性

送受信しているコンテンツをだれかが改ざんしていないでしょうか。

HTTPS を使用する場合、ブラウザは、受信したデータが攻撃者によって変更されている場合はこれを検出します。 これにより、銀行のウェブサイトを使って送金する場合に、リクエストの送信中に宛先の口座番号が攻撃者によって変更されることが防止されます。

秘密保護

送受信しているコンテンツを誰かに見られないでしょうか。

HTTPS によって、攻撃者は、ブラウザのリクエストを盗聴したり、アクセス先のウェブサイトを追跡したり、送受信された情報を盗んだりすることができなくなります。

HTTPS、TLS、および SSL

HTTPS は、HTTP Secure、つまり Hyper(t)ext Transfer Protocol Secure の略です。この secure(安全)の部分は、ブラウザによって送受信されるリクエストが暗号化されることを意味します。

現在、ほとんどのブラウザは TLS プロトコルを使用して暗号化を提供しています。TLS は SSL と呼ばれることもあります。

HTTPS、TLS、および SSL の詳細についてはこの記事では取り上げませんが、詳細を知りたい場合は、以下のリソースから始めるとよいでしょう。

混合コンテンツにより HTTPS の効果が弱まる

安全でない HTTP プロトコルを使用してサブリソースをリクエストすると、ページ全体のセキュリティが低下します。これは、このようなリクエストが man-in-the-middle 攻撃に対して脆弱であるためです。この攻撃では、攻撃者がネットワーク接続を盗聴して、2 人の関係者間の通信を表示または変更します。

多くの場合、攻撃者はこれらのリソースを使用することにより、侵害されたリソースだけでなく、ページ全体を制御できるようになります。

多くのブラウザでユーザーに混合コンテンツの警告が報告されますが、報告されたときには手遅れです。安全でないリクエストは既に実行され、ページのセキュリティが侵害されています。

このような状況は、残念なことにウェブでは非常によく見られます。この理由から、すべての混合リクエストを単にブロックすることはできません。ブロックすると多数のサイトの機能が制限されてしまいます。

混合コンテンツ:ページは HTTPS 経由で読み込まれましたが、安全でない画像がリクエストされました。このコンテンツも HTTPS 経由で提供する必要があります。
アプリケーションで混合コンテンツの問題を解決するかは、デベロッパーの判断に委ねられています。

単純な例

HTTPS ページから安全でないスクリプトを読み込みます。

このサンプルページを HTTPS— 経由で表示すると(https://googlesamples.github.io/web-fundamentals/.../simple-example.html—)、混合コンテンツを読み込もうとする 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>Simple mixed content example</title>
  </head>
  <body>
    <div role="main">
      <h1>
        Simple mixed content example!
      </h1>
      <p>
        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-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="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-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='//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>

サンプルを見る

この例では、スクリプト simple-example.jsHTTP URL で読み込まれます。これが混合コンテンツの最も単純な例です。ブラウザが simple-example.js ファイルをリクエストすると、攻撃者は返されたコンテンツにコードを注入して、ページ全体を制御できるようになります。

幸いなことに、ほとんどの最新ブラウザでは、この種の危険なコンテンツは既定でブロックされます。 混合コンテンツに対するブラウザの動作を参照してください。

混合コンテンツ:ページは HTTPS 経由で読み込まれましたが、安全でないスクリプトがリクエストされました。このリクエストはブロックされました。コンテンツは HTTPS 経由で提供する必要があります。
Chrome により安全でないスクリプトがブロックされます。

XMLHttpRequest の例

XMLHttpRequest で安全でないデータを読み込みます。

このサンプルページを HTTPS— 経由で表示すると([https://googlesamples.github.io/web-fundamentals/.../xmlhttprequest-example.html])、混合コンテンツの JSON データを取得する HTTP 経由の XMLHttpRequest が含まれています。

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

サンプルを見る

この場合、HTTP URL が JavaScript で動的に作成され、最終的に XMLHttpRequest によって安全でないリソースを読み込むために使用されます。 上記の単純な例のように、ブラウザが xmlhttprequest-data.js ファイルをリクエストすると、攻撃者は返されたコンテンツにコードを注入して、ページ全体を制御できるようになります。

ほとんどの最新ブラウザでは、このような危険なリクエストもブロックされます。

混合コンテンツ:ページは HTTPS 経由で読み込まれましたが、安全でない XMLHttpRequest エンドポイントがリクエストされました。このリクエストはブロックされました。コンテンツは HTTPS 経由で提供する必要があります。
Chrome により安全でない XMLHttpRequest がブロックされます。

画像ギャラリーの例

jQuery ライトボックスに安全でない画像を読み込みます。

このサンプルページを HTTPS— 経由で表示すると(https://googlesamples.github.io/web-fundamentals/.../image-gallery-example.html—)、最初は混合コンテンツの問題はありませんが、サムネイル画像がクリックされたときに、フルサイズの混合コンテンツの画像が 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>

サンプルを見る

画像ギャラリーでは一般に、<img> タグの src 属性を利用してページにサムネイル画像を表示し、ギャラリーにオーバーレイ表示するフルサイズの画像を読み込むためにはアンカー(<a>)タグの href 属性が使用されます。

通常は <a> タグによって混合コンテンツが生じることはありませんが、この場合は、jQuery コードによって新しいページに移動するという既定のリンク動作がオーバーライドされ、代わりにこのページに HTTP 画像が読み込まれます。

混合コンテンツ:ページは HTTPS 経由で読み込まれましたが、安全でない画像がリクエストされました。このコンテンツも HTTPS 経由で提供する必要があります。

安全でない画像はサイトのセキュリティを低下させますが、その他の種類の混合コンテンツほど危険ではありません。 最新ブラウザでは混合コンテンツの画像は引き続き読み込まれますが、ユーザーへの警告も表示されます。

混合コンテンツの種類と関連するセキュリティ上の脅威

混合コンテンツには、アクティブとパッシブの 2 種類があります。

パッシブな混合コンテンツとは、ページの残りの部分と対話しないコンテンツのことです。そのため man-in-the-middle 攻撃は、攻撃者がそのコンテンツを傍受または変更した場合に実行できる操作に限定されます。

パッシブな混合コンテンツには、画像、動画、音声コンテンツと、ページの残りの部分と対話できないその他のリソースが含まれます。

アクティブな混合コンテンツは、ページ全体に関係するため、攻撃者はそのページに対してほぼあらゆる操作を実行できます。 アクティブな混合コンテンツには、スクリプト、スタイルシート、iframe、Flash リソースと、ブラウザがダウンロードして実行できるその他のコードが含まれます。

パッシブな混合コンテンツ

パッシブな混合コンテンツであっても、サイトとそのユーザーにセキュリティ上の脅威をもたらします。 たとえば、攻撃者はサイトの画像に対する 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>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/symphony-5-beethoven.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://developers.google.com/web/fundamentals/design-and-ui/media/video/video/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>

サンプルを見る

ほとんどのブラウザでは、まだこの種の混合コンテンツがユーザーに表示されますが、これによってサイトとユーザーにセキュリティとプライバシーのリスクが生じるため、警告も表示されます。

混合コンテンツ:ページは HTTPS 経由で読み込まれましたが、安全でない動画がリクエストされました。このコンテンツも HTTPS 経由で提供する必要があります。
Chrome JavaScript コンソールからの混合コンテンツの警告。

アクティブな混合コンテンツ

アクティブな混合コンテンツは、パッシブな混合コンテンツより大きな脅威をもたらします。攻撃者はアクティブなコンテンツを傍受して書き換えることができるため、ページや場合によってはウェブサイト全体を完全に制御できるようになります。

これにより攻撃者は、ページに関するあらゆるものを変更できます。たとえば、まったく異なるコンテンツを表示したり、ユーザーのパスワードやその他のログイン認証情報を盗んだり、ユーザーのセッション Cookie を盗んだり、ユーザーをまったく異なるサイトにリダイレクトしたりすることができます。

この脅威の深刻さから、多くのブラウザがユーザーを保護するためにこの種のコンテンツを既定でブロックしていますが、その機能はブラウザのベンダーとバージョンによって異なります。

以下に、アクティブな混合コンテンツの例を示します。

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

サンプルを見る

混合コンテンツ:ページは HTTPS 経由で読み込まれましたが、安全でないリソースがリクエストされました。このリクエストはブロックされました。コンテンツは HTTPS 経由で提供する必要があります。
Chrome JavaScript コンソールからの混合コンテンツのエラー。

混合コンテンツに対するブラウザの動作

前述した脅威があるため、ブラウザですべての混合コンテンツをブロックすることが理想的です。 ただし、そうすると、何百万人ものユーザーが毎日利用している多数のウェブサイトが台無しになってしまいます。 現時点の妥協点は、最も危険な種類の混合コンテンツをブロックし、危険性が少ないものについては引き続きリクエストを許可するというものです。

最新のブラウザは、混合コンテンツの仕様に従っています。この仕様では、任意でブロック可能なコンテンツブロック可能なコンテンツのカテゴリが定義されています。

仕様から、リソースが任意でブロック可能なコンテンツと見なされるのは、「混合コンテンツとしての使用を許可するリスクよりも、ウェブの大部分が損なわれるリスクの方が大きい場合」です。これは、前述したパッシブな混合コンテンツ カテゴリのサブセットです。

この記事の執筆時には、画像、動画、音声リソースとプリフェッチされたリンクのみが、任意でブロック可能なコンテンツに含まれるリソースの種類です。

このカテゴリは、時間の経過とともに縮小すると考えられます。

任意でブロック可能でないすべてのコンテンツはブロック可能であると見なされ、ブラウザによりブロックされます。

ブラウザのバージョン

ウェブサイトにアクセスするすべてのユーザーが最新のブラウザ使用しているとは限らないと認識しておくことが重要です。 ブラウザ ベンダーやバージョンごとに、混合コンテンツに対する動作がそれぞれ異なっています。 混合コンテンツをまったくブロックないブラウザとバージョンもあります。これはユーザーにとって非常に危険です。

各ブラウザの具体的な動作は絶えず変化しているので、ここでは詳細に説明しません。 特定のブラウザの動作を知りたい場合は、そのベンダーが公開している情報を直接ご覧ください。

注: ウェブサイトにアクセスする際、ユーザーは、サイトの運営者による保護を期待しています。古いブラウザを使用しているユーザーも含め、すべての訪問者を保護するためには、混合コンテンツの問題を解決することが重要です。