Content Security Policy 설정

2017-12-14 by 편리

이 블로그는 nginx 상에서 운영되고 있다. 최근에 Content Security Policy(이하 CSP) 관련 내용을 접하고 실제 서버 설정에 적용해서 운영해보고 있다. 처음 설정 때는 이미지, JS 파일 등이 차단되어 브라우저 개발자도구에서 무수한 오류가 떠서 놀라기도 했는데 차근차근 도메인을 추가하고 설정을 변경하다 보니 아직까지는 문제없이 적용되어 작동이 되는 것 같다. CSP 관련 룰을 적용하고 https://observatory.mozilla.org/ 에서 테스트 해본 결과는 아래 이미지와 같다. 처음엔 F 등급이었던 것에 비하면 많이 나아진 것이다.

B 등급 이상을 받기 위해 설정을 더 변경해야겠지만 그러기엔 너무 일이 많을 것 같고 더구나 영어 울렁증에 문서를 보는 것도 쉽지 않기 때문에 이 정도에서 마무리했다. 아래는 적용하여 사용 중인 CSP 룰 설정이다.

# config to don't allow the browser to render the page inside an frame or iframe
# and avoid clickjacking http://en.wikipedia.org/wiki/Clickjacking
# if you need to allow [i]frames, you can use SAMEORIGIN or even set an uri with ALLOW-FROM uri
# https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

add_header X-Frame-Options SAMEORIGIN;

# when serving user-supplied content, include a X-Content-Type-Options: nosniff header along with the Content-Type: header,
# to disable content-type sniffing on some browsers.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
# currently suppoorted in IE > 8 http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx
# http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx
# 'soon' on Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=471020

add_header X-Content-Type-Options nosniff;

# This header enables the Cross-site scripting (XSS) filter built into most recent web browsers.
# It's usually enabled by default anyway, so the role of this header is to re-enable the filter for
# this particular website if it was disabled by the user.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers

add_header X-XSS-Protection "1; mode=block";

# with Content Security Policy (CSP) enabled(and a browser that supports it(http://caniuse.com/#feat=contentsecuritypolicy),
# you can tell the browser that it can only download content from the domains you explicitly allow
# http://www.html5rocks.com/en/tutorials/security/content-security-policy/
# https://www.owasp.org/index.php/Content_Security_Policy
# I need to change our application code so we can increase security by disabling 'unsafe-inline' 'unsafe-eval'
# directives for css and js(if you have inline css or js, you will need to keep it too).
# more: http://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful

add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https://onesignal.com https://*.onesignal.com https://yoast.com https://*.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google.com https://*.google-analytics.com https://onesignal.com https://*.onesignal.com https://*.googlesyndication.com https://wcs.naver.net https://*.google-analytics.com https://*.google.co.kr https://*.doubleclick.net https://*.gstatic.com; img-src 'self' data: https://*.google-analytics.com https://secure.gravatar.com https://wcs.naver.com https://*.doubleclick.net https://*.w.org/ https://wordpress.org/; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://onesignal.com; font-src 'self' data: https://fonts.gstatic.com; frame-src 'self' https://*.doubleclick.net https://*.youtube.com https://*.google.com; object-src 'none'";

설정에서 제일 힘들 것이 img-src 등의 도메인 등을 하나씩 확인하고 추가하는 것이었다. 외부에서 컨텐츠를 가져오는 경우가 많기 때문이다. 워드프레스에 다른 플러그인을 추가해서 사용하게 되면 경우에 따라서는 설정을 추가 변경해야 하는 경우도 생길 수 있다.

참고 : https://content-security-policy.com/

Leave a Reply Cancel reply