Spring Security & CSP 안전한 이미지 삽입

최정환·2024년 7월 7일

최근 웹 개발 프로젝트에서 FileReader를 사용해 섬네일 이미지를 만들고, 이를 <img src="data:..."> 형식으로 삽입하려 할 때 문제가 발생했습니다.

이 문제를 해결하기 위해 메타 태그와 Spring Security의 Content Security Policy(CSP) 설정을 활용하는 방법을 소개합니다.

CSP란 무엇인가?

Content Security Policy(CSP)는 웹 페이지에 대한 보안 표준으로, 스크립트, 스타일, 이미지 등의 리소스를 어떤 출처에서 로드할 수 있는지 명시하는 정책을 설정할 수 있습니다.

이를 통해 XSS(Cross-Site Scripting)와 같은 공격을 예방할 수 있습니다.

문제 상황

FileReader API를 이용해 사용자가 업로드한 이미지를 미리보기 형태로 보여주려 했습니다. img 태그의 src 속성에 data: 형식으로 데이터를 넣었지만, 브라우저에서 보안 문제로 인해 이미지를 로드하지 못했습니다.

CSP는 브라우저가 허용되지 않은 출처의 콘텐츠를 로드하는 것을 방지하기 때문에, 이와 관련된 에러가 발생한 것입니다.

문제 해결해보기

메타 태그로 CSP 설정하기

처음에는 메타 태그를 사용해 명시적으로 CSP를 허용하려 했습니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'">

하지만 이 방법은 작동하지 않았습니다. 브라우저가 이미지를 로드하는 것을 여전히 차단했습니다.

Spring Security에서 CSP 설정하기

Spring Security를 사용하면 보다 강력하게 CSP를 설정할 수 있습니다.
이를 통해 <img src="data:..."> 형식의 이미지를 허용하는 정책을 설정할 수 있습니다. Spring Security 설정 파일에서 다음과 같이 추가할 수 있습니다.

import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .headers()
                .contentSecurityPolicy("default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'");
    }
}

이 설정을 통해 브라우저는 동일 출처('self')와 data: 형식의 이미지를 로드할 수 있게 됩니다. 또한, 스크립트와 스타일은 동일 출처에서만 로드할 수 있도록 제한됩니다.

자세한 CSP 설정

필요에 따라 CSP 정책을 더 세밀하게 설정할 수도 있습니다. 예를 들어, 외부 CDN에서 로드되는 스크립트나 스타일을 허용하려면 해당 출처를 추가할 수 있습니다

http
    .headers()
        .contentSecurityPolicy("default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; style-src 'self' 'unsafe-inline' https:");