Springsecurityのログイン後の画面について

Question

いつもお世話になっております。
Springsecurityのログイン後の画面について質問があります。
ログイン成功した場合、sucess.htmlに画面遷移するように設定しているのですが
first.htmlに設定しているmain.jsのソースの画面が表示されてしまいます。
first.htmlからmain.jsのソースを外し、もう一度ログインを実施したところ
ログイン成功し、sucess.htmlに画面遷移しました。
原因が不明ですのでご教授お願い致します。
2017/06/11追記
一度ログインし、main.jsのソースの画面を表示し、再度First.htmlに戻り
ログインすると、正常にsucess.htmlに画面遷移しました

//Test.java
package com.tuyano.springboot.app;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.tuyano.springboot.app.Emp;
import com.tuyano.springboot.app.EmpRepository;
import com.tuyano.springboot.dateaccess.DataAccessRepository;
import com.tuyano.springboot.dateaccess.Newaccount;




@Controller
@EnableAutoConfiguration
public class Test {

	@Autowired //リポジトリを紐づけます
	EmpRepository repository;
	@Autowired //リポジトリを紐づけます
    DataAccessRepository dataAccessRepository;
	@RequestMapping(value="/")
	@ResponseBody
	public String home(){
    //json値格納変数
	String jsonvalue;
	 //全件取得します
	Iterable<Emp> list = repository.findAll();
		
		// 取得した内容を出力します
		for(Emp emp: list){
		//Jacksonでオブジェクトを JSON に変換
		ObjectMapper objectMapper = new ObjectMapper();
		try {
			jsonvalue = objectMapper.writeValueAsString(emp);
		System.out.println("jsonの値"+jsonvalue);
        return jsonvalue;
		}catch (JsonProcessingException e) {
			e.printStackTrace();
		}
		}
		return null;
		
	}
	//firstGet画面呼び出し
	@RequestMapping(value="/First",method=RequestMethod.GET)
	public String FirstGet(){
	    
		return null;
	}
	//firstPost画面呼び出し
	@RequestMapping(value="/First",method=RequestMethod.POST)
	public String FirstPost(){
	    
		return "アイウエオ";
	}

		//Sucess画面呼び出し
		@RequestMapping(value="/sucess",method=RequestMethod.GET)
		public String SucessGet(){
		return null;
		}
		//failure画面呼び出し
		@RequestMapping(value="/failure",method=RequestMethod.GET)
		public String FailureGet(){
		return null;
		}
		}

//SecurityConfig.java
package com.tuyano.springboot.springsecurity;

import org.springframework.context.annotation.Bean;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;



@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter{
	@Autowired
	private DataSource dataSource;
	
	private static final String USER_QUERY="select name, password, 1 from Newaccount where name = ?";
	private static final
	String ROLES_QUERY="select username, authority from AUTHORITIES where username = ?";
	
	@Override
	protected void configure(HttpSecurity http)  throws Exception{
	http
	.authorizeRequests()
	.antMatchers("/First.html").permitAll()
	.antMatchers("/templates/**").hasAnyAuthority("ROLE_ADMIN")
	.anyRequest().authenticated()
	.and()
	.formLogin()
	.loginPage("/First.html")
	.loginProcessingUrl("/processLogin")
	.defaultSuccessUrl("/sucess.html")
	.failureUrl("/failure.html")
	.usernameParameter("name")
	.passwordParameter("password")
	.and()
	.logout()
	.logoutUrl("/processLogout")
	.logoutSuccessUrl("/First")
	.and()
	.csrf()
	.disable();
		
	}
	@Override
    public void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.jdbcAuthentication()
                .dataSource(dataSource)
                .usersByUsernameQuery(USER_QUERY)
                .authoritiesByUsernameQuery(ROLES_QUERY);
                //passwordEncoder(new BCryptPasswordEncoder());
                //.authoritiesByUsernameQuery(
                  //      "select mail_address, role from accounts where mail_address = ?");
    }
	

}

//first.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>top page</title>
<meta http-equiv="Content-Type"
content="text/html" charset="UTF-8"/>

<!-- css -->

<style>
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 100% }
</style>

</head>
<body>
<form action="/processLogin" method="POST">
 <dl>
 <dt>
 ログイン名前
 </dt>
 <dd>
 <input type="text" name="name"></input>
</dd>
 <dt>
 ログインパスワード
 </dt>
 <dd>
 <input type="password" name="password"></input>
 </dd>
 </dl>
 <button>ログイン</button>
 </form>
 <hr/>
                    <form action="urlForUpload" enctype="multipart/form-data" method="post">
                        <div class="form-group">
                            <label>■ファイル種類：</label>
                            <select id="select_file_type" name="select_file_type" required="">
                                <option value="login-user">ログインユーザー</option>
                                <!-- アップロードするファイルを定義していく -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label>■ファイルパス：</label>
                            <input type="file" id="upload_file" name="upload_file" required="" />
                        </div>
                        <div class="form-group">
                            <input id="data_upload_button" type="submit" value="アップロード" />
                        </div>
                    </form>
                    <table>

</table>
 <div id ="map"></div>
<script type="text/javascript" src="js/main.js" th:src="@{/js/main.js}"></script>
</body>
</html>

//main.jsです。ログイン後このソースが画面上に表示されます
//マップAの緯度経度
var centerA = {
lat: 35.66929, // 緯度
lng: 139.707056 // 経度
	};

//マップBの緯度経度
var centerB_index = [ // マーカーを立てる場所名・緯度・経度
                {
                    name: '原宿駅',
                    lat: 35.670399,
                    lng: 139.702715
                    //icon: 'tam.png' // TAM 東京のマーカーだけイメージを変更する
                }, {
                    name: '明治神宮前駅',
                    lat: 35.668486,
                    lng: 139.705376
                }, {
                    name: '乃木坂駅',
                    lat: 35.66649,
                    lng: 139.726242
                },
                {
                    name: '青山霊園',
                    lat: 35.666929,
                    lng: 139.721562
                }, {
                    name: '赤坂駅',
                    lat: 35.672212 ,
                    lng: 139.73638
                }
            ];
//マップBのインデックス番号
var centerB_index_number =centerB_index_i();

var centerB = centerB_index[centerB_index_number];
alert(JSON.stringify(centerB));




//マップBのインデックス番数を取得
function centerB_index_i() {
	var count;
//for文でハッシュ分回す
for (var i=0; i < centerB_index.length; i++){
	//配列の要素を取得し、緯度の最小値を取得
	var B_lat_min = Math.min.apply(null,centerB_index.map(function(o){return o.lat;}));
    //最小値に一致したインデックスを取得
	if(B_lat_min == centerB_index[i].lat){
	//インデックスの番数
	count = i;
	break;
    }
}

    return count;
}

//マップAの緯度経度とマップBの緯度経度を格納する変数
var centerA_pass;
var centerB_pass;

//initmap関数の変数
var map;
var marker = [];
var infoWindow = [];
var markerData = [];

//ロード処理
window.onload = function(){
 markerData = markdata_pass(centerA_pass,centerB_pass);
 initMap(markerData);

}

//markdataの変数にAとBの二拠点を渡す関数
function markdata_pass(centerA_pass,centerB_pass){
	centerA_pass = centerA;
	centerB_pass = centerB;
	return Array(centerA_pass, centerB_pass);

	}

Answer 1

First.htmlの中から未ログイン状態で main.js をブラウザがリクエストするため、 未認証状態で最後にリクエストしたURL としてSpringSecurity側は記憶します。
おそらくブラウザの開発者モード(F12)で開いておくと、/js/main.jsへのリクエストが飛んでいるのを確認できるでしょう。

そのためログイン完了後はデフォルトの動作として、未認証状態で最後にリクエストしたURLを復元する動作を行いますので、/js/main.js へ遷移しますので、もしそのJavaScriptが未認証状態でも参照できて問題ないのであれば、SpringSecurityの設定に、JavaScriptも認証状態問わずアクセス可能にすると良いでしょう。

http
.authorizeRequests()
.antMatchers("/First.html").permitAll()
.antMatchers("/failure.html").permitAll()
.antMatchers("/js/**").permitAll()
.antMatchers("/templates/**").hasAnyAuthority("ROLE_ADMIN")
.anyRequest().authenticated()
…(省略)…

ないしは、defaultSuccessUrlを使わずに、successFowrardUrlを使い、ログイン後に直接SpringMVCのコントローラへ遷移して、ログイン後続処理を行うのもよく使われます。

Comments

[heavyuseman]

ご回答ありがとうございます。.
antMatchers("/js/**").permitAll()を追記したところ、正常にsucess.htmlに画面遷移しました。
お忙しい中ご回答ありがとうございました。