CSP(Content Security Policy)에 대하여

 

* java 코드 중 filter에다가 csp를 self로 설정해놓았다.

(springboot 프로젝트)

package .....;

import java.io.IOException;

import org.springframework.stereotype.Component;
import jakarta.servlet.Filter;
import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.http.HttpServletResponse;

@Component
public class CspHeaderFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
        throws IOException, ServletException {
        
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        httpResponse.setHeader("Content-Security-Policy",
        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'");

        chain.doFilter(request, response);
    }
}

 

그랬더니 개발자도구에서 아래와 같은 오류가 발생.

Refused to execute inline event handler because it violates 
the following Content Security Policy directive: 
"script-src 'self'". Either the 'unsafe-inline' keyword, 
a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. 
Note that hashes do not apply to event handlers, style attributes and javascript: 
navigations unless the 'unsafe-hashes' keyword is present.

 

위 에러 메시지는 Content Security Policy(CSP) 위반으로 인해 발생한 것입니다.

즉, 난독화 후의 JS 코드에서 onclick 같은 inline 이벤트 핸들러나 <script> 태그에 직접 삽입된 JS를 사용하고 있어서

브라우저가 보안을 위해 이를 거부한 것입니다.

🔍 원인 요약

CSP 정책이 다음과 같이 설정되어 있을 경우:

Content-Security-Policy: script-src 'self'

이 경우에는:

• <button onclick="doSomething()"> ❌ 허용되지 않음
• <script>alert('hi')</script> ❌ 허용되지 않음
• <script src="/js/app.js"></script> ✅ 외부 파일에서만 실행 가능

---

🛠 해결 방법

✅ 1. Inline 이벤트 제거

모든 inline 이벤트(onclick, onload, onmouseover 등)를 제거하고 JS 코드로 분리하세요.

변경 전:

html

<button onclick="doSomething()">Click</button>

 

변경 후:

html

<button id="myBtn">Click</button> <script src="/js-dist/app.js"></script> <!-- 난독화된 외부 파일 -->

 

js

// app.js 내부 document.getElementById('myBtn').addEventListener('click', doSomething);

---

✅ 2. CSP 정책 완화 (권장하지 않음)

정말 불가피한 경우, CSP를 다음과 같이 수정하면 가능하지만 보안상 권장되지 않습니다:

Content-Security-Policy: script-src 'self' 'unsafe-inline'

 

또는 더 안전하게 nonce 방식을 사용:

Content-Security-Policy: script-src 'self' 'nonce-abc123'

 

그리고 <script nonce="abc123">...</script> 같이 적용.

 

 

---

✅ 1. CSP 정책이란?

**CSP(Content Security Policy)**는 웹사이트의 스크립트, 이미지, 스타일 등의 출처를 제어하는 보안 정책입니다.
XSS 공격(스크립트 삽입 공격) 등을 막기 위해 사용됩니다.

예시 CSP:

Content-Security-Policy: script-src 'self'

이 말은:

• 오직 **같은 출처(origin)**의 JS 파일만 실행 가능
• onclick="..." 같은 inline JS 코드는 실행 불가
• <script>alert('hi')</script> 도 실행 불가

---

나같은 경우  onclick 속성을 많이 사용하기 때문에 filter 자체를 빼버림 ~!