舞台裏

Qiita が表でこっちが裏。こっそりやっていく。

20.1.5 X-Frame-Options

正しさの保証なんてものはない。

※印で始まる文章は本文にはない、私個人の感想やコメント・注釈です。

20.1.5 X-Frame-Options

Allowing your website to be added to a frame can be a security issue.

Web サイトをフレームに追加できることを許可すると、セキュリティの問題が発生する可能性があります。

For example, using clever CSS styling users could be tricked into clicking on something that they were not intending (video demo).

例えば、賢い CSS スタイルは、ユーザーに意図しないものをクリックするよう騙すことができます。

デモムービー

※マウスに追随する形で <iframe> を動かし、透明にすることで別ページのボタンを気付かないうちにクリックできるようにしている。

For example, a user that is logged into their bank might click a button that grants access to other users.

例えば、銀行のサイトにログインしたあるユーザが、他のユーザへのアクセス権を付与するボタンを押すかもしれません。

This sort of attack is known as Clickjacking.

これはクリックジャッキング攻撃の一種として知られています。

Another modern approach to dealing with clickjacking is to use Section 20.1.7, “Content Security Policy (CSP)”.

クリックジャッキングを扱う他の最近のアプローチについては Section 20.1.7, “Content Security Policy (CSP)” を使用してください。

There are a number ways to mitigate clickjacking attacks.

クリックジャッキング攻撃を緩和する方法はいくつかあります。

For example, to protect legacy browsers from clickjacking attacks you can use frame breaking code.

例えば、レガシーなブラウザでクリックジャッキング攻撃を防ぐ方法として、 frame breaking code というものがある。


Frame Breaking Code について

X-Frame-Options-Header ヘッダーをサポートしていないレガシーなブラウザでも、 <iframe> を使ったクリックジャッキング攻撃ができないようにするための対策方法。

ページが <iframe> 経由で読み込まれているかどうかを判定して、 <iframe> 経由で表示されている場合は現在の URL を強制的に <iframe> 内部の URL で書き換えてしまう。

そうすることで、気付かないうちに <iframe> 内のボタンを押させられていた、といったことを防ぐ。

要するに <iframe> 経由でページを読み込めないように強制してしまうことで、クリックジャッキング攻撃を防ぐという手法。

具体的には次のような html と JavaScript をページ内に記述することで実現できる。

<!-- 現在のページ全体を強制的に非表示にする CSS 設定 -->
<style id="antiClickjack">body{display:none !important;}</style>
if (self === top) {
        // iframe を利用せず直接開かれた場合は、すぐに <style> タグを除去する
        var antiClickjack = document.getElementById("antiClickjack");
        antiClickjack.parentNode.removeChild(antiClickjack);
} else {
        // iframe 経由で読み込まれたらこっちが実行されて、ページの URL が強制的に書き換わる
        top.location = self.location;
}

While not perfect, the frame breaking code is the best you can do for the legacy browsers.

しかし、これは完全ではありません。 frame breaking code はレガシーブラウザでのベストな方法です。

A more modern approach to address clickjacking is to use X-Frame-Options header:

クリックジャッキングへのより現代的なアプローチは、 X-Frame-Options ヘッダーを使うことです。

X-Frame-Options: DENY

The X-Frame-Options response header instructs the browser to prevent any site with this header in the response from being rendered within a frame.

X-Frame-Options のレスポンスヘッダーは、レスポンスにこのヘッダーがある場合、任意のサイトでフレーム内でレンダリングされることを防ぐようブラウザに指示します。

By default, Spring Security disables rendering within an iframe.

デフォルトでは、 Spring Security は iframe でのレンダリングは無効にしています。

You can customize X-Frame-Options with the frame-options element.

あなたは X-Frame-Options<frame-options> 要素でカスタマイズすることができます。

For example, the following will instruct Spring Security to use “X-Frame-Options: SAMEORIGIN” which allows iframes within the same domain:

例えば、以下は Spring Security に同一ドメインでのフレームの利用を許可するよう X-Frame-Options: SAMEORIGIN を使って指示しています。

<http>
    <!-- ... -->

    <headers>
        <frame-options
        policy="SAMEORIGIN" />
    </headers>
</http>

Similarly, you can customize frame options to use the same origin within Java Configuration using the following:

同様に、Java Configuration だと次のような方法で同一オリジンでのフレームの使用を許可するようカスタマイズできます。

@EnableWebSecurity
public class WebSecurityConfig extends
WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
    // ...
    .headers()
        .frameOptions()
            .sameOrigin();
}
}