Back to Details

security

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

JavaScript Security Skill

JavaScript安全技能

Quick Reference Card

快速参考卡片

XSS Prevention

XSS防范

javascript
// DANGEROUS - Never do this
element.innerHTML = userInput;

// SAFE - Use textContent
element.textContent = userInput;

// SAFE - Sanitize HTML
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

// SAFE - Create elements
const div = document.createElement('div');
div.textContent = userInput;
parent.appendChild(div);
javascript
// 危险操作 - 切勿这样做
element.innerHTML = userInput;

// 安全做法 - 使用textContent
element.textContent = userInput;

// 安全做法 - 清理HTML
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

// 安全做法 - 创建元素
const div = document.createElement('div');
div.textContent = userInput;
parent.appendChild(div);

Input Validation

输入验证

javascript
// Server-side validation is required
// Client-side is for UX only

function validateEmail(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

function sanitizeInput(input) {
  return input
    .trim()
    .replace(/[<>]/g, ''); // Basic, use library for real apps
}

// Use schema validation
import { z } from 'zod';

const UserSchema = z.object({
  email: z.string().email(),
  age: z.number().min(0).max(150)
});

UserSchema.parse(userData); // Throws if invalid
javascript
// 必须进行服务端验证
// 客户端验证仅用于提升用户体验

function validateEmail(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

function sanitizeInput(input) {
  return input
    .trim()
    .replace(/[<>]/g, ''); // 基础清理，实际项目请使用专业库
}

// 使用Schema验证
import { z } from 'zod';

const UserSchema = z.object({
  email: z.string().email(),
  age: z.number().min(0).max(150)
});

UserSchema.parse(userData); // 验证不通过时抛出错误

Content Security Policy

内容安全策略

html
<!-- In HTML head or HTTP header -->
<meta http-equiv="Content-Security-Policy"
  content="default-src 'self';
           script-src 'self' https://trusted.com;
           style-src 'self' 'unsafe-inline';">
html
<!-- 在HTML头部或HTTP头中设置 -->
<meta http-equiv="Content-Security-Policy"
  content="default-src 'self';
           script-src 'self' https://trusted.com;
           style-src 'self' 'unsafe-inline';">

Secure Storage

安全存储

javascript
// NEVER store sensitive data in localStorage
// Use httpOnly cookies for tokens

// If you must use localStorage:
// - Don't store tokens
// - Don't store PII
// - Encrypt if necessary

// Secure cookie settings
document.cookie = 'token=abc; Secure; HttpOnly; SameSite=Strict';
javascript
// 切勿在localStorage中存储敏感数据
// 令牌请使用HttpOnly Cookie

// 若必须使用localStorage：
// - 不要存储令牌
// - 不要存储个人身份信息（PII）
// - 必要时进行加密

// 安全Cookie设置
document.cookie = 'token=abc; Secure; HttpOnly; SameSite=Strict';

CSRF Protection

CSRF防护

javascript
// Include CSRF token in requests
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

fetch('/api/action', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});
javascript
// 在请求中包含CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

fetch('/api/action', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

Dependency Security

依赖项安全

bash
undefined
bash
undefined

Audit dependencies

审计依赖项

npm audit
npm audit

Fix vulnerabilities

修复漏洞

npm audit fix
npm audit fix

Check specific package

检查特定包

npm audit --package-lock-only
npm audit --package-lock-only

Use Snyk for deeper analysis

使用Snyk进行深度分析

npx snyk test
undefined
npx snyk test
undefined

Common Vulnerabilities

常见漏洞

VulnerabilityPrevention
XSSUse textContent, sanitize
CSRFUse tokens, SameSite cookies
InjectionParameterized queries
Prototype pollutionFreeze prototypes
Open redirectValidate URLs
漏洞类型防范措施
XSS使用textContent、内容清理
CSRF使用令牌、SameSite Cookie
注入攻击参数化查询
原型污染冻结原型
开放重定向验证URL

Prototype Pollution Prevention

原型污染防范

javascript
// Vulnerable
function merge(target, source) {
  for (const key in source) {
    target[key] = source[key]; // Can pollute __proto__
  }
}

// Safe
function safeMerge(target, source) {
  for (const key of Object.keys(source)) {
    if (key === '__proto__' || key === 'constructor') continue;
    target[key] = source[key];
  }
}

// Or use Object.assign / spread
const merged = { ...target, ...source };
javascript
// 存在漏洞的实现
function merge(target, source) {
  for (const key in source) {
    target[key] = source[key]; // 可能污染__proto__
  }
}

// 安全实现
function safeMerge(target, source) {
  for (const key of Object.keys(source)) {
    if (key === '__proto__' || key === 'constructor') continue;
    target[key] = source[key];
  }
}

// 或使用Object.assign/扩展运算符
const merged = { ...target, ...source };

Troubleshooting

故障排查

Security Checklist

安全检查清单

  • User input sanitized
  • HTTPS enforced
  • CSP headers set
  • Dependencies audited
  • Sensitive data encrypted
  • Auth tokens in httpOnly cookies
  • CSRF protection enabled
  • Error messages don't leak info
  • 用户输入已清理
  • 已强制启用HTTPS
  • 已设置CSP头
  • 已审计依赖项
  • 敏感数据已加密
  • 认证令牌存储在HttpOnly Cookie中
  • 已启用CSRF防护
  • 错误信息未泄露敏感信息

Debug Approach

调试方法

javascript
// Log security events
window.addEventListener('securitypolicyviolation', (e) => {
  console.error('CSP violation:', e.blockedURI);
});

// Check for XSS vectors
const testInput = '<script>alert(1)</script>';
// If this executes, you have XSS
javascript
// 记录安全事件
window.addEventListener('securitypolicyviolation', (e) => {
  console.error('CSP违规:', e.blockedURI);
});

// 检查XSS风险
const testInput = '<script>alert(1)</script>';
// 若该代码执行，则存在XSS漏洞

Production Patterns

生产环境模式

JWT Handling

JWT处理

javascript
// Store in memory, not localStorage
let accessToken = null;

async function login(credentials) {
  const response = await fetch('/api/login', {
    method: 'POST',
    credentials: 'include', // For httpOnly refresh token
    body: JSON.stringify(credentials)
  });
  const { accessToken: token } = await response.json();
  accessToken = token; // Memory only
}

// Refresh before expiry
async function refreshToken() {
  const response = await fetch('/api/refresh', {
    credentials: 'include'
  });
  const { accessToken: token } = await response.json();
  accessToken = token;
}
javascript
// 存储在内存中，而非localStorage
let accessToken = null;

async function login(credentials) {
  const response = await fetch('/api/login', {
    method: 'POST',
    credentials: 'include', // 用于HttpOnly刷新令牌
    body: JSON.stringify(credentials)
  });
  const { accessToken: token } = await response.json();
  accessToken = token; // 仅存储在内存
}

// 过期前刷新令牌
async function refreshToken() {
  const response = await fetch('/api/refresh', {
    credentials: 'include'
  });
  const { accessToken: token } = await response.json();
  accessToken = token;
}

URL Validation

URL验证

javascript
function isSafeRedirect(url) {
  try {
    const parsed = new URL(url, window.location.origin);
    return parsed.origin === window.location.origin;
  } catch {
    return false;
  }
}
javascript
function isSafeRedirect(url) {
  try {
    const parsed = new URL(url, window.location.origin);
    return parsed.origin === window.location.origin;
  } catch {
    return false;
  }
}

Related

相关内容

  • Agent 08: Testing & Quality (detailed learning)
  • Skill: ecosystem: npm audit
  • Skill: patterns: Secure patterns
  • Agent 08：测试与质量（深入学习）
  • Skill: 生态系统：npm audit
  • Skill: 模式：安全模式