frontend-mobile-security-xss-scan
프론트엔드 코드 XSS 취약점 스캔
이 스킬은 개발자가 React, Vue, Angular 및 Vanilla JavaScript 코드에서 Cross-Site Scripting(XSS) 취약점을 식별하고, 실행 가능한 수정 사항과 안전한 코딩 패턴을 제공하는 데 도움을 줍니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-mobile-security-xss-scan" 사용 중입니다. Scan this code for XSS: element.innerHTML = userInput;
예상 결과:
## XSS 취약점 발견
**심각도:** 심각
**유형:** 안전하지 않은 HTML 조작
**위치:** 1번째 줄
**CWE:** CWE-79
**설명:** 사용자가 제어하는 데이터가 innerHTML에 할당되어 XSS 위험이 발생합니다.
**수정:** 일반 텍스트의 경우 element.textContent를 사용하거나, DOMPurify로 살균 처리하세요:
```javascript
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);
```
"frontend-mobile-security-xss-scan" 사용 중입니다. Check this React code: <div dangerouslySetInnerHTML={{__html: content}} />
예상 결과:
## React XSS 위험 발견
**심각도:** 높음
**유형:** React 안전하지 않은 HTML 렌더링
**위치:** 컴포넌트
**문제:** 살균 처리 없이 dangerouslySetInnerHTML이 사용되었습니다.
**수정:** 렌더링 전에 살균 처리하세요:
```javascript
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(content)}} />
```
"frontend-mobile-security-xss-scan" 사용 중입니다. Find XSS issues in: <a href={userUrl}>Link</a>
예상 결과:
## URL 주입 위험 발견
**심각도:** 높음
**유형:** URL 주입
**문제:** 검증 없이 href 속성에 사용자 제공 URL이 사용되었습니다.
**수정:** URL을 검증하고 살균 처리하세요:
```javascript
const safeUrl = url.startsWith('http://') || url.startsWith('https://')
? url
: '#';
```
보안 감사
안전This is a legitimate defensive security skill for XSS vulnerability detection. The static analyzer flagged patterns are educational examples of vulnerable code that the skill teaches users how to detect. These patterns include innerHTML usage, fs.readFile for scanning files, and security best practices - all defensive security content, not malicious code. The skill provides guidance on identifying and fixing XSS vulnerabilities in frontend codebases.
중간 위험 문제 (1)
낮은 위험 문제 (1)
위험 요인
⚡ 스크립트 포함 (1)
📁 파일 시스템 액세스 (1)
품질 점수
만들 수 있는 것
웹 애플리케이션 보안 감사
프로덕션 배포 전에 React 또는 Vue 코드베이스를 스캔하여 XSS 취약점을 식별하고 수정합니다.
CI/CD 보안 통합
빌드 파이프라인에 XSS 스캔을 통합하여 배포 전에 취약점을 발견합니다.
안전한 코드 리뷰 어시스턴트
개발 중 코드 변경 사항에 대한 보안 문제를 검토하는 코딩 동반자로 사용합니다.
이 프롬프트를 사용해 보세요
이 JavaScript 코드에서 XSS 취약점을 스캔하세요: ``` [PASTE CODE HERE] ``` innerHTML 사용, document.write 호출 또는 살균 처리되지 않은 사용자 입력 렌더링을 식별하세요.
이 React 컴포넌트에서 XSS 취약점을 검토하세요: ``` [PASTE REACT CODE HERE] ``` dangerouslySetInnerHTML 사용, 이벤트 핸들러 주입 및 props 기반 데이터 처리를 확인하세요.
다음 코드베이스에서 종합적인 XSS 보안 감사를 수행하세요. 심각도 수준, CWE 참조 및 권장 수정 사항을 포함하세요: ``` [PASTE CODE HERE] ```
이 취약할 수 있는 코드 패턴의 안전한 대안은 무엇인가요? ``` [PASTE VULNERABLE CODE] ``` DOMPurify 또는 프레임워크 안전 메서드를 사용한 구체적인 수정 사항을 제공하세요.
모범 사례
- DOMPurify 또는 유사한 라이브러리를 사용하여 HTML을 렌더링하기 전에 항상 사용자 입력을 살균 처리하세요
- 일반 텍스트 콘텐츠를 렌더링할 때 innerHTML 대신 textContent를 선호하세요
- href 또는 location에 할당하기 전에 URL 프로토콜(http, https)을 검증하고 화이트리스트에 추가하세요
피하기
- 살균 처리 없이 직접 사용자 입력과 함께 innerHTML 사용
- DOMPurify 살균 처리 없이 dangerouslySetInnerHTML 사용
- 검증 없이 location.href에 사용자 제어 URL 할당