Kotlin 髙妻智一

Spring SecurityでCORSの設定を行う




CORSとは

Cross-Origin Resource Sharingの略で、ブラウザがHTMLを読み込んだサーバ以外から安全にデータを取得できるようにする仕組みです。一番最初にHTMLを読み込んだサーバーをオリジンと呼びます。

a-site.comから最初のHTMLを取得して、b-site.comからjsやcssを取得

するときb-site.com側でCORSの設定を行います。

その設定内容はオリジンがa-site.comだったらjsやcssをブラウザに返しますよという設定になります

Spring SecurityでのCORSの設定方法

Spring Securityを使うとログイン、CSRF、CORSなどの設定が簡単にできます。

インストール

gradleでインストールする場合は下記をbuild.gradleに追加するだけです。

dependencies {
    compile('org.springframework.boot:spring-boot-starter-security')
}

CORS設定

CORSはこれだけの設定で完了です。kotlinで書いているので適宜Javaに読み替えてください。

今回重要なのは、addAllowedOrigin()にa-site.comを登録しているところです。この設定をすることでオリジンがa-site.comのブラウザからのアクセスを許可することができます。

@EnableWebSecurity
class SecurityConfig : WebSecurityConfigurerAdapter() {

    override fun configure(http: HttpSecurity) {

        // CORS設定
        http.cors()
                .configurationSource(corsConfigurationSource())
    }

    /**
     * CORS設定
     *
     * @return CORS設定
     */
    private fun corsConfigurationSource(): CorsConfigurationSource {
        val corsConfiguration = CorsConfiguration()
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL)
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL)
        corsConfiguration.addAllowedOrigin("https://a-site.com")
        corsConfiguration.setAllowCredentials(true)

        val corsConfigurationSource: UrlBasedCorsConfigurationSource = UrlBasedCorsConfigurationSource()
        corsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration)

        return corsConfigurationSource
    }
}

CORS設定の簡単なテスト方法

テスト方法はまずCORS設定前にローカル環境にNginxを立てて下記HTMLでa-site.comにアクセスします。

nginxのインストールと起動はこれ（Macの場合）

$ brew install nginx
$ nginx

/usr/local/var/www/sample.htmlとして下記HTMLを作成します。

<html>
  <head>
    <title>cors test</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(function() {
         $.ajax({
           url:'http://a-site.com',
           type:'GET',
           xhrFields: {
             withCredentials: true
           }
         })
        .done(function(data){
          $('#response').text(JSON.stringify(data, null, "    "));
        })
        .fail(function(){
        });
      });
    </script>

    <textarea cols="200" rows="50" id="response"></textarea>
  </body>
</html>

作成後にhttp://localhost:8080/sample.htmlにアクセスしてa-site.comからレスポンスが正常に取得できることを確認します。この後にCORS設定をしてからアクセスしてレスポンスがエラーになっていればちゃんとCORS設定ができています。

このようにCORSをちゃんと設定することでクロスドメインからのアクセスを制限することができます。

まとめ

  • CORSとはブラウザがHTMLを読み込んだサーバ以外から安全にデータを取得できるようにする仕組み。
  • Spring Securityを使うと簡単に設定できる。

最近だと、SPA（シングルページアプリケーション）でサイトを作ることが多くなってきているのでCORSについてしっかりと知っておく必要があるかと思います。

CORSの仕組みを理解していればこのようなちょっとした設定でも迷うことなくできるようになるのでこの際にしっかりと学んでみてください。

おすすめ書籍

JPAに関して体系的に学べる良い書籍だと思います。良くあるSpring系書籍ですとJPAは少ししか紹介がありませんが丸々一冊JPAに関してなので詳細な解説がされています。内容はJPAと他のORMとの比較から始まりセットアップ、実装の仕方まで幅広く網羅されています。これからJPAで開発を初めてみようかなと考えている方は一読することをオススメします！

Spring Data JPAプログラミング入門

posted with ヨメレバ
溝口賢司 秀和システム 2017年08月03日
Amazon
Kindle
楽天ブックス

Springの概要からインストール方法、各コア機能（Security, Sessionなど）の解説が体系的にまとめられています。2018年に出版されたばかりなので情報も新しいです。これからSpring Bootでアプリケーション開発をしたい方の最初に読む一冊としておすすめします。対象は初心者だけでなく上級者まで幅広く学べるので是非読んでみてください！

Spring Boot 2プログラミング入門

posted with ヨメレバ
掌田津耶乃 秀和システム 2018年01月31日
Amazon
Kindle
楽天ブックス

 

The following two tabs change content below.
Twitter のプロフィール

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。