Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

X-Frame-Options について簡単に調べてみた

はじめに

最近担当している対応で、外部サイトから読み込んだ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 に関する設定を追加します。

X-Frame-Options - HTTP | MDN

例えば Apache であれば以下のような形です。

Header always set X-Frame-Options "sameorigin"

S3内のファイルの場合

S3 単体では X-Frame-Options ヘッダーを付けてレスポンスを返すことはできないようです。。

紹介されていたのは、CloudFront + S3 + Lambda@Edge という構成で、X-Frame-Options を付けてあげる方法です。

おわりに

HTTP のヘッダー周りのことはまだまだ知識不足なので、継続して学習していこうと思います。

参考

sonicgarden
「お客様に無駄遣いをさせない受託開発」と「習慣を変えるソフトウェアのサービス」に取り組んでいるソフトウェア企業
http://www.sonicgarden.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away