개발하는데 다 이유가 있겠지

처음 보는 경고 문구..

콘텐츠 보안 정책(Content Security Policy)

---

신뢰할 수 있는 웹 페이지 컨텍스트에서 악의적인 콘텐츠 실행으로 크로스 사이트 스크립팅(XSS), 클릭 재킹 및 기타 코드 삽입 공격을 방지하기 위해 도입된 컴퓨터 보안 계층이다.

웹에서 사용하는 컨텐츠(이미지, 스크립트 등)에 대한 규칙으로 생각하면 될 것 같다.

CSP의 경우 웹 사이트가 직접 룰을 적용해서 사용하게 된다.

 

CSP 대표 헤더

---

• Content-Security-Policy : W3C에서 지정한 표준 헤더(주로 사용함)
• X-Content-Security-Policy : Firefox/IE 구형 브라우저에서 사용되는 헤더
• X-WebKit-CSP : Chrome 기반의 구형 브라우저에서 사용되는 헤더

 

https://web.dev/articles/csp?hl=ko

 

설정 방법

---

1. <meta> 태그를 이용한 방법

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

페이지별로 다른 CSP를 적용하고 싶을 때 유용합니다.

2. HTTP 헤더에 직접 설정하기

// helmet 미들웨어 적용
app.use(helmet());

// Content-Security-Policy 설정
app.use(
    csp({
        directives: {
            defaultSrc: ["'self'"],
            scriptSrc: ["'self'", "'sha256-5+YTmTcBwCYdJ8Jetbr6kyjGp0Ry/H7ptpoun6CrSwQ='"]
            // 추가하고 싶은 설정 추가...
        }
    })
);

 

서버에서 HTTP 응답 헤더에 Content-Security-Policy 헤더를 추가하여 CSP를 설정합니다. 전체 웹사이트에 동일한 CSP를 적용하고 싶을 때 효과적입니다.

 

 

지시문	설명
default-src	디폴트 설정
connect-src	연결할 수 있는 URL을 제한 (ajax, websockets 등)
script-src	스크립트 관련 권한 집합을 제어
child-src	iframe 태그에서 사용
style-src	스타일시트 관련 권한 집합을 제어
font-src	웹 글꼴을 제공할 수 있는 출처를 지정
img-src	이미지 관련 권한 집합을 제어
report-uri	콘텐츠 보안 정책 위반 시 브라우저가 보고서를 보낼 URL을 지정 meta 태그에서는 이 지시문을 사용할 수 없음

[참조]
https://simjaejin.tistory.com/31
https://web.dev/articles/csp?hl=ko