测试文章 10 - Web 安全最佳实践

1
// 使用 DOMPurify 清理 HTML
2
import DOMPurify from 'dompurify';
3

4
const clean = DOMPurify.sanitize(dirtyHtml);
5

6
// React 自动转义
7
function Component({ userInput }) {
8
  return <div>{userInput}</div>; // 自动转义
9
}

1
<meta http-equiv="Content-Security-Policy"
2
      content="default-src 'self';
3
               script-src 'self' 'unsafe-inline';
4
               style-src 'self' 'unsafe-inline';
5
               img-src 'self' data: https:;
6
               connect-src 'self' https://api.example.com;">

1
// 服务端生成 token
2
app.use((req, res, next) => {
3
  res.locals.csrfToken = generateToken();
4
  next();
5
});
6

7
// 前端请求携带 token
8
fetch('/api/data', {
9
  method: 'POST',
10
  headers: {
11
    'X-CSRF-Token': csrfToken,
12
    'Content-Type': 'application/json',
13
  },
14
  body: JSON.stringify(data),
15
});

1
// 使用 Helmet 设置安全头部
2
const helmet = require('helmet');
3

4
app.use(helmet({
5
  contentSecurityPolicy: true,
6
  crossOriginEmbedderPolicy: true,
7
  crossOriginOpenerPolicy: true,
8
  crossOriginResourcePolicy: true,
9
  dnsPrefetchControl: true,
10
  frameguard: { action: 'deny' },
11
  hidePoweredBy: true,
12
  hsts: true,
13
  ieNoOpen: true,
14
  noSniff: true,
15
  originAgentCluster: true,
16
  permittedCrossDomainPolicies: true,
17
  referrerPolicy: true,
18
  xssFilter: true,
19
}));

1
# npm audit
2
npm audit
3

4
# 自动修复
5
npm audit fix
6

7
# 使用 Snyk
8
npx snyk test