Content Security Policy 해결 (feat. express-csp-header)

내 소중한 주말의 세시간을 잡아먹은 오류에 대한 포스팅이다.

Nodejs & Express로 작업을 하고 있던 도중, ejs 파일에 inline script를 추가할 일이 있어서 여느 때와 같이 script 태그 안에 JS 코드를 작성했더니,

Content Security Policy: 페이지 설정에 의해 리소스 로드가 차단됨: inline ("script-src")

이 에러가 떠서 나를 아주 화나게 했다.
여러 군데에 조사해 보니, inline script의 경우 변형에 의해 남의 공격을 받을 수 있어서 허용하지 않는다는 내용의 글들이 많았다.
https://developers.google.com/web/fundamentals/security/csp?hl=ko

기본값으로 막혀 있는 script의 출처(src)들을 '내가 사용할 사이트'들로 제한해줄 방법이 있는데,

먼저 시도해 본 방법은 meta 태그 안에 해당 값들을 정의하는 방법이었으나 효과가 없었으므로 따로 적어두진 않겠다.

두번째로 시도해 본 방법은 nodejs 서버 측에서 express-csp-header을 사용하여 값들을 정의하는 방법이었다. 이건 바로 효과가 있었다!

https://www.npmjs.com/package/express-csp-header
공식 사이트에 설명이 참 잘 되어있다.

1. express-csp-header 설치하기

$ npm install express-csp-header

2. 허용할 값 정의해주기
   내 프로젝트의 경우 app.js에서 해당 코드를 추가하였다.
   관련 코드만 잘라서 붙여넣으면 다음과 같다.
   내 경우, script 코드의 출처는 SELF(내 내부 script 파일), INLINE(ejs파일 내의 인라인 스크립트), 그리고 CDN으로 가져올 두 사이트("https://cdnjs.cloudflare.com", "https://unpkg.com")로 지정하였다.

import express from "express"
const app = express();
const { expressCspHeader, INLINE, NONE, SELF } = require('express-csp-header');
app.use(expressCspHeader({
    directives: {
        'script-src': [SELF, INLINE, "https://cdnjs.cloudflare.com", "https://unpkg.com"],
    }
}));

이렇게 해주면 다시 행복한 개발 시간으로 되돌아올 수 있다.

음.. 이렇게까지 열심히 내 프로젝트의 보완을 지켜주는 CSP 정말 귀찮았지만 고마웠고
다른 분들은 소중한 시간을 낭비하지 마시길 바란다.. 화이팅!