138 lines
3.0 KiB
Python
138 lines
3.0 KiB
Python
|
"""
|
|||
|
|
React 框架安全知识
|
|||
|
|
"""
|
|||
|
|
|
|||
|
|
from ..base import KnowledgeDocument, KnowledgeCategory
|
|||
|
|
|
|||
|
|
|
|||
|
|
REACT_SECURITY = KnowledgeDocument(
|
|||
|
|
id="framework_react",
|
|||
|
|
title="React Security",
|
|||
|
|
category=KnowledgeCategory.FRAMEWORK,
|
|||
|
|
tags=["react", "javascript", "frontend", "jsx"],
|
|||
|
|
content="""
|
|||
|
|
React 默认对XSS有较好的防护，但仍有一些需要注意的安全问题。
|
|||
|
|
|
|||
|
|
## 安全特性
|
|||
|
|
1. JSX自动转义
|
|||
|
|
2. 虚拟DOM隔离
|
|||
|
|
|
|||
|
|
## 常见漏洞模式
|
|||
|
|
|
|||
|
|
### dangerouslySetInnerHTML
|
|||
|
|
```jsx
|
|||
|
|
// 危险 - 直接渲染HTML
|
|||
|
|
function Comment({ content }) {
|
|||
|
|
return <div dangerouslySetInnerHTML={{ __html: content }} />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全 - 使用DOMPurify
|
|||
|
|
import DOMPurify from 'dompurify';
|
|||
|
|
function Comment({ content }) {
|
|||
|
|
return <div dangerouslySetInnerHTML={{
|
|||
|
|
__html: DOMPurify.sanitize(content)
|
|||
|
|
}} />;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### href/src注入
|
|||
|
|
```jsx
|
|||
|
|
// 危险 - javascript:协议
|
|||
|
|
function Link({ url }) {
|
|||
|
|
return <a href={url}>Click</a>;
|
|||
|
|
// 攻击: url = "javascript:alert('XSS')"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全 - 验证协议
|
|||
|
|
function Link({ url }) {
|
|||
|
|
const safeUrl = url.startsWith('http') ? url : '#';
|
|||
|
|
return <a href={safeUrl}>Click</a>;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### eval和Function
|
|||
|
|
```jsx
|
|||
|
|
// 危险
|
|||
|
|
function Calculator({ expression }) {
|
|||
|
|
const result = eval(expression); // RCE风险
|
|||
|
|
return <div>{result}</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全 - 使用安全的表达式解析器
|
|||
|
|
import { evaluate } from 'mathjs';
|
|||
|
|
function Calculator({ expression }) {
|
|||
|
|
const result = evaluate(expression);
|
|||
|
|
return <div>{result}</div>;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 服务端渲染(SSR) XSS
|
|||
|
|
```jsx
|
|||
|
|
// 危险 - Next.js中
|
|||
|
|
export async function getServerSideProps({ query }) {
|
|||
|
|
return {
|
|||
|
|
props: {
|
|||
|
|
search: query.q // 未转义
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面中
|
|||
|
|
function Page({ search }) {
|
|||
|
|
return <script dangerouslySetInnerHTML={{
|
|||
|
|
__html: `window.search = "${search}"` // XSS!
|
|||
|
|
}} />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全 - 使用JSON序列化
|
|||
|
|
function Page({ search }) {
|
|||
|
|
return <script dangerouslySetInnerHTML={{
|
|||
|
|
__html: `window.search = ${JSON.stringify(search)}`
|
|||
|
|
}} />;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 敏感数据暴露
|
|||
|
|
```jsx
|
|||
|
|
// 危险 - 前端存储敏感数据
|
|||
|
|
localStorage.setItem('token', apiToken);
|
|||
|
|
localStorage.setItem('user', JSON.stringify(userData));
|
|||
|
|
|
|||
|
|
// 危险 - 在状态中存储敏感信息
|
|||
|
|
const [creditCard, setCreditCard] = useState(cardNumber);
|
|||
|
|
|
|||
|
|
// 安全 - 使用HttpOnly Cookie存储token
|
|||
|
|
// 敏感数据只在需要时从后端获取
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 依赖安全
|
|||
|
|
```jsx
|
|||
|
|
// 危险 - 使用有漏洞的包
|
|||
|
|
import serialize from 'serialize-javascript';
|
|||
|
|
// 某些版本有XSS漏洞
|
|||
|
|
|
|||
|
|
// 安全 - 定期审计
|
|||
|
|
// npm audit
|
|||
|
|
// yarn audit
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 环境变量泄露
|
|||
|
|
```jsx
|
|||
|
|
// 危险 - 暴露服务端密钥
|
|||
|
|
// .env
|
|||
|
|
REACT_APP_API_KEY=secret_key // 会被打包到前端！
|
|||
|
|
|
|||
|
|
// 安全 - 敏感密钥只在服务端使用
|
|||
|
|
// 前端只使用公开的配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 安全最佳实践
|
|||
|
|
1. 避免使用dangerouslySetInnerHTML
|
|||
|
|
2. 验证所有URL协议
|
|||
|
|
3. 不要在前端存储敏感数据
|
|||
|
|
4. 使用Content Security Policy
|
|||
|
|
5. 定期更新依赖
|
|||
|
|
6. 使用TypeScript增强类型安全
|
|||
|
|
""",
|
|||
|
|
)
|