はじめに
先日仕事でセキュリティに関する内容の仕事をしていたがそれまでクリックジャッキングって〜フィシングサイトって〜みたいな概念的な物しか把握してなかったので調べました。
もっと具体的に〜があって〜が問題で、だからこの設定が必要である。というもうちょっと掘り下げた内容を備忘録として残していきたいと思います。
X-Frame-Optionsって？
ドキュメントより
HTTP のレスポンスヘッダーで、ブラウザーがページを frame, iframe, embed, object の中に表示することを許可するかどうかを示すために使用されます。サイトはコンテンツ>が他のサイトに埋め込まれないよう保証することで、クリックジャッキング攻撃を防ぐために使用することができます。
つまりは他所のページやコンテンツを自分のページに挿入することができる。(HTML５でframeタグは廃止されています)
これで何が問題かというと、HTMLの仕組み上ページやオブジェクトを透過(opacity: 0;)させて重ねる(positionやz-indexなど)ことができる。
そのためURLは違えど見た目は全く同じなサイトをつくりだすことや、
見た目は違うがその機能が間接的に操作できるページを作ることができ、フィッシングサイトへ誘導したりクリックジャックなどのページができあがってしまう。
挿入していドメインなどを限定して許可または全て拒否するなどの対応ををすることでそれを回避する必要がある。
X-Frame-Options
ドキュメント
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options
基本的にはこのふたつが設定できる
・DENY
これを設定されたサイトは他サイトの全てにおいてページにコンテンツを表示(挿入)することができない
・SAMEORIGIN
これを設定されたサイトは他サイトでオリジンが同じ場合のみ許可(つまりオリジンが違うとifraneでページを挿入することができない)
実際にやってみている方もいるようなので試したい方はそちらを参照してください
https://qiita.com/mejileben/items/39d897757d5c3a904721
X-Frame-Optionsを使いたいが
ただし注意すべき点として自社サイトで複数のオリジンをもっていてそれを表示されたい場合があったとします。
この場合X-Frame-Optionsを使うと他のオリジンに対してiframeなどで表示ができないようになってしまいます。
例
https://sample.com にて設定
https://sample.jp で sample.comのコンテンツをiframeしたい場合
これについては「Content-Security-Policy」を代替手段として活用することができます。
参考URL
https://qiita.com/michiru-miyagawa/items/09b8c38beeb8d596992b