CSP nonce 옵션 - primeVue, Vue-ECharts

odada·2025년 7월 11일

1. 개요

Vue 3 CSR 환경에서 CSP unsafe-inline 제거 및 nonce 기반 보안 적용을 했습니다.

적용 환경: Vue 3 + PrimeVue + CSR(SPA)
목표: style-src 'unsafe-inline' 제거 후 nonce 기반 정책 적용

2. 라이브러리별 적용 방법

PrimeVue

// PrimeVue 3.45+에서 공식 nonce 지원
app.use(PrimeVue, { nonce: window.__APP_NONCE__ })

동적 스타일 생성 시 nonce 자동 적용
공식 문서: https://primevue.org/configuration/#csp

Vue-ECharts (참고)

// CSP 지원 버전 사용
import VChart from 'vue-echarts/csp'
import 'vue-echarts/csp/style.css'

공식 문서: https://github.com/ecomfe/vue-echarts?tab=readme-ov-file#csp-style-src-or-style-src-elem

3. CSR 환경에서의 nonce 적용 메커니즘

SSR vs CSR 차이점

SSR: 서버에서 HTML 렌더링 시 nonce 직접 주입 가능
CSR: 정적 HTML에서 시작하여 클라이언트에서 JavaScript로 렌더링, 별도 nonce 전달 메커니즘 필요

CSR에서 nonce 적용 전략

1단계: 서버에서 nonce 주입

<!-- public/index.html -->
<script>
  window.__APP_NONCE__ = '${server-generated-nonce}'
</script>

2단계: Vue 애플리케이션에서 nonce 설정

// src/main.ts
import PrimeVue from 'primevue/config'

const nonce = window.__APP_NONCE__ || ''

app.use(PrimeVue, {
  ripple: true,
  nonce: nonce  // 모든 PrimeVue 컴포넌트에서 사용
})

3단계: 런타임 동적 스타일 처리
PrimeVue가 내부적으로 스타일 생성 시 nonce 자동 적용:

// PrimeVue 내부 메커니즘
function addStyle(css) {
  const style = document.createElement('style')
  if (this.nonce) {
    style.setAttribute('nonce', this.nonce)
  }
  // ...
}