티스토리 뷰
발생일: 2015.01.01
키워드: angular, AngularJS, 앵귤러, CSP, ng-csp, ngCSP, unsafe-eval
문제:
얼마 전에 익스텐션의 CSP 설정 때문에 아래 오류가 나면서 AngularJS 가 동작하지 않는 문제가 있었다.
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of
script in the following Content Security Policy directive: "default-src 'self'". Note that
'script-src' was not explicitly set, so 'default-src' is used as a fallback.
해결책:
난 CSP 제한을 완화하는 방식으로 해결했었는데, 검색하다보니 `ng-csp`라는 디렉티브가 있다는 걸 발견했다.
(실제로 오류 문구가 나오긴 하지만 동작에 문제가 없다는 것도 알았다.)
CSP (Content Security Policy)가 적용된 페이지에서는 XSS(Cross Site Scripting)을 방어하기 위해서 아래 두 경우를 허용하지 않는다.
- 함수 생성자(new Function)의 사용
- `eval()`을 통한 스크립트 수행
앵귤러는 성능 향상을 위해 다음 상황에 CSP에 위배되는 스크립트를 실행하고 있다고 한다.
- 함수 생성자를 사용해 값의 getter 생성
- 문서에 커스텀 스타일 시트를 추가
이 때, `ng-csp` 디렉티브를 페이지에 정의해두면, CSP에 호환하는 방식으로 변경해 동작한다.
(실제로 CSP에 위배된다고 판단하면 자동으로 호환 모드로 변환한다고 한다. 오류 문구가 나오지만 동작에는 이상 없음)
다만, 이럴 경우 모든 표현식의 성능이 30% 정도 떨어진다고 한다.
30%라니… 그 차이가 엄청나다.
성능이 무시할 정도가 아니라서 난 `unsafe-eval`을 추가하는 방식으로 처리했는데,
적용하고
자 한다면 아래처럼 `ng-app`이 적용되어 있는 엘리먼트에 `ng-csp` 디렉티브를 추가하면 된다.
<!doctype html>
<html ng-app ng-csp>
...
...
</html>
반응형
댓글
공지사항