相关法律法规与合规要求

前端开发中，安全合规是保障用户数据和业务稳定性的核心环节。随着数据保护法规的完善，开发者需严格遵循相关法律和技术规范，从代码层面规避风险。

数据隐私保护法规

GDPR（通用数据保护条例）

欧盟《通用数据保护条例》要求对用户数据明确授权。前端需实现：

1. 用户数据收集前弹出明确同意弹窗
2. 提供数据访问/删除接口

// GDPR合规的Cookie同意组件
class CookieConsent extends React.Component {
  state = { showModal: true };

  handleAccept = () => {
    setAnalyticsCookies(true);
    this.setState({ showModal: false });
  };

  render() {
    return this.state.showModal && (
      <div className="gdpr-modal">
        <p>我们使用Cookie提升体验</p>
        <button onClick={this.handleAccept}>同意</button>
        <button onClick={this.handleReject}>拒绝</button>
      </div>
    );
  }
}

CCPA（加州消费者隐私法案）

美国加州法规要求：

• 提供"Do Not Sell My Personal Information"链接
• 用户请求数据时需在45天内响应

<!-- CCPA合规元素 -->
<footer>
  <a href="/ccpa-request" id="ccpa-link">
    不要出售我的个人信息
  </a>
</footer>

安全传输规范

HTTPS强制实施

根据PCI DSS标准：

1. 所有表单提交必须使用TLS 1.2+
2. 混合内容自动升级

# Nginx强制HTTPS配置
server {
  listen 80;
  server_name example.com;
  return 301 https://$host$request_uri;
}

CSP（内容安全策略）

防御XSS攻击的合规要求：

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://trusted.cdn.com;
  style-src 'self' 'unsafe-inline';
  img-src * data:;

用户输入处理规范

OWASP Top 10合规

1. 所有用户输入必须消毒
2. 输出编码防止XSS

// 输入消毒示例
function sanitizeInput(input) {
  return input
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&#39;');
}

// React自动转义示例
function UserProfile({ bio }) {
  return <div>{bio}</div>; // JSX自动转义HTML
}

密码存储规范

根据NIST SP 800-63B：

// 前端密码强度验证
function validatePassword(pwd) {
  const minLength = 12;
  const hasUpper = /[A-Z]/.test(pwd);
  const hasNumber = /\d/.test(pwd);
  return pwd.length >= minLength && hasUpper && hasNumber;
}

审计与日志记录

数据访问日志

符合ISO 27001要求的关键操作记录：

// 关键操作日志
function logDataAccess(userId, action) {
  fetch('/api/audit-log', {
    method: 'POST',
    body: JSON.stringify({
      timestamp: new Date().toISOString(),
      user: userId,
      action: action,
      ip: getClientIP()
    })
  });
}

第三方服务合规

使用SDK时需验证：

// 合规的Google Analytics加载
if (userConsent.given) {
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID', { 
    anonymize_ip: true,
    cookie_expires: 3600 
  });
}

跨域资源共享(CORS)

安全头部配置

根据OWASP安全标准：

Access-Control-Allow-Origin: https://trusted.domain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

预检请求处理

// Express中间件示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', ALLOWED_ORIGINS);
  res.header('Access-Control-Allow-Credentials', 'true');
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    return res.status(204).json({});
  }
  next();
});

漏洞披露政策

安全响应头

合规性要求的保护措施：

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin

漏洞报告通道

<!-- 页面底部添加报告链接 -->
<footer>
  <a href="mailto:security@example.com">报告安全问题</a>
</footer>

持续合规监测

自动化安全检查

集成到CI/CD流程：

# GitHub Actions示例
name: Security Scan
on: [push]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm audit
      - run: npx eslint --plugin security

依赖项合规审查

# 检查许可证合规性
npx license-checker --summary --failOn GPL