CSP

소개

  CSP는 컨텐츠 보안 정책으로, http header에 Content-Security-Policy를 설정하여 XSS(Cross-site scripting) 공격 및 기타 교차 사이트 인젝션을 예방한다. 이 기능은 helmet에 내장되어 있다. helmet을 사용하는 우리는 kakao와 github로부터 avatar를 가져올 수가 없다. CSP로 인해 신뢰할 수 없는 url이라고 인식하여 kakao와 github로부터 오는 데이터는 load하지 않기 때문이다.

error의 내용을 살펴보면 Refused to load the image 'URL' because it violates the following Content Security Policy directive: "img-src 'self' data:". 이라고 한다.

해결 방법

  이 문제를 해결하기 위해서는 kakao와 github의 avatarUrl 주소가 신뢰할 수 있음을 인지시켜줘야 한다. csp.js 파일을 생성하고 http header에 다음 내용을 추가하는 코드를 작성한다.

csp()

그리고 app.js에 middleware로 사용한다.

app.use()

성공~~

 

참고 자료

• helmet
• CSP - MDN
• nodeJS CSP 해결방법

소스 코드

github.com/zpskek/wetube-v3/commit/445ca33f5f5b4fd8de5e03389be69c9315e09cc9