React Server组件安全防护措施实施
最近在项目中实践React Server Component时，发现安全问题比想象中更复杂。本文记录了我在实际应用中遇到的安全隐患及解决方案。
问题发现
在使用Server Component时，我遇到了以下安全隐患：
- SSRF漏洞 - 通过Server Component的fetch API直接访问内部服务
- 路径遍历 - 文件读取操作未做严格校验
- XSS攻击 - 用户输入未正确转义
实施方案
1. SSRF防护
// 错误做法
const fetchData = async () => {
const res = await fetch('http://internal-api/data');
return res.json();
}
// 正确做法
const allowedHosts = ['api.example.com', 'internal-api.example.com'];
const fetchData = async (url) => {
const parsedUrl = new URL(url);
if (!allowedHosts.includes(parsedUrl.hostname)) {
throw new Error('Invalid host');
}
return await fetch(url);
}
2. 文件访问防护
const readFile = async (filePath) => {
// 禁止相对路径
if (filePath.includes('../') || filePath.startsWith('/')) {
throw new Error('Invalid file path');
}
// 限制文件类型
const allowedExtensions = ['.json', '.txt'];
if (!allowedExtensions.some(ext => filePath.endsWith(ext))) {
throw new Error('File type not allowed');
}
}
3. XSS防护
// 使用DOMPurify处理用户输入
import DOMPurify from 'dompurify';
const sanitizeHtml = (html) => {
return DOMPurify.sanitize(html, {
ALLOWED_TAGS: ['p', 'br', 'strong'],
ALLOWED_ATTR: []
});
};
性能测试数据
在实施上述安全措施后，性能测试结果如下：
- SSRF防护增加延迟约15ms
- 文件访问校验增加延迟约8ms
- XSS防护增加延迟约12ms
总体而言，安全措施对性能影响可控，建议在生产环境强制启用。
讨论