こんにちは。普段使っているウェブサイトやメールなどの仕組みをもっと分かるようになりたい福田です。
このたび、会社のセキュリティ対策の一環として、iframe要素からこのウェブサイトを読み込むことができないようにしました。
私はこういった内容に詳しくないのですが、良い勉強の機会だと思って詳しい人に教えてもらいながらやってみました。
このウェブサイトの公開にはApacheを使っているので、.htaccessファイルを使って設定を行いました。
この記事では、私のようにこういった内容に興味はあるけれど詳しくない、という人向けに今回行った内容を紹介します。
iframeを使ってみる
クリックジャッキング攻撃をイメージするためにも、まずはiframeを使ってみましょう。
次のようなhtmlファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<iframe src="https://www.clear-code.com"></iframe>
</body>
</html>
body以外はスニペットです。適当にhtmlの体裁を整えればいいです。
bodyにiframeを足しています。
src="https://www.clear-code.com"とすることで、iframeにこのウェブサイトを読み込ませています。
このファイルをブラウザーで開くと、動作を確認することができます。 既定のアプリで開くコマンドが便利です。
Ubuntu
$ xdg-open hoge.html
Windows PowerShell
// iiコマンドはInvoke-Itemコマンドの標準のエイリアスです
$ ii hoge.html
macOS
$ open hoge.html
ブラウザーで開くと、この対応をする以前では、次のようにクリアコードのウェブサイトがiframeの中で読み込まれていました。
クリックジャッキング攻撃とは
このようにiframeで読み込むことができる場合は、クリックジャッキング攻撃に悪用される可能性があります。
クリックジャッキング攻撃については、次のウェブサイトの説明が分かりやすいです。
今回のケースでは、悪意のある人が作った悪意のあるウェブページ上にiframeを使ってクリアコードのウェブサイトを埋め込んで悪用する、という可能性があります。
クリアコードのウェブサイトではクリックジャッキングをされて困るような機能はないとは思いますが、念の為に対策をすることになったわけです。
.htaccessファイルを使ってiframeから読み込めなくする
iframeから読み込めなくするには、HTTPレスポンスヘッダーにX-Frame-Options: DENYを出力します。
このウェブサイトの公開にはApacheを使っているので、方法は2つあります。
- A: Apacheの設定を変更する
- メリット: パフォーマンスへの影響がBと比べて少ない
- デメリット: 管理者権限が必要
- B:
.htaccessファイルを使う- メリット: 一般ユーザー権限でできる
- デメリット: パフォーマンスへの影響がAと比べて大きい
今回は、私が管理者権限を持っていないので、Bの方法で行います。
Apacheでは.htaccessファイルを使うことで、様々な設定を各ディレクトリー単位で反映させることができます。
今回はウェブサイト全体に適用する必要があるので、トップレベルの.htaccessを編集します。
トップレベルの.htaccessに次の行を追加しました。
Header set X-Frame-Options DENY
実際の修正コミットはこちらです。
この修正がデプロイされた後、再度冒頭の方法でiframeから読み込もうとしてみました1。
すると、次のように読み込むことができなくなったことを確認できました。
以上で対応完了です。
まとめ
そういえば、ククログでもスライドを記事に埋め込むのにiframeを使うことがあります。
iframe自体は便利な機能なのでしょうが、他のウェブサイトに埋め込まれることを想定していないウェブサイトでは、
念の為にこの対応をしておくのが良さそうです。
今回私は、iframeの簡単な使い方や、Apacheの.htaccessがこういうケースで使えることを学ぶことができました。
こういう問題に気がついたら、さっと修正できるようになっていきたいです。
クリアコードではこのように知見や成果を公開することを重視しています。 クリアコードで働くことに興味を持たれた方は、クリアコードの採用情報をぜひご覧ください。
