Webエンジニアだったら当然知っておきたい「 クリックジャッキング対策 」とは?

こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。

Backlogカードとは

Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます(※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました!」をご参照ください)。

backlogカード

Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<iframe>を使った課題プレビュー機能があり、それを拡張しようとしたためです。

backlogカード

上の図のように外部から埋め込まれるページ(この画像の緑色の部分)はクリックジャッキングに気をつける必要があります。

クリックジャッキングとは

クリックジャッキング(クリックジャック攻撃、Clickjacking、User Interface redress attack、UI redress attack、UI redressing)は、ウェブページの利用者に対し悪意をもって使用される技術の一種で、リンクやボタンなどの要素を隠蔽・偽装してクリックを誘い、利用者の意図しない動作をさせようとする手法である。
(参照元:https://ja.wikipedia.org/wiki/クリックジャッキング )

今回クリックジャッキングを説明するために、JSFiddleで簡単なデモを作ってみました。これをクリックジャッキング対策されていないWebサービスのアカウント削除のページとしましょう。

アカウントの削除ボタンが押されるとアカウントの削除処理(実際にはアカウントの削除リクエストをWebアプリケーションに送信)をしたあとに、「アカウントの削除が完了しました。」と表示されます。

次に悪意のあるサイトです。「ここをクリック!」ボタンを押してみてください。

アカウントの削除が完了しました。」と表示されたと思います。

悪意のあるサイトは一体何をやっているかというと、Webサービスのページを<iframe>で埋め込んでそれをopacity: 0で完全に透明にしています。さらに「ここをクリック!」ボタンをz-index: -1でアカウントの削除ボタンの裏側に配置しています。

つまり、ユーザーは「ここをクリック!」ボタンを押したつもりが、実際にはWebサービスのアカウントの削除ボタンを押すことになります。

このような方法で悪意のあるサイトは、ユーザーに意図しない動作を誘導することができてしまうのです。

対策 1. X-Frame-Optionsレスポンスヘッダーを設定する

外部から<iframe>で埋め込まれることを想定していないページに関してはX-Frame-Optionsレスポンスヘッダーを適切に設定しましょう。これにより外部からページが埋め込まれるのを制限することができます。

X-Frame-Optionsで指定できる値は以下のとおりです。

説明
DENY 表示を拒否する
SAMEORIGIN 同じドメイン内のみページの表示を許可する。
ALLOW-FROM uri  指定したURIのみページの表示を許可する。

現時点ではALLOW-FROMはブラウザ側の未サポートやバグがあり、あまり実用的ではありません。なので基本的にはDENYに設定し、どうしてもアプリ内でiframe表示したいときだけSAMEORIGINを使うと良いでしょう。

主要なサービスの設定は以下のようになっています。

サービス名 X-Frame-Options
Dropbox DENY
GitHub DENY
Facebook DENY
Slack SAMEORIGIN
Twitter SAMEORIGIN

それでは試しにBacklogの通常の課題ページと埋め込み用課題ページを<iframe>で表示してみます。

クリックジャッキング対策

埋め込み用課題ページは表示できましたが、通常の課題ページはX-Frame-Options: SAMEORIGINがついているので何も表示されませんね。

Google Chromeのデベロッパーツールで通常の課題ページのレスポンスヘッダーを見てみるとX-Frame-Options: SAMEORIGINがちゃんと付いているのがわかります。

クリックジャッキング対策

このように悪意のあるサイトは<iframe>で目的のページを呼び出すことができなくなるので、クリックジャッキングの防止に効果的です。

対策 2. iframeで埋め込み可能なページは更新処理を入れない

BacklogカードのようにすべてのWebサイトで埋め込み可能なことを前提としたページ(X-Frame-Optionsを指定しないページ)は、クリックジャッキングを避けるために更新系の処理をできないようにするべきです。そのためBacklogカードはコメントやスター等の機能は削除しています。

Twitterの埋め込みツイートの場合、フォローボタンを押すとこのようなページが別タブで開きます。

twitter-クリックジャッキング対策

このページが開いた時点ではまだフォロー処理はされておらず、ユーザーがページ内のフォローボタンを押すことでフォローが完了します。

なぜこのような一見回りくどい実装になっているかというと、埋め込みツイートから直接フォローできてしまうと、悪意のあるサイトがクリックジャッキングを利用して、ユーザーの知らないうちにアカウントをフォローさせることができてしまうからです。

では、なぜ別タブで開いたページからのフォローは大丈夫なのかというと、こちらのページはx-frame-options: SAMEORIGINが設定してあるのでTwitter以外からのページから呼び出すことができないのでクリックジャッキングの心配がないのです。

まとめ

  • 埋め込み可能なページは更新系の処理を入れないようにする
  • 更新系の処理はX-Frame-Optionsが設定してあるページで行う
  • 埋め込まれることを想定していないページはX-Frame-Optionsの値は基本DENY、どうしてもアプリ内でiframe表示したいときだけSAMEORIGINを使う

ヌーラボでは、サービスをユーザーのみなさんに安心して使っていただくために、開発だけでなくセキュリティーにも気を配れるエンジニアを募集しています

開発メンバー募集中

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる