はじめに
最近担当している対応で、外部サイトから読み込んだhtmlページを iframe 内で表示しようとしたときに、X-Frame-Options というレスポンスヘッダーが無いと読み込みができないという事象に出くわしました。
X-Frame-Options は今まで扱ったことがなかったため、後学のために理解も兼ねて調べてみました。
X-Frame-Options とは
X-Frame-Options - HTTP | MDN から引用します。
X-Frame-Options は HTTP のレスポンスヘッダーで、ブラウザーがページを <frame>, <iframe>, <embed>, <object> の中に表示することを許可するかどうかを示すために使用されます。
サイトはコンテンツが他のサイトに埋め込まれないよう保証することで、クリックジャッキング攻撃を防ぐために使用することができます。
クリックジャッキングと呼ばれる、悪意のある埋め込まれた外部サイトページ上のボタンをクリックすると、利用者に意図しない操作を実施させるといった行為を防ぐためのレスポンスヘッダーのようです。
Webサーバ側での設定
自サーバのコンテンツを他のサイトに埋め込まれないようにするために、X-Frame-Options のディレクティブという値で制限の度合いを指定することができます。
| ディレクティブ | 意味 |
|---|---|
deny |
自サイト、他サイトどちらも読み込み不可に |
sameorigin |
同じオリジンのサイトであれば読み込み可能 |
allow-from uri |
uri で指定したオリジンからであれば読み込み可能 |
X-Frame-Options の設定方法
いくつか紹介します。
Apache, nginx, IIS, HAProxy, Express の場合
以下ドキュメントにまとまっていますが、Webサーバの設定ファイルに、X-Frame-Options に関する設定を追加します。
例えば Apache であれば以下のような形です。
Header always set X-Frame-Options "sameorigin"
S3内のファイルの場合
S3 単体では X-Frame-Options ヘッダーを付けてレスポンスを返すことはできないようです。。
紹介されていたのは、CloudFront + S3 + Lambda@Edge という構成で、X-Frame-Options を付けてあげる方法です。
- Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront | Networking & Content Delivery
- Lambda@Edgeを使ってX-Frame-Optionsヘッダを追加してみた ｜ Developers.IO
おわりに
HTTP のヘッダー周りのことはまだまだ知識不足なので、継続して学習していこうと思います。