스킬 Frontend Security Coder
🔒

Frontend Security Coder

안전

프런트엔드 코드 보안 강화

프런트엔드 애플리케이션은 XSS, CSRF 및 기타 공격에 취약합니다. 이 스킬은 안���한 코드 패턴을 생성하고 웹 애플리케이션의 취약점을 식별하여 일반적인 공격 벡터로부터 보호합니다.

지원: Claude Codex Code(CC)
🥉 73 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"Frontend Security Coder" 사용 중입니다. 사용자 입력을 sanitize하는 XSS 안전 React 입력 컴포넌트 생성

예상 결과:

DOMPurify를 사용�� 적절한 입력 sanitize, 출력 인코딩, 보안 중심 prop 검증이 포함된 React 컴포넌트입니다.

"Frontend Security Coder" 사용 중입니다. JavaScript 애플리케이션용 CSRF 보호 코드 작성

예상 결과:

CSRF 토큰을 자동으로 첨부하고, 응답을 검증하며, 토큰 새로고침을 처리하는 fetch 래퍼가 포함된 JavaScript 모듈입니다.

"Frontend Security Coder" 사용 중입니다. SPA용 보안 인증 패턴 생성

예상 결과:

httpOnly 쿠키, 보안 저장소가 있는 새로고침 토큰, 자동 세션 관리를 사용하는 완전한 인증 모듈입니다.

보안 감사

안전
v1 • 2/25/2026

This is a prompt-only skill that generates frontend security content. No executable code was detected. The skill provides security guidance through natural language prompts without any system-level access, network calls, or file operations. Risk score is 0/100.

0
스캔된 파일
0
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
50
커뮤니티
100
보안
83
사양 준수

만들 수 있는 것

보안 컴포넌트 개발

내장된 XSS 보호 및 입력 검증이 포함된 보안 인식 React, Vue 또는 Angular 컴포넌트 생성

보안 코드 검토

구체적인 취약점 식별 및 remediation 가이드가 포함된 프런트엔드 코드 스니펫의 상세 보안 분석 받기

보안 모범 사례 학습

생성된 예제 및 설명을 통해 프런트엔드 개발용 보안 코딩 패턴 및 사례 학습

이 프롬프트를 사용해 보세요

기본 XSS 보호 
사용자 입력을 sanitize하고 스크립트 인젝션 공격을 방지하는 [FRAMEWORK]의 XSS 안전 입력 컴포넌트를 생성하세요. 적절한 이스케이프 함수를 포함하세요.
CSRF 토큰 핸들러 
프런트엔드 애플리케이션용 CSRF 토큰 관리 모듈을 작성하세요. 토큰 검색, 요청 시 검증, 자동 토큰 새로고침 로직을 포함하세요.
보안 인증 플로우 
단일 페이지 애플리케이션용 보안 인증 플로우 패턴을 생성하세요. 토큰 저장 모범 사례, 새로고침 토큰 처리, 세션 시간초과 로직을 포함하세요.
CSP 구성 가이드 
현대 웹 애플리케이션용 포괄적인 콘텐츠 보안 정책 구성을 ��성하세요. 스크립트, 스타일, 이미지 및 API 호출용 지시문을 포함하세요.

모범 사례

  • 클라이언트 측 검증이 존재하더라도 클라이언트 및 서버 측 모두에서 항상 사용자 입력을 검증하고 sanitize하세요
  • 사용자 정의 이스케이프 함수를 작성하는 대신 HTML sanitize에 DOMPurify와 같은 현대 보안 라이브러리를 사용하세요
  • XSS 공격에 대한 추가 방어 계층을 제공하기 위해 콘텐츠 보안 정책 헤더를 구현하세요

피하기

  • sanitize 없이 사용자 제공 데이터로 innerHTML 사용 - 이는 직접적인 XSS 취약점을 만듭니다
  • httpOnly 쿠키 대신 localStorage에 민감한 토큰 저장 - 토큰이 JavaScript에 접근 가능합니다
  • 복잡성이 추가된다고 해서 API 엔드포인트에 대한 CSRF 보호 비활성화 - 이는 애플리케이션을 크로스사이트 요청 위조에 노출시킵니다

자주 묻는 질문

이 스킬은 기존 코드 베이스의 취약점을 스캔하나요?
아니요, ��� 스킬은 프롬프트에서 보안 중심 코드와 패턴을 생성합니다. 외부 코드 베이스를 분석하지 않습니다.
이 스킬은 보안 감사를 대체할 수 있나요?
아니요, 이 스킬은 코딩 가이드와 패턴을 제공합니다. 전문 보안 감사 또는 침투 테스트를 대체할 수 없습니다.
이 스킬은 어떤 프레임워크를 지원하나요?
이 스킬은 React, Vue, Angular, vanilla JavaScript 및 기타 인기 프런트엔드 프레임워크용 코드를 생성할 수 있습니다.
생성된 코드는 프런트엔드와 백엔드 모두에서 작동하나요?
스킬은 프런트엔드 보안 패턴에 중점을 둡니다. 백엔드 보안은 이 스킬에서 다루지 않는 서버 측 구현이 필요합니다.
Claude Code 또는 Codex와 함께 사용하는 방법은?
스킬을 활성화하고 필요한 보안 패턴에 대한 구체적인 프롬프트를 제공하세요. 스킬이 적절한 코드와 설명을 생성합니다.
보안 권장사항이 최신인가요?
스킬은 확립된 보안 사례를 기반으로 권장사항을 생성합니다. 항상 현재 보안 표준 및 OWASP 가이드라인을 통해 검증하세요.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-security-coder

참조

main

파일 구조

📄 SKILL.md