메뉴
Usa esta skill cuando implementes seguridad en aplicaciones frontend: prevención de XSS, CSP, sanitización de input, CORS, almacenamiento seguro de tokens (httpOnly cookies en Next.js, memoria en SPA), headers de seguridad, env vars, y cross-reference con GRC skills.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Use this skill when working on frontend. Orchestrates specialized sub-skills covering architecture, components, rendering, styles, data fetching, testing, performance, and security. Stack: React 19+, Next.js 15+, Vite 6+, TypeScript strict, Tailwind CSS, pnpm.
Use this skill as the entry point for every software development task. Routes the agent to the correct sub-skills based on context: frontend, backend, architecture, CI/CD, Docker, Git, scripting and TypeScript. Automatically activates cross-cutting skills (clean-code-principles, typescript-patterns, git-usage) that must be present in every code interaction.
Usa esta skill cuando trabajes en frontend. Orquesta sub-skills especializadas que cubren arquitectura, componentes, rendering, estilos, data fetching, testing, performance y seguridad. Stack: React 19+, Next.js 15+, Vite 6+, TypeScript strict, Tailwind CSS, pnpm.
Usa esta skill como punto de entrada para toda tarea de desarrollo de software. Enruta al agente hacia las sub-skills correctas según el contexto: frontend, backend, architecture, CI/CD, Docker, Git, scripting y TypeScript. Activa automáticamente skills transversales (clean-code-principles, typescript-patterns, git-usage) que deben estar presentes en toda interacción de código.
Use this skill ALWAYS before adding, updating, or removing any dependency in a Node.js project. Applies to frontend, backend, and monorepos. Covers mandatory pnpm usage, exact pinning without carets, querying the latest stable version, post-install auditing, protection against compromised packages with free tools, and Dependabot for controlled updates.
Usa esta skill SIEMPRE antes de añadir, actualizar o eliminar cualquier dependencia en un proyecto Node.js. Aplica a frontend, backend y monorepo. Cubre pnpm obligatorio, pin exact sin carets, consulta de última versión estable, auditoría post-instalación, protección contra paquetes comprometidos con herramientas gratuitas, y configuración de Dependabot para actualizaciones controladas.
SOC 직업 분류 기준
| name | security-rules |
| description | Usa esta skill cuando implementes seguridad en aplicaciones frontend: prevención de XSS, CSP, sanitización de input, CORS, almacenamiento seguro de tokens (httpOnly cookies en Next.js, memoria en SPA), headers de seguridad, env vars, y cross-reference con GRC skills. |
| Skill | Cuándo activar |
|---|---|
owasp-top-10 | Siempre en cualquier desarrollo frontend que maneje input de usuario o autenticación. |
gdpr | Cuando el frontend capture datos personales, implemente cookies de tracking, o consentimiento. |
ccpa-cpra | Cuando se implemente opt-out de venta/compartición de datos o detección de señal GPC del navegador. |
fetching-rules | Cuando el frontend realice llamadas HTTP — contiene la implementación del apiClient (inyección de token, auto-clear 401, ApiError tipado). Es la única fuente de verdad para el API client. |
next.config (sección 3).dangerouslySetInnerHTML solo con DOMPurify. Validar href contra javascript: (sección 1).governance-risk-and-compliance → owasp-top-10 para checklist de vulnerabilidades.NEXT_PUBLIC_* ni VITE_* (sección 7).// React escapa HTML por defecto — seguro contra XSS
function UserGreeting({ name }: { name: string }) {
return <p>Hola, {name}</p>;
}
// Si NECESITAS renderizar HTML (markdown, CMS), sanitizar con DOMPurify:
import DOMPurify from 'dompurify';
function SafeContent({ html }: { html: string }) {
const sanitized = DOMPurify.sanitize(html, {
ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li', 'br'],
ALLOWED_ATTR: ['href', 'target', 'rel'],
});
return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}
// Validar href para evitar javascript: protocol
function SafeLink({ href, children }: { href: string; children: ReactNode }) {
const isValid = /^https?:\/\//.test(href) || href.startsWith('/');
if (!isValid) {
return <span>{children}</span>;
}
return (
<a href={href} rel="noopener noreferrer" target="_blank">
{children}
</a>
);
}
import { NextRequest, NextResponse } from 'next/server';
export function middleware(request: NextRequest) {
const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
const csp = [
`default-src 'self'`,
`script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
`style-src 'self' 'unsafe-inline'`,
`img-src 'self' blob: data: https:`,
`font-src 'self'`,
`connect-src 'self' ${process.env.NEXT_PUBLIC_API_URL}`,
`frame-ancestors 'none'`,
`base-uri 'self'`,
`form-action 'self'`,
].join('; ');
const response = NextResponse.next();
response.headers.set('Content-Security-Policy', csp);
response.headers.set('x-nonce', nonce);
return response;
}
// Pasar nonce a Scripts
import { headers } from 'next/headers';
import Script from 'next/script';
export default async function RootLayout({ children }: { children: ReactNode }) {
const headersList = await headers();
const nonce = headersList.get('x-nonce') ?? '';
return (
<html lang="es">
<body>
{children}
<Script src="https://analytics.example.com/script.js" nonce={nonce} />
</body>
</html>
);
}
const securityHeaders = [
{
key: 'X-DNS-Prefetch-Control',
value: 'on',
},
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload',
},
{
key: 'X-Frame-Options',
value: 'DENY',
},
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin',
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=(self)',
},
];
export default {
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
];
},
};
// Auth tokens en httpOnly cookies (NO localStorage)
import { cookies } from 'next/headers';
export async function loginAction(formData: FormData) {
const response = await authApi.login({
email: formData.get('email') as string,
password: formData.get('password') as string,
});
const cookieStore = await cookies();
cookieStore.set('session', response.token, {
httpOnly: true,
secure: true,
sameSite: 'lax',
maxAge: 60 * 60 * 24,
path: '/',
});
}
Nunca almacenar tokens en localStorage, sessionStorage, cookies sin httpOnly, ni URL query params. Implementar refresh token rotation: si un refresh token se usa dos veces, invalidar todos los tokens del usuario.
En un SPA puro donde no controlas el server (no puedes setear httpOnly cookies), el token se almacena en memoria (variable JavaScript, signal, o store de estado). Esto es más seguro que localStorage porque:
document.cookie o localStorage.getItem()// features/auth/services/auth.service.ts
import { signal } from '@preact/signals-react';
interface AuthState {
token: string | null;
user: { id: string; email: string; name: string } | null;
}
// El token vive SOLO en memoria — se pierde al cerrar/refrescar
const authState = signal<AuthState>({ token: null, user: null });
export function setAuth(token: string, user: AuthState['user']) {
authState.value = { token, user };
}
export function clearAuth() {
authState.value = { token: null, user: null };
}
export function getToken(): string | null {
return authState.value.token;
}
La implementación completa del apiClient (con ApiError tipado, inyección de token, auto-clear en 401 y normalización de errores) está en fetching-rules §6. Es la única fuente de verdad para el API client — no duplicar aquí.
Regla clave SPA: El token en memoria se pierde al refrescar la página. Si la API soporta refresh tokens, implementar un endpoint que devuelva un nuevo access token vía httpOnly cookie (set desde el backend). Si no hay refresh token, el usuario debe re-autenticarse.
import { z } from 'zod';
// Schema compartido (client + server)
export const commentSchema = z.object({
content: z
.string()
.min(1, 'El comentario no puede estar vacío')
.max(2000, 'Máximo 2000 caracteres')
.transform((val) => val.trim()),
parentId: z.string().uuid().optional(),
});
// Server Action — SIEMPRE re-validar
export async function createComment(_: unknown, formData: FormData) {
const parsed = commentSchema.safeParse({
content: formData.get('content'),
parentId: formData.get('parentId'),
});
if (!parsed.success) {
return { errors: parsed.error.flatten().fieldErrors };
}
// parsed.data es seguro — tipo inferido + sanitizado
await db.comment.create({ data: parsed.data });
}
const ALLOWED_ORIGINS = [
process.env.NEXT_PUBLIC_APP_URL!,
];
export async function OPTIONS(request: Request) {
const origin = request.headers.get('origin');
if (!origin || !ALLOWED_ORIGINS.includes(origin)) {
return new Response(null, { status: 403 });
}
return new Response(null, {
status: 204,
headers: {
'Access-Control-Allow-Origin': origin,
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
'Access-Control-Max-Age': '86400',
},
});
}
import { z } from 'zod';
const envSchema = z.object({
DATABASE_URL: z.string().url(),
NEXTAUTH_SECRET: z.string().min(32),
NEXT_PUBLIC_API_URL: z.string().url(),
});
export const env = envSchema.parse(process.env);
Reglas: NEXT_PUBLIC_* es visible en client (nunca secrets), sin prefijo es solo server. Validar con Zod al inicio (fail fast). .env.local en .gitignore, .env.example committeado.
dangerouslySetInnerHTML con input de usuario sin DOMPurify = XSS directo.eval(), new Function(), innerHTML con datos dinámicos = vector de ataque.Access-Control-Allow-Origin: '*' en producción expone la API a cualquier origen.localhost:5173 mientras la API suele correr en localhost:3000. CORS bloqueará las requests a menos que la API configure el origin correcto (ej: CORS_ORIGIN=http://localhost:5173). No usar proxy de Vite como workaround en producción — configurar CORS correctamente en el backend.NEXT_PUBLIC_* quedan expuestas en el bundle del cliente.target="_blank" sin rel="noopener noreferrer".console.log de datos sensibles en producción.