こんばんは！
いきなりですが、「クリックジャッキングとその対策」について調べた件の纏めになります。
セキュリティについて興味を持ち始めた今日この頃
本日も最後まで是非お付き合いください！
クリックジャッキング とは何か
クリックジャッキングとは、ユーザーを騙して、ユーザーが思っているものとは別のリンクやボタンなどをクリックさせることです
引用元：mdn web docs
簡単に図を書いてみました！
図にも書いてありますが、何が起きているのかを文章で見ていきましょう
① あなたが作成したサイトがあると仮定します
② 悪意のあるユーザーが罠サイトを用意します
ここでは、iFrameを用いて、罠サイトの上にあなたのサイトを表示させています
④ 騙すためのボタンを、あなたのサイトのボタンに重ねます（z-indexなどを用いる）
⑤ 罠サイト側はCSSを操作して、透明にしておきます
これで準備は完了しました
一般ユーザーには見た目上「あなたのサイト」を操作している様に見えています
しかし、x-indexで最上段に配置されている透明な罠ボタンをクリックしてしまうので、被害に繋がる訳です
この攻撃により
・SNSで誰かをフォローしてしまう
・SNSで自信の意図していない記事をシェアしてしまう
・ウイルスに感染
・勝手に商品の購入
などの被害を受けることが考えられています
非常に恐ろしい攻撃ですね...
実は、TwitterやFacebookでもこの被害事例があります
サーバーサイドエンジニアとして対策するべきだ！！
でも難しそう...と思いますが、実はとても簡単に対策ができます
まずどんなことをするか、ざっくりイメージを持ってください
今の問題は 「外部サイトがあなたのサイトをiFrameで表示させていること」 です
これを防げればクリックジャッキングは起こせません。
ちょっとだけ言葉を変えますと...
外部サイトがiFrameを使ってあなたのサイトを表示させない
ようにすれば良いわけです
それはHTTPレスポンスヘッダーに設定すれば可能です
通常はApacheやNginxで設定すると思います
今回はNginxでの対策をしていきますので、一つずつ見ていきましょう
対策方法① X-Frame-Optionsヘッダーを用いる方法
伝統的ですが、現役で有効な対策です
これは、「ブラウザがページを<iframe>などのタグの中に表示しても良いか」を指定するものです
nginxで指定する場合は下記の様に記述します
add_header X-Frame-Options "SAMEORIGIN";
# 又は
add_header X-Frame-Options "DENY";
SAMEORIGIN：同じオリジンであれば許可する
DENY：拒否
これで対策は完了です。
もし、「このサイトだけは許可したいんだよね」という要件があった場合は
add_header X-Frame-Options "ALLOW-FROM https://hogefuga.co.jp";
この様に記述する方法もありますが...
下記サイトの通り、ALLOW-FROMは最近のブラウザでは動作しませんので非推奨です。
ご注意ください
対策方法② Content-Sequrity-Policyヘッダーを用いる方法
Content-Security-Policyのレスポンスヘッダーの中で、frame-ancestorsディレクティブを用いる事で同じ様な設定が可能になります。
こちらは「どの親を許可しますか？」というホワイトリスト登録をするディレクティブなんだな、というイメージをお持ちになればわかりやすいかと思います。
実際にnginxで記載した例が以下の通りになります
add_header content-security-policy: "frame-ancestors https://hogefuga.co.jp;";
これは「https://hogefuga.co.jp」から自作のサイトをiframeを用いて表示することを許可する
という意味になります。
下記の通りカスタマイズして設定していきましょう！
# 複数登録したい時はスペース区切りで登録ができます
add_header content-security-policy: "frame-ancestors https://hoge.com https://foge.com;";
# SAMEORIGINの設定がしたい時は'self'を指定します
add_header content-security-policy: "frame-ancestors 'self';";
# 登録したくない（拒否したい）時は'none'を指定します
add_header content-security-policy: "frame-ancestors 'none';";
一見Content-Sequrity-Policyの方が優れているんだしこれでいいじゃないか！！
と思えてしまいますが、こちらは古いブラウザで対応していない場合があります
先ほどと同様に下記サイトから対応ブラウザの確認をしておきましょう
以上です
クリックジャッキングの対策は簡単にできますので、是非無碍にせず対策をしてくださいね！
参考文献
アルサーガパートナーズ株式会社のエンジニアによるテックブログです。11月14（木）20時〜 エンジニア向けセミナーを開催！詳細とご応募は👉️ arsaga.jp/news/pressrelease-cheer-up-project-november-20241114/
Discussion