dhyun2(3주차): XSS 정리본 & 1~4장 내용 다이어그램

dhyun2/XSS/4. XSS.md

@@ -0,0 +1,144 @@
+# 5. XSS (Cross Site Scripting)
+
+웹 애플리케이션을 보호하기 위해 앞서 4장에서 살펴본 동일 출처 정책은 중요한 보안 메커니즘이지만, 이것만으로는 충분하지 않습니다. 특히 프론트엔드 JavaScript 설계 및 구현 오류로 인해 발생하는 XSS와 같은 수동적 공격에 대해서는 추가적인 보안 조치가 필요합니다. 이번 장에서는 XSS의 개념과 이에 대한 효과적인 대응 방안에 대해 자세히 알아보겠습니다.
+
+## 5.1 웹 애플리케이션 공격의 유형
+
+웹 애플리케이션을 대상으로 하는 공격은 크게 능동적 공격과 수동적 공격이라는 두 가지 패턴으로 구분됩니다.
+
+### 5.1.1 능동적 공격
+
+능동적 공격은 공격자가 웹 애플리케이션에 직접적으로 공격 코드를 전송하는 방식입니다. 예를 들어:
+
+- SQL 인젝션: 데이터베이스를 조작하기 위한 SQL 명령을 서버로 전송
+- OS 명령 인젝션: 운영체제를 조작하기 위한 명령을 서버로 전송
+
+이러한 공격은 다음과 같은 순서로 진행됩니다:
+
+1. 공격자가 공격 코드 입력
+2. 서버로 공격 코드 전송
+3. 서버 내에서 공격 코드가 실행되어 데이터 변경 등이 발생
+
+### 5.1.2 수동적 공격
+
+수동적 공격은 공격자가 준비한 피싱 사이트 등을 통해 웹 애플리케이션을 방문한 사용자가 의도치 않게 공격 코드를 실행하도록 유도하는 방식입니다. 주요 유형으로는:
+
+- XSS (Cross Site Scripting)
+- CSRF (Cross Site Request Forgery)
+- 클릭재킹 (Clickjacking)
+- 오픈 리다이렉트
+
+능동적 공격은 서버 측에서 대책을 세우면 되지만, 수동적 공격은 프론트엔드에서만 대응 가능한 부분이 있어 주의가 필요합니다.
+
+## 5.2 XSS의 상세 이해
+
+XSS는 웹 애플리케이션의 취약점을 이용하여 악성 스크립트를 실행하는 공격 기법입니다. 교차 출처 페이지에서 실행되는 JavaScript 공격은 동일 출처 정책에 의해 차단되지만, XSS는 공격 대상 페이지에서 직접 자바스크립트가 실행되므로 동일 출처 정책으로는 막을 수 없습니다.
+
+### 5.2.1 XSS의 작동 구조
+
+XSS는 HTML에 악성 스크립트를 삽입하여 사용자가 이를 실행하도록 만듭니다. 예를 들어, 검색 기능에서 사용자 입력값을 그대로 HTML에 삽입하면 XSS 위험이 있습니다.
+
+### 5.2.2 XSS의 세 가지 유형
+
+1. **반사형 XSS**
+
+   - 공격자가 준비한 함정에서 발생하는 요청에 악성 스크립트가 포함된 HTML을 서버가 생성하여 발생
+   - 일회성으로 발생하는 특징이 있음
+
+2. **저장형 XSS**
+
+   - 폼 등을 통해 제출된 악성 스크립트가 포함된 데이터가 서버에 저장
+   - 저장된 악성 스크립트가 웹 애플리케이션 페이지에 반영될 때 발생
+   - 지속적인 공격이 가능한 특징이 있음
+
+3. **DOM 기반 XSS**
+   - 프론트엔드 코드의 결함으로 발생
+   - 소스(예: location.hash)와 싱크(스크립트 실행 지점)로 구성
+   - 클라이언트 측에서만 발생하는 특징이 있음
+
+## 5.3 XSS 대응을 위한 구체적인 방안
+
+### 5.3.1 기본적인 보안 조치
+
+1. **문자열 이스케이프 처리**
+
+   ```html
+   < → &lt; > → &gt; & → &amp; " → &quot;
+   ```
+
+2. **HTML 속성값 처리**
+
+   ```html
+   <!-- 잘못된 예 -->
+   <input value="user-input" />
+
+   <!-- 올바른 예 -->
+   <input value="escaped-user-input" />
+   ```
+
+3. **URL 스키마 제한**
+
+   ```javascript
+   // URL이 http:// 또는 https://로 시작하는지 확인
+   function isValidUrl(url) {
+     return /^https?:\/\//i.test(url);
+   }
+   ```
+
+### 5.3.2 고급 보안 조치
+
+1. **안전한 DOM API 사용**
+
+   ```javascript
+   // 위험한 방법
+   element.innerHTML = userInput;
+
+   // 안전한 방법
+   element.textContent = userInput;
+   ```
+
+2. **쿠키 보호**
+
+   ```javascript
+   // 서버 측 설정
+   Set-Cookie: sessionId=abc123; HttpOnly
+   ```
+
+3. **CSP(Content Security Policy) 설정**
+
+   ```html
+   <!-- HTTP 헤더 방식 -->
+   Content-Security-Policy: default-src 'self'
+
+   <!-- meta 태그 방식 -->
+   <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
+   ```
+
+4. **DOMPurify 활용**
+
+   ```javascript
+   const clean = DOMPurify.sanitize(userInput);
+   ```
+
+### 5.3.3 프레임워크 활용
+
+많은 현대 웹 프레임워크들은 자동 XSS 방지 기능을 제공합니다:
+
+- React: JSX에서 자동 이스케이프
+- Vue: 템플릿 문법에서 자동 이스케이프
+- Angular: 템플릿 바인딩에서 자동 이스케이프
+
+### 5.3.4 모니터링 및 테스트
+
+1. **CSP 리포트 모드 활용**
+
+   ```html
+   Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
+   ```
+
+2. **정기적인 보안 감사**
+   - 자동화된 보안 스캐너 활용
+   - 수동 코드 리뷰 수행
+   - 침투 테스트 실시
+
+이러한 다층적인 방어 전략을 통해 XSS 공격으로부터 웹 애플리케이션을 효과적으로 보호할 수 있습니다. 특히 프론트엔드 개발자는 DOM 조작 시 안전한 API를 사용하고, 사용자 입력값을 적절히 검증하며, 프레임워크의 보안 기능을 최대한 활용하는 것이 중요합니다.

dhyun2/XSS/react에서의 XSS 대응.md

@@ -0,0 +1,154 @@
+# React의 XSS 방어 메커니즘
+
+React는 [공식 문서](https://legacy.reactjs.org/docs/dom-elements.html#security-notes)에서 설명하는 기본적인 XSS 방어 기능을 제공합니다.
+
+## 1. JSX에서의 자동 이스케이프
+
+### 1.1 텍스트 콘텐츠 이스케이프
+React는 JSX 내의 모든 값을 렌더링하기 전에 이스케이프 처리합니다.
+
+```javascript
+// 원본 코드
+const userProvidedString = '<script>alert("hi")</script>';
+return <h1>{userProvidedString}</h1>;
+
+// 렌더링 결과
+<h1>&lt;script&gt;alert("hi")&lt;/script&gt;</h1>
+```
+
+### 1.2 속성 바인딩 이스케이프
+React는 모든 속성 값도 자동으로 이스케이프 처리합니다.
+
+```javascript
+// 원본 코드
+const userProvidedString = '" onclick="alert(\'hi\')';
+return <h1 title={userProvidedString}>hello</h1>;
+
+// 렌더링 결과
+<h1 title="&quot; onclick=&quot;alert('hi')">hello</h1>
+```
+
+## 2. React의 DOM 처리
+
+### 2.1 안전한 값 처리
+```javascript
+// 안전한 방법 (React의 기본 동작)
+function SafeComponent({ userInput }) {
+  return <div>{userInput}</div>;  // 자동으로 이스케이프
+}
+
+// 위험한 방법 (사용 주의)
+function DangerousComponent({ userInput }) {
+  return <div dangerouslySetInnerHTML={{ __html: userInput }} />;
+}
+```
+
+### 2.2 React의 이벤트 처리
+```javascript
+// React의 안전한 이벤트 처리
+function SafeButton({ onClick }) {
+  // React는 이벤트 핸들러를 문자열이 아닌 함수로 처리
+  return <button onClick={onClick}>Click me</button>;
+}
+
+// 안티패턴 (직접 HTML 문자열 사용)
+function UnsafeButton({ onClickStr }) {
+  // 절대 이렇게 하지 마세요!
+  return <button onClick={eval(onClickStr)}>Click me</button>;
+}
+```
+
+## 3. 주의가 필요한 기능
+
+### 3.1 dangerouslySetInnerHTML
+```javascript
+// 위험! XSS 취약점 가능성 있음
+function Component({ html }) {
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+// 대신 DOMPurify 같은 라이브러리 사용 권장
+import DOMPurify from 'dompurify';
+
+function SafeComponent({ html }) {
+  return <div dangerouslySetInnerHTML={{ 
+    __html: DOMPurify.sanitize(html) 
+  }} />;
+}
+```
+
+### 3.2 href 속성 처리
+```javascript
+// React는 javascript: URLs을 자동으로 차단
+function SafeLink({ url }) {
+  return <a href={url}>Click me</a>;
+}
+
+// 추가 검증이 필요한 경우
+function ValidatedLink({ url }) {
+  const isValid = /^(https?:\/\/)/.test(url);
+  return isValid ? <a href={url}>Click me</a> : null;
+}
+```
+
+## 4. 추가 보안 조치
+
+### 4.1 타입 검사로 보안 강화
+```typescript
+// TypeScript를 사용한 추가 보안
+interface SafeProps {
+  content: string;
+  allowedTags?: string[];
+}
+
+function SafeComponent({ content, allowedTags }: SafeProps) {
+  const sanitizedContent = sanitizeContent(content, allowedTags);
+  return <div>{sanitizedContent}</div>;
+}
+```
+
+### 4.2 런타임 보안 검사
+```javascript
+// 런타임에서 값 검증
+function SafeRender({ content }) {
+  const isSafe = React.useMemo(() => validateContent(content), [content]);
+
+  if (!isSafe) {
+    console.warn('Potentially unsafe content detected');
+    return null;
+  }
+
+  return <div>{content}</div>;
+}
+```
+
+## 5. 서버 사이드 렌더링(SSR) 보안
+
+### 5.1 Next.js에서의 XSS 방지
+```javascript
+// pages/api/data.js
+export default function handler(req, res) {
+  // 데이터 검증
+  const sanitizedData = sanitizeServerData(req.body);
+  res.json({ data: sanitizedData });
+}
+
+// pages/index.js
+export default function Page({ data }) {
+  // 서버에서 받은 데이터도 자동 이스케이프
+  return <div>{data}</div>;
+}
+```
+
+### 5.2 hydration 보안
+```javascript
+// React 18의 안전한 hydration
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+React의 XSS 방어는 Vue와 마찬가지로 여러 계층에서 이루어지며, JSX를 통한 선언적 렌더링과 자동 이스케이프 처리가 핵심입니다. 특히 React는 `dangerouslySetInnerHTML`과 같은 위험한 기능을 사용할 때 명시적인 경고를 제공하여 개발자가 보안 위험을 인지하도록 합니다.

dhyun2/XSS/vue에서의 XSS 대응.md

@@ -0,0 +1,97 @@
+# Vue.js의 XSS 방어 메커니즘
+
+Vue.js는 [공식 보안 가이드](https://vuejs.org/guide/best-practices/security.html#what-vue-does-to-protect-you)에서 다음과 같은 XSS 방어 메커니즘을 제공합니다.
+
+## 1. 콘텐츠 자동 이스케이프
+
+### 1.1 템플릿 내용 이스케이프
+
+Vue는 모든 템플릿 내용을 자동으로 이스케이프 처리합니다.
+
+```javascript
+// 원본 코드
+const userProvidedString = '<script>alert("hi")</script>'
+<h1>{{ userProvidedString }}</h1>
+
+// 빌드 후 결과
+<h1>&lt;script&gt;alert(&quot;hi&quot;)&lt;/script&gt;</h1>
+```
+
+실제 코드를보면 아래와 같이 el.nodeValue & el.textContent 사용합니다. [상세 코드](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/nodeOps.ts#L77)
+
+```typescript
+export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
+  // ... 다른 코드들 ...
+
+  setText: (node, text) => {
+    node.nodeValue = text;
+  },
+
+  setElementText: (el, text) => {
+    el.textContent = text;
+  },
+
+  // ... 다른 코드들 ...
+};
+```
+
+### 1.2 속성 바인딩 이스케이프
+
+Vue는 동적 속성 바인딩도 자동으로 이스케이프 처리합니다.
+
+```javascript
+// 원본 코드
+const userProvidedString = '" onclick="alert(\'hi\')'
+<h1 :title="userProvidedString">
+  hello
+</h1>
+
+// 빌드 후 결과
+<h1 title="&quot; onclick=&quot;alert('hi')">
+  hello
+</h1>
+```
+
+실제 코드를보면 아래와 같이 el.setAttribute를 사용합니다. [상세 코드](https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/modules/attrs.ts#L28)
+
+```typescript
+export function patchAttr(...){
+...
+      el.setAttribute(
+        key,
+        isBoolean ? '' : isSymbol(value) ? String(value) : value,
+      )
+
+...
+}
+```
+
+## 2. 네이티브 브라우저 API 사용
+
+Vue는 `textContent`와 `setAttribute` DOM API를 사용하여 콘텐츠를 안전하게 처리합니다.
+
+### 2.1 지원 브라우저
+
+- Chrome 1+
+- Firefox 3.5+
+- Safari 4+
+- Internet Explorer 9+
+- Opera 10+
+
+### 2.2 안전한 API 사용 예시
+
+```javascript
+// 안전한 방법 (Vue가 사용)
+element.textContent = userInput; // 텍스트 콘텐츠 처리
+element.setAttribute('title', value); // 속성 처리
+
+// 위험한 방법
+element.innerHTML = userInput; // HTML로 해석될 수 있음
+```
+
+### 2.3 네이티브 API의 장점
+
+1. 자동 이스케이프 처리
+2. HTML 파싱 없음 (성능상 이점)
+3. XSS 공격 방지
+4. 브라우저 네이티브 구현으로 안정성 보장