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の概要からインストール方法、各コア機能(Security, Sessionなど)の解説が体系的にまとめられています。2018年に出版されたばかりなので情報も新しいです。これからSpring Bootでアプリケーション開発をしたい方の最初に読む一冊としておすすめします。対象は初心者だけでなく上級者まで幅広く学べるので是非読んでみてください!
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す