Vue Academy · 강의

Vue의 콘텐츠 보안 정책(CSP)

CSP 헤더, nonce 기반 스크립트, 해시 기반 정책과 Vite CSP 설정을 다룹니다.

레슨 2/413개 단계

Vue의 콘텐츠 보안 정책(CSP)은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSP란 무엇인가

콘텐츠 보안 정책은 어떤 스크립트, 스타일, 이미지 및 연결 출처를 허용할지 브라우저에 알려 주는 HTTP 응답 헤더입니다. XSS에 대한 강력한 2차 방어선으로, 삽입된 스크립트라도 출처가 허용되지 않으면 차단합니다.

헤더

CSP는 Content-Security-Policy 응답 헤더를 통해 전달됩니다. 각 지시자는 리소스 유형별로 허용되는 출처를 나열합니다.

Content-Security-Policy: default-src 'self'; script-src 'self';

스크립트 출처 제한하기

script-src 지시자는 스크립트를 어디에서 불러올 수 있는지 제어합니다. 이를 'self'로 제한하면 공격자가 삽입할 수 있는 인라인 스크립트와 타사 스크립트가 차단됩니다.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

unsafe-inline 피하기

'unsafe-inline'은 인라인 스크립트와 이벤트 핸들러 속성을 허용하며, 이는 XSS가 악용하는 바로 그 기능입니다. 강력한 정책에서는 이를 제외하여 삽입된 인라인 코드가 실행되지 않도록 합니다.

unsafe-eval 피하기

'unsafe-eval'은 eval과 Function 생성자를 허용합니다. Vue 3 런타임 빌드에는 이 기능이 필요하지 않습니다. 템플릿이 미리 컴파일되기 때문이므로, 이를 제외할 수 있고 제외해야 합니다.

논스 기반 인라인 스크립트

인라인 스크립트가 정말 필요한 경우 응답마다 무작위 nonce를 부여하고 정책에 해당 논스를 나열하십시오. 일치하는 논스를 가진 스크립트만 실행됩니다.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

논스가 unsafe-inline보다 나은 이유

논스는 예측할 수 없고 응답마다 변경되므로, 공격자가 스크립트를 삽입하더라도 논스를 추측할 수 없습니다. 따라서 unsafe-inline의 포괄적인 위험 없이 인라인 스크립트를 작동시킬 수 있습니다.

CSP와 Vue 스타일

Vue와 많은 UI 라이브러리는 실행 중에 스타일을 삽입합니다. style-src에서 논스나 해시를 사용하여 이를 허용하거나, CSS를 파일로 추출하여 style-src 'self'만으로 충분하게 하십시오.

Content-Security-Policy: style-src 'self';

개발 환경의 Vite CSP 논스 플러그인

Vite의 개발 서버는 스크립트를 삽입하므로 엄격한 CSP와 충돌할 수 있습니다. CSP 논스 플러그인은 개발 중 Vite가 삽입하는 태그에 일치하는 논스를 추가합니다.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

API를 위한 connect-src

connect-src를 사용하여 앱이 데이터를 가져올 수 있는 위치를 제한하십시오. 그러면 삽입된 코드가 공격자가 제어하는 도메인으로 데이터를 유출할 수 없습니다.

Content-Security-Policy: connect-src 'self' https://api.example.com;

보고 전용 모드

Content-Security-Policy-Report-Only를 사용하면 차단하지 않고 위반 사항만 보고하므로, 정책을 적용하기 전에 안전하게 배포하고 조정할 수 있습니다.

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

빠른 확인

XSS 방어를 강력하게 유지하려면 어떤 CSP 지시자 값을 피해야 합니까?

인터랙티브 레슨에서 답해보세요

요약

CSP는 허용되는 스크립트, 스타일 및 연결 출처를 제한하는 HTTP 헤더로, XSS가 발생하더라도 삽입된 코드를 차단합니다. unsafe-inline과 unsafe-eval을 피하고, 필요한 인라인 스크립트에는 응답마다 다른 논스를 사용하며, 개발 환경에서는 Vite CSP 논스 플러그인을 사용하십시오. 적용하기 전에 보고 전용 모드로 배포하십시오.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“Vue의 콘텐츠 보안 정책(CSP)” 강의는 무료인가요?

네 — “Vue의 콘텐츠 보안 정책(CSP)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vue의 콘텐츠 보안 정책(CSP)”에서 뭘 배우나요?

CSP 헤더, nonce 기반 스크립트, 해시 기반 정책과 Vite CSP 설정을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Vue의 콘텐츠 보안 정책(CSP)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기