【ITニュース解説】Full screen POC
2025年09月04日に「Dev.to」が公開したITニュース「Full screen POC」について初心者にもわかりやすいように丁寧に解説しています。
ITニュース概要
Webページをブラウザのフルスクリーンで表示させる技術を解説する記事。JavaScriptのAPIを活用し、画面全体にコンテンツを表示する仕組みを簡単なプログラムで試す方法を紹介する。
ITニュース解説
Webサイトを閲覧していると、動画プレーヤーや画像ギャラリーなどで、画面全体にコンテンツが広がる「フルスクリーン」表示に出会うことがある。このフルスクリーン表示は、ユーザーに没入感の高い体験を提供する技術であり、Webブラウザに標準で備わっている機能を利用して実現されている。Webブラウザは、特定のHTML要素を画面いっぱいに表示するための特別な機能、すなわちフルスクリーンAPIを提供している。
フルスクリーンAPIは、JavaScriptというプログラミング言語を使って操作する。具体的には、あるHTML要素、例えば動画プレーヤーの<div>要素や、ページ全体の<body>要素に対して、requestFullscreen()というメソッドを呼び出すことでフルスクリーン表示を開始できる。フルスクリーン表示を終了する際には、exitFullscreen()というメソッドを使う。現在どの要素がフルスクリーン表示されているかを知るには、document.fullscreenElementというプロパティを参照する。しかし、このフルスクリーンAPIには重要なセキュリティ上の制約がある。それは、ユーザーの明示的な操作（クリックやキーボード入力など）がなければフルスクリーン表示を開始できないという点だ。これは、悪意のあるWebサイトがユーザーの意図しないタイミングでフルスクリーン表示にし、ブラウザの操作を妨害したり、偽の表示でユーザーを騙したりするのを防ぐための仕組みである。
Webサイトを構築する際、時には別のWebページを現在のページの中に埋め込みたい場合がある。そのようなときに使うのが<iframe>（インラインフレーム）というHTML要素だ。<iframe>を使うと、例えば広告を表示したり、外部のサービスが提供するウィジェットを組み込んだり、あるいは自分のWebサイト内の異なるコンテンツを分けて表示したりできる。<iframe>は、その内部で完全に独立したWebページとして動作する。
この<iframe>の仕組みとフルスクリーンAPIを組み合わせようとすると、いくつか特有の課題に直面する。最も基本的な課題は、<iframe>の中に埋め込まれたコンテンツが、親となるWebページ（<iframe>自体を含むページ）の要素を直接フルスクリーン表示できないことだ。これはセキュリティ上の理由によるもので、埋め込みコンテンツが親ページの表示を勝手に操作できないようにするためである。もしこれが簡単にできてしまうと、悪意のある<iframe>がユーザーのWebブラウザ全体を乗っ取ったかのように見せかけることが可能になってしまう。
<iframe>内のコンテンツにフルスクリーン機能を使わせるためには、親ページ側で明示的な許可を与える必要がある。これには主に二つの方法がある。一つは、<iframe>要素にallowfullscreenという属性を追加する方法だ。この属性を設定すると、<iframe>内のコンテンツは自分自身をフルスクリーン表示することができるようになる。しかし、このallowfullscreenは少し古い属性であり、より新しい、そしてより柔軟な権限管理の仕組みとして「Permissions Policy（パーミッションポリシー）」という機能が導入された。これは<iframe>要素のallow属性を使って指定するもので、例えばallow="fullscreen"と記述することで、埋め込みフレームに対してフルスクリーン機能の使用を許可できる。このPermissions Policyは、フルスクリーン以外にも、マイクやカメラへのアクセス、位置情報取得など、さまざまなブラウザ機能の利用をきめ細かく制御できる点が特徴だ。
しかし、これらの属性を設定したとしても、<iframe>内のコンテンツが親ページの<body>要素など、<iframe>自身の外側にある要素を直接フルスクリーン表示できるわけではない。allowfullscreenやallow="fullscreen"は、あくまで「埋め込みフレーム自身がフルスクリーンになること」を許可するだけであり、「親フレームの特定の要素をフルスクリーンにすること」は許可しない。これが今回のニュース記事で検証されている核心的な問題点だ。
では、<iframe>の中から親ページの要素をフルスクリーン表示するにはどうすれば良いのだろうか。その解決策として登場するのが、postMessage（ポストメッセージ）というJavaScriptのAPIだ。postMessageは、異なる起源（ドメインやポートなど）を持つWebページ間、特に親フレームと<iframe>のような埋め込みフレーム間で安全にメッセージをやり取りするための標準的な方法である。
このpostMessageの仕組みを利用して、<iframe>内のコンテンツは親フレームに対して「特定の要素をフルスクリーンにしてほしい」というリクエストをメッセージとして送信する。親フレームは、そのメッセージを受け取ると、メッセージの内容を検証し、正当なリクエストであれば、自身のフルスクリーンAPI（requestFullscreen()）を呼び出して、要求された要素をフルスクリーン表示する。この際も、先述の通り、親フレームがフルスクリーンAPIを呼び出すタイミングで、ユーザー操作がトリガーとなっている必要がある。例えば、<iframe>内のボタンがクリックされたときにpostMessageを送信し、そのメッセージを受け取った親フレームがフルスクリーン化を実行する、という流れだ。このプロセスでは、メッセージが信頼できる送信元から送られてきたものかをevent.originプロパティなどを確認することで検証し、セキュリティを確保することが非常に重要になる。
今回のニュース記事の概念実証（POC）では、まさにこのシナリオが検証された。記事の筆者は、親ページと、その親ページに埋め込まれた<iframe>内のページを用意した。まず、<iframe>にallowfullscreenやallow="fullscreen"を設定するだけで、埋め込みページから親ページの<body>要素をフルスクリーンにできるかを試した。結果は、やはりできなかった。埋め込みページからrequestFullscreen()を呼び出すと、埋め込みページ自身がフルスクリーンになるか、あるいは何も起こらないかのどちらかであった。
次に、postMessageを使った通信を試した。<iframe>内のボタンがクリックされたときに、親フレームに対して「フルスクリーンにしてほしい」という内容のメッセージを送る。親フレームは、このメッセージを受け取ると、フルスクリーン表示のトリクエストを実行する、という仕組みを実装した。この方法であれば、無事に親フレームの特定の要素（例えば<body>）をフルスクリーン表示させることができたのだ。この成功の鍵は、フルスクリーン化を要求するメッセージの送信がユーザーのクリックによってトリガーされたことと、フルスクリーンAPIの実際の呼び出しが、権限を持つ親フレーム側で行われたことにある。
この検証結果からわかることは、Webのセキュリティモデルがいかに厳密に設計されているかということだ。単に権限を許可するだけでなく、実際に機能を使用する主体が誰であるか、そしてその操作がユーザーの明確な意思に基づいているか、という点が非常に重視されている。<iframe>のような強力な機能を使用する際には、そのセキュリティ上の制約を理解し、postMessageのような安全な通信手段を用いることが、安全で信頼性の高いWebアプリケーションを開発するための重要な要素となる。Web開発を進める上で、このようなブラウザの標準機能とセキュリティに関する知識は、システムエンジニアを目指す初心者にとって避けて通れない非常に重要な基礎知識だと言えるだろう。