Rocket Loader 적용하기

Advice

며칠간 Rocket Loader를 사용해보니 Content Security Policy를 최적화하는데 손이 많이 간다. 워드프레스에 설치한 다양한 플러그인이 다양한 도메인의 자바스크립트를 불러오다 보니 일이 많더라. 워드프레스에는 Rocket Loader와 똑같은 일을 하는 플러그인이 많고 이런 플러그인을 사용하면 CSP 헤더를 수정하느라 고생할 필요가 없다. Rocket Loader는 개인 블로그에는 과한 듯 싶다.

CloudFlare의 Rocker Loader를 적용했더니 Discourse 포럼 사이트가 제대로 로딩 안 되더라. CloudFlare 측에서 JavaScript를 수정하다 오류가 발생했나 싶었다. 하지만 웹브라우저의 개발자 도구로 살펴보니 Content Security Policy 관련 오류가 발생하더라.

결국 Nginx 쪽에 Content Security Policy 헤더를 넣어주어 문제를 해결했다. CloudFlare의 다른 기능을 쓰다가 또 웹사이트를 깨먹을까봐 공식문서에 있는 directive를 몽땅 넣어줬다. Kubernetes의 Nginx Ingress Controller 기준으로 코드를 짜면 다음과 같다.

apiVersion: v1
data:
  Content-Security-Policy: script-src 'self' ajax.cloudflare.com; script-src 'self' 'unsafe-inline'; script-src 'self' static.cloudflareinsights.com; script-src static.cloudflareinsights.com; connect-src cloudflareinsights.co;
kind: ConfigMap
metadata:
  name: custom-headers
  namespace: ingress-nginx
---
apiVersion: v1
data:
  add-headers: "ingress-nginx/custom-headers"
kind: ConfigMap
metadata:
  name: ingress-nginx-controller
  namespace: ingress-nginx
  labels:
    app.kubernetes.io/name: ingress-nginx
    app.kubernetes.io/part-of: ingress-nginx

공식 문서에서 언급하듯 ConfigMap을 변경한 후에 Controller를 재배포해야 설정이 적용된다. 재배포를 하기 싫거나 특정 웹 서비스에만 CSP 헤더를 추가하고 싶다면 annotation 에 설정을 달아도 된다.

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: discourse
  namespace: discourse
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/configuration-snippet: |
      more_set_headers "script-src 'self' ajax.cloudflare.com";

전과 후

워낙 소규모 서버라 성능이 들쭉날쭉해서 성능 테스트는 의미가 없지만 재미 삼아 성능이 얼마나 나아졌나 살펴본다.

참고

Author Details

Author Details

최 재훈

Kubernetes, DevSecOps, AWS, 클라우드 보안, 클라우드 비용관리, SaaS 의 활용과 내재화 등 소프트웨어 개발 전반에 도움이 필요하다면 도움을 요청하세요. 지인이라면 가볍게 도와드리겠습니다. 전문적인 도움이 필요하다면 저의 현업에 방해가 되지 않는 선에서 협의가능합니다.

https://twitter.com/andromedarabbit

plaintext@andromedarabbit.net