AJAX 사용하는방법
들어가며
스프링 부트를 사용하며 간단한 토이프로젝트를 만든후에 시큐리티를 적용한 로그인 페이지로 바꾸고있었다. 하지만 시큐리티를 적용하기전에는 AJAX를 사용하요 실시간으로 검증을 할수 있었는데. Security를 적용한후에는 사용이 안됬었다. 찾아보니 crsf설정을 해야했다. 그래서 어떻게 적용하는지 간단하게 알아보자
프로젝트환경
springboot -version : 2.6.3
bulid : gradlejava -version : 11
DB : Mysql_8.0.33
IDE : IntelliJ _Ultimate
CRSF란
CSRF(Cross-Site Request Forgery)공격이란. 악성 웹 사이트 공격 유형이다.
간단하게 말하자면 사용자가 로그인한 상태에서 다른 사이트에 악의적인 요청을 보내는 방법이다. 이 요청은 사용자도 인지 하지 못하며, 사용자가 가진 권한을 이용해 악용될수있다. 그래서 CRSF 공격을 방어려하면 HTTP 요청에 CRSF토큰을 추가해야한다. HTTP 파라미터나 HTTP 헤더 같이 브라우저가 자동으로 추가하지 않는 곳에 넣어줘여한다.
AJAX에서 CRSF토큰
Ajax나 JSON Requests 을 사용한다면 HTTP 파라미터로 CSRF 토큰을 보낼수가 없다. 그 이유는 보통 웹페이지에서 만들어지는게 아닌 JavaScript 코드에서 생성되기 때문에 사용할수없다. 대신에 HTTP 헤더에 추가하여 사용할수있다.
사용방법
SecurityConfigure
@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
/// 기타 url 인증 설정///
http.cors()
.and()
.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
}
- cros() : cors 관련 구성을 정의하는 메서드
- csrf() : CRSF 공격을 보호하기 위해서 설정을 추가
- csrfTokenRepository(....) : 기본적으로 스프링 시큐리티는 HttpSessionCsrfTokenRepository로 CSRF토큰을 HttpSession에 저장한다. 하지만 커스텀 CsrfTokenRepositoy를 설정하고 싶을때 사용한다(ajax, json)
- CookieCsrfTokenRepository : csrf토큰을 쿠키에 저장하며 사용한다.
- withHttpOnlyFalse() : 토큰을 저장할때 javaScript에서도 접근이 가능하게 한다.
html
<script th:inline="javascript">
var csrfToken = /*[[${_csrf.token}]]*/ '';
var csrfHeader = /*[[${_csrf.headerName}]]*/ '';
</script>
자바 스크립트를통해 변수에 토큰값과 헤더정보를 만든다.
html
$.ajax({
url: "매핑 URL",
type: "POST",
data: {"값": 변수값},
beforeSend: function (xhr){
xhr.setRequestHeader(csrfHeader,csrfToken)
},
사용할 AJAX 코드에 콜백함수(beforeSend)를 사용하여 서버로 전송되기전에 실행하게 하여, 헤더정보와 토큰을 추가해서 넣어준다.
실행장면
DB에 "123"과 "ID"가 있다고 가정
