object から iframe へ — その他の埋め込み技術

今では、画像、動画、音声など、Webページに埋め込むものが本当に必要です。ここでは、<iframe> 要素、<embed> 要素、<object> 要素のような幅広い種類のコンテンツをWebページに埋め込むことができる要素をいくつか見ていきたいと考えています。<iframe> は他のWebページを埋め込むためのもので、他の2つは PDF、SVG、さらに Flash を埋め込むことができます — 出口にある技術ですが、まだ半定期的に見かけるでしょう。

埋め込みの短い歴史

昔、Web 上では、フレームを使って Web サイトを作るのが一般的でした - Web サイトの小さな部分が個々の HTML ページに保存されていました。これらは、フレームセットと呼ばれるマスタードキュメントに埋め込まれていました。これにより、テーブルの列と行のサイジングのように、各フレームが埋めた画面上の領域を指定することができました。これらは90年代半ばから後半にかけてのクールさの極みと考えられていました。このような小さな塊に分割されたWebページを持っているとダウンロード速度が向上したという証拠がありました — 特にネットワーク接続が非常に遅いため、特に顕著です。それらは多くの問題を抱えていましたが、ネットワーク速度がより速くなるにつれて、これ以上の利点はなく、あなたはそれらがもう使用されているのを見ていません。

ちょっと後で(90年代後半、2000年代初頭)、Java アプレットや Flash などのプラグイン技術が普及しました。これにより、Web開発者は動画やアニメーションなどのWebページに豊富なコンテンツを埋め込むことができました。これらの技術を埋め込むことは、<object> や、あまり使われていない <embed> などの要素によって実現され、当時は非常に便利でした。アクセシビリティ、セキュリティ、ファイルサイズなど、多くの問題が発生して以来、それらは流行していませんでした。最近のモバイルデバイスのほとんどは、このようなプラグインをサポートしておらず、デスクトップのサポートは出口にあります。

最後に、<iframe> 要素が現れました(<canvas>、<video> などのコンテンツを埋め込む他の方法と一緒に)。これは、Webドキュメント全体を別のWebドキュメントに埋め込む方法を提供し、あたかも <img> か他の要素であるかのように、今日では普通に使用されています。

歴史の授業を終了して、これらのいくつかの使い方を見てみましょう。

能動的学習: 従来の埋め込みを使う

この記事では、能動的学習セクションにまっすぐ飛び込んで、埋め込み技術が有用であるかどうかをすぐに知ることができます。オンラインの世界では Youtube はとてもよく知られていますが、多くの人は利用可能な共有施設については知らないのです。YouTube が <iframe> を使って好きなページに動画を埋め込むことができる仕組みを見てみましょう。

1. まず、Youtube へ行き、あなたが好きな動画を見つけてください。
2. 動画の下に [共有] ボタンがあります。これを選択すると、共有オプションが表示されます。
3. [埋め込む] ボタンを選択すると、<iframe> コードがいくつか表示されます。これをコピーします。
4. 下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。

ボーナスポイントとして、例の中に Google マップを埋め込むこともできます。

1. Google マップへ行き、好きな地図を見つけます。
2. UI の左上にあるハンバーガーメニュー(3本の水平線)をクリックします。
3. [地図を共有または埋め込む] オプションを選択します。
4. [地図を埋め込む] オプションを選択します。これは、<iframe> コードをいくつか提供します。これをコピーします。
5. 下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。

間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生したら、[Show solution] ボタンを押して回答を見てください。

<h2>Live output</h2>

<div class="output" style="min-height: 250px;">
</div>

<h2>Editable code</h2>
<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>

<textarea id="code" class="input" style="width: 95%;min-height: 100px;">
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

iframe の詳細

それは簡単で楽しいものでしたか?  <iframe> 要素は、他の Web ドキュメントを現在のドキュメントに埋め込むことができるように設計されています。これは、直接制御できない可能性のある第三者のコンテンツをWebサイトに組み込むのに適していて、独自のバージョンを実装する必要はありません — オンライン動画プロバイダの動画、Disqus のようなコメントシステム、オンライン地図プロバイダの地図、広告バナーなど。このコースで使用しているライブ編集可能な例は、<iframe> を使用して実装されています。

<iframe> で検討すべきセキュリティ上の懸念がいくつかあり、これについては以下で説明しますが、あなたのWebサイトで使用しないでください — ちょっとした知識と慎重な考えが必要です。コードを少し詳しく見てみましょう。あなたのWebページの1つに MDN の用語集を含めることを考えていたら、次のようなことを試すことができます。

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    iframe をサポートしていないブラウザのための代替リンク
  </a> </p>
</iframe>

この例には、<iframe> の使用に必要な基本的な要素が含まれています。

allowfullscreen

設定されている場合、<iframe> は、 Full Screen API を使用してフルスクリーンモードにすることができます(この記事の範囲外です)。

frameborder

1 に設定すると、これはブラウザにこのフレームと他のフレームとの境界を描画するように指示します。これはデフォルトの動作です。0 は境界を取り去ります。CSS で border: none; を使用すると、同じ効果がより良く達成できるので、この属性を使用することはもうお勧めできません。

src

この属性は、<video> や <img> と同様に、埋め込むドキュメントの URL を指すパスを含んでいます。

width と height

これらの属性は、iframe の幅と高さを指定します。

代替コンテンツ

<video> のような他の要素と同じように、 <iframe> と </iframe> のタグの間に、ブラウザが <iframe> をサポートしていない場合に表示される代替コンテンツを含めることができます。この場合、代わりにページへのリンクが含まれています。最近では、<iframe> をサポートしていないブラウザを見つけることはまずありません。

sandbox

この属性は、他の <iframe> の機能よりも若干現代的なブラウザ(たとえば、IE 10 以上)で機能し、高度なセキュリティ設定を要求します。これについては、次のセクションで詳しく説明します。

セキュリティ上の懸念

上ではセキュリティ上の懸念について言及しました。これについてもう少し詳しく説明しましょう。あなたはこのコンテンツのすべてを初めから完全に理解することを期待していません。この懸念を認識して、より経験豊かになり、あなたの実験や作業で <iframe> の使用を検討し始める参考にしてください。また、恐怖を感じ、<iframe> を使わない必要はありません — 注意するだけです。

ブラウザメーカーやWeb開発者は、iframe がWeb上の悪意ある人物(しばしばハッカー、またはより正確にはクラッカーと呼ばれます)の共通のターゲット(公式の用語: 攻撃ベクター)であるということを苦労して学びました。悪意ある人物は、あなたのWebページを悪意を持って改ざんすることや、ユーザ名やパスワードなどの機密情報を明らかにするなど、人を騙し望んでいないことを行います。このため、仕様技術者とブラウザ開発者は、<iframe> をより安全にするためのさまざまなセキュリティ・メカニズムを開発しました。また、考慮すべき最善の措置もあります — これらのいくつかを以下で説明します。

簡単な例ですが、先ほど紹介した例をブラウザに読み込んでみましょう。Github にライブが公開されています(ソースコードも参照してください)。実際にページに何も表示されませんが、ブラウザの開発者ツールのコンソールに、理由を示すメッセージが表示されます。Firefox では、"Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing." (X-Frame-Optionsによって読み込みが拒否されました: https://developer.mozilla.org/en-US/docs/Glossary はフレーミングを許可していません。)というメッセージが表示されます。これは、MDN を作成した開発者が、<iframe> 内に埋め込まれないようにWebサイトのページを提供する設定をサーバーに組み込んだためです(下記の CSP ディレクティブの設定を参照してください)。これは、理にかなっています — あなたのサイトにそれらを埋め込んであなた自身のものと主張するようなことをしない限り、MDN のページ全体が他のページに埋め込まれるのは本当に意味がありません — または、クリックジャッキングを介してデータを盗み出そうとする。どちらも本当に悪いことです。さらに、誰もがこれをやり始めたら、すべての追加の帯域幅が Mozilla に多額の費用をかけるようになります。

必要なときにのみ埋め込みます

場合によっては、第三者のコンテンツを埋め込むことが理にかなっています — youtube 動画や地図のようなものですが、完全に必要なときに第三者のコンテンツだけを埋め込むのであれば、頭を悩ますことはありません。Webセキュリティのための良い経験則は、「慎重すぎることは決してありません。もしあなたがそれを作ったら、とにかくそれをもう一度チェックしてください。他の誰かがそれを作ったら、そうでないと証明されるまでそれは危険です。」ということです。

HTTPS を使用する

HTTPS は HTTP の暗号化されたバージョンです。可能であれば、HTTPS を使用してWebサイトを提供する必要があります。

1. HTTPS を使用すると、転送中にリモートコンテンツが改ざんされる可能性が減り、
2. HTTPS は、埋め込みコンテンツが親ドキュメント内のコンテンツにアクセスすることを防止し、逆も同様です。

HTTPS を使用するには、高価なセキュリティ証明書が必要です(ただし、Let's Encrypt で簡単にできます) — 入手できない場合は、親ドキュメントを HTTP で配信できます。しかし、上記の HTTPS の2つ目の利点のため、コストにかかわらず、第三者のコンテンツを HTTP に埋め込むことは絶対にしないでください(最良の場合のシナリオでは、ユーザのWebブラウザは恐ろしい警告を表示します)。<iframe> を使用してコンテンツを埋め込むことができる評判の良い企業はすべて、HTTPS 経由で利用できるようになります — たとえば、Google マップや YouTube からコンテンツを埋め込む場合は、<iframe> の src 属性内の URL を調べます。

常に sandbox 属性を使用する

攻撃者には、あなたのWebサイトで悪いことを行うことができるような力を与えたくないので、埋め込みコンテンツには、その仕事を行うために必要な権限のみを与えるべきです。もちろん、これは自分のコンテンツにも当てはまります。適切に(またはテスト用に)使用できるが、コードベースの残りの部分に何らかの害(偶発的または悪意のある)を及ぼすことができないコード用のコンテナは、サンドボックスと呼ばれます。

サンドボックスにないコンテンツはあまりにも多くのことを行うことができます( JavaScript の実行、フォームの送信、ポップアップウィンドウなど)。デフォルトでは、前述の例に示すように、パラメーターなしの sandbox 属性を使用して、使用可能なすべての制限を課す必要があります。

絶対に必要な場合は、権限を1つずつ追加することができます(sandbox="" 属性値内に) — 使用可能なすべてのオプションについては、sandbox のリファレンスのエントリを参照してください。重要な注意点の1つは、 sandbox 属性に allow-scripts と allow-same-origin の両方を追加しないことです。この場合、埋め込みコンテンツは、サイトのスクリプトの実行を停止する同一オリジン・セキュリティポリシーをバイパスし、JavaScript を使用してサンドボックスを完全に無効にします。

CSP ディレクティブの設定

CSP はコンテンツセキュリティポリシーの略で、HTML ドキュメントのセキュリティを強化するために設計された一連の HTTP ヘッダー(Webサーバーから配信されたときにWebページとともに送信されるメタデータ)を提供します。<iframe> を保護する場合、適切な X-Frame-Options ヘッダーを送信するようにサーバーを構成できます。これにより、他のWebサイトがそのWebページにあなたのコンテンツを埋め込むのを防ぐことができます(クリックジャッキングや他の攻撃のホストを可能にする)。以前に見たように、これはまさに MDN 開発者が行ったことです。

<embed> 要素と <object> 要素

<embed> 要素と <object> 要素は、<iframe> とは異なる機能を果たします。これらの要素は、Java アプレットや Flash などのプラグイン技術、PDF(ブラウザで PDF プラグインを使用して表示できる)、動画、SVG、画像などのコンテンツを含む、複数のタイプの外部コンテンツを埋め込む汎用埋め込みツールです!

しかし、あなたはこれらの要素を大いに利用することはまずありません。アプレットは何年も使われておらず、Flash は多くの理由から人気がなくなりました(下記のプラグインに対するケースを参照)。PDF は埋め込まれたものよりもリンクされている傾向があり、画像や動画などの他のコンテンツには、それらを扱うためのずっと優れた、より簡単な要素があります。プラグインとこれらの埋め込み方法は、従来の技術ですが、イントラネットやエンタープライズプロジェクトのような特定の状況でそれらを見かけた場合に備えて言及しています。

プラグインのコンテンツを埋め込む必要がある場合の最低限必要な情報です。

次に、<embed> 要素を使用して Flash ムービーを埋め込む例を示します(Github でライブを見て、ソースコードも確認してください)。

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

かなり恐ろしいですね。Adobe Flash ツールで生成された HTML は、<embed> 要素が埋め込まれた <object> 要素を使用して、すべてのベースをカバーするために悪化する傾向がありました(例を参照してください)。Flash は、HTML5 動画の代替コンテンツとしても使用されていましたが、これは必要ではないと見られています。

次に、PDF をページに埋め込む <object> の例を見てみましょう(ライブのサンプルとソースコードを参照)。

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>PDF プラグインはありませんが、<a href="myfile.pdf">PDF ファイルをダウンロードできます。</a></p>
</object>

PDF は紙とデジタルの間の必要な足がかりでしたが、多くのアクセシビリティ上の課題(英語)があり、小さな画面では読みにくい場合があります。それらはまだいくつかのサークルで人気がある傾向がありますが、Webページに埋め込むのではなく、ダウンロードしたり、別のページで読むことができるように、リンクする方がはるかに優れています。

プラグインに対するケース

かつて、プラグインはWeb上で不可欠でした。映画をオンラインで見るために Adobe Flash Player をインストールしなければならない時代を覚えていますか?  そして、常に Flash Player と Java Runtime Environment のアップデートに関する迷惑な警告を受けていました。Web技術はこれまでより堅牢に成長し、その時代は終わりを告げています。ほとんどのアプリケーションでは、プラグインに依存するコンテンツの配信をやめ、代わりにWebテクノロジを活用し始めてください。

• すべての人にあなたの手を広げる。誰もがブラウザを持っていますが、プラグインはますます稀になっています(特にモバイルユーザの場合)。Webはプラグインなしで大部分が使えるので、プラグインをインストールするよりもむしろ競争相手のWebサイトに行くだけです。
• Flash や他のプラグインに付属している余分なアクセシビリティの頭痛(英語)から逃れてください。
• さらなるセキュリティ上の危険から逃れてください。無数のパッチの後でさえ、Adobe Flash は安全ではないことが知られています(英語)。Facebook の最高セキュリティ責任者である Alex Stamos は、2015年に Adobe が Flash を打ち切るよう依頼しました(英語)。

だから何をすべきか?  双方向性が必要な場合、HTML と JavaScript は、Java アプレットや旧式の ActiveX/BHO 技術を必要とせずに、簡単に仕事を完了させることができます。Adobe Flash に頼る代わりに、メディアの要求に合わせて HTML5 動画、ベクターグラフィックスに SVG、複雑な画像やアニメーションに Canvas を使用することができます。Peter Elst は、数年前にすでに、Adobe Flash が特殊なゲームやビジネスアプリケーションを除いて、仕事のための適切なツールではないことを書いていました(英語)。ActiveX に関しては、Microsoft の Edge ブラウザでさえサポートされなくなりました。

まとめ

Web ドキュメントに他のコンテンツを埋め込むという話題は、すぐに非常に複雑になる可能性があるので、関連する技術のより高度な機能のいくつかを示唆しながらも、すぐに関連すると思われる単純で使い慣れた方法で紹介しようとしました。まず、あなたのページに地図や動画などの第三者のコンテンツを含めること以外に埋め込みを使用する可能性は低いです。しかし、経験が増すにつれて、より多くの用途を見つけることになるでしょう。

ここで説明したもの以外にも、外部コンテンツの埋め込みを含む他の多くの技術があります。以前の記事では <video>、<audio>、<img> などいくつかを見ましたが、JavaScript で生成された 2D および 3D グラフィックスの場合は <canvas>、ベクターグラフィックスを埋め込む場合は <svg> など、他にも見い出されるものがあります。モジュールの次の記事では SVG を見ていきます。

このモジュール

• HTML の画像
• 動画と音声のコンテンツ
• <object> から <iframe> へ — その他の埋め込み技術
• Web にベクターグラフィックスを追加する
• レスポンシブ画像
• Mozilla のスプラッシュページ