前端安全常见的前端安全问题有哪些？ React中的前端安全 Vue中的前端安全面试题面试题一、讲一讲你对前端安全的了

常见的前端安全问题有哪些？

React中的前端安全

Vue中的前端安全

面试题

面试题一、讲一讲你对前端安全的了解

前端安全是 Web 开发中非常重要的一部分，涉及保护用户数据、防止恶意攻击以及确保应用程序的可靠性。以下是一些常见的前端安全问题及其解决方案：

1. 跨站脚本攻击（XSS）

(1) 什么是 XSS？

XSS 攻击者通过在网页中注入恶意脚本，窃取用户数据或劫持用户会话。
分为三种类型：
- 存储型 XSS：恶意脚本存储在服务器上（如评论区）。
- 反射型 XSS：恶意脚本通过 URL 参数反射到页面中。
- DOM 型 XSS：恶意脚本通过修改 DOM 实现攻击。

(2) 如何防御 XSS？

输入过滤和转义：
- 对用户输入的数据进行过滤和转义，确保特殊字符（如 <, >, &）不会被解析为 HTML 或 JavaScript。
- 使用工具库（如 DOMPurify）对 HTML 进行净化。
设置 HTTP 头：
- 使用 Content-Security-Policy（CSP）限制脚本加载来源。
- 设置 X-XSS-Protection 头启用浏览器的 XSS 防护机制。
避免内联脚本：
- 避免使用 innerHTML 或 eval，改用安全的 DOM 操作方法。

2. 跨站请求伪造（CSRF）

(1) 什么是 CSRF？

CSRF 攻击者诱使用户在不知情的情况下发送恶意请求，执行非预期的操作（如转账、修改密码）。

(2) 如何防御 CSRF？

使用 CSRF Token：在表单或请求中添加随机生成的 CSRF Token，服务器验证 Token 的有效性。
设置 SameSite Cookie：将 Cookie 的 SameSite 属性设置为 Strict 或 Lax，防止跨站请求携带 Cookie。
验证请求来源：检查 Referer 或 Origin 头，确保请求来自可信的源。

3. 点击劫持（Clickjacking）

(1) 什么是点击劫持？

攻击者通过透明的 iframe 覆盖在合法页面上，诱使用户点击隐藏的按钮或链接。

(2) 如何防御点击劫持？

设置 X-Frame-Options 头：使用 X-Frame-Options: DENY 或 X-Frame-Options: SAMEORIGIN 防止页面被嵌入 iframe。
使用 CSP 的 frame-ancestors 指令：设置 Content-Security-Policy: frame-ancestors 'self'，限制页面嵌入。

4. 内容安全策略（CSP）

(1) 什么是 CSP？

CSP 是一种安全机制，用于限制页面中可以加载的资源（如脚本、样式、图片）。

(2) 如何配置 CSP？

在 HTTP 头中设置 Content-Security-Policy，例如：

css
 体验AI代码助手
 代码解读
复制代码
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline';

常用指令：
- default-src：默认资源加载策略。
- script-src：限制脚本加载来源。
- style-src：限制样式加载来源。
- img-src：限制图片加载来源。

5. HTTP 严格传输安全（HSTS）

(1) 什么是 HSTS？

HSTS 强制浏览器使用 HTTPS 连接，防止中间人攻击（MITM）。

(2) 如何启用 HSTS？

在 HTTP 头中设置 Strict-Transport-Security，例如：

ini
 体验AI代码助手
 代码解读
复制代码
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

参数：
- max-age：HSTS 的有效期（单位：秒）。
- includeSubDomains：包含子域名。
- preload：提交到浏览器的 HSTS 预加载列表。

6. 数据安全

(1) 敏感数据保护

避免在前端存储敏感数据：不要将敏感数据（如密码、令牌）存储在 localStorage 或 sessionStorage 中。
使用 HTTPS：确保所有数据传输都通过 HTTPS 加密。

(2) 密码安全

前端加密：对用户密码进行哈希处理（如使用 bcrypt），但最终的安全依赖于后端。
防止暴力破解：实施验证码、登录失败限制等措施。

7. 第三方依赖安全

(1) 依赖库安全

定期更新依赖：使用工具（如 npm audit、yarn audit）检查依赖库的安全漏洞。
使用可信的 CDN：确保第三方资源（如 jQuery、Bootstrap）来自可信的 CDN。

(2) 防止第三方脚本滥用

限制第三方脚本权限：使用 CSP 限制第三方脚本的加载和执行。
审核第三方脚本：确保第三方脚本不会引入安全风险。

8. 其他安全问题

(1) 开放重定向

问题：攻击者利用开放重定向将用户引导到恶意网站。
解决方案：验证重定向 URL 的合法性，避免使用用户输入的重定向地址。

(2) 错误信息泄露

问题：错误信息中泄露敏感数据（如数据库信息）。
解决方案：在生产环境中隐藏详细的错误信息，返回通用的错误提示。

9. 总结

安全问题	防御措施
XSS	输入过滤、CSP、避免内联脚本
CSRF	CSRF Token、SameSite Cookie、验证请求来源
点击劫持	X-Frame-Options、CSP 的 frame-ancestors
CSP	配置 Content-Security-Policy 头
HSTS	启用 Strict-Transport-Security 头
数据安全	避免存储敏感数据、使用 HTTPS
第三方依赖安全	定期更新依赖、使用可信的 CDN

通过采取这些安全措施，可以有效提升前端应用的安全性，保护用户数据和隐私。

面试题二、内容安全策略CSP中有个属性不做拦截只做上报了解吗？

内容安全策略（Content Security Policy，CSP）中有一个特殊的指令可以用来 只报告违规行为而不拦截， Content-Security-Policy-Report-Only。

1. `Content-Security-Policy-Report-Only` 的作用

只报告，不拦截：当配置了 Content-Security-Policy-Report-Only 头时，浏览器会检测 CSP 规则的违规行为，但不会阻止这些行为。违规行为会被上报到指定的 URL，方便开发者分析和调试。
适用场景：在开发和测试阶段，逐步引入 CSP 规则时，可以使用 Report-Only 模式，观察规则的影响。在生产环境中，可以先启用 Report-Only 模式，确保 CSP 规则不会意外拦截合法内容。

2. 如何配置 `Content-Security-Policy-Report-Only`

(1) 基本语法

css
 体验AI代码助手
 代码解读
复制代码
Content-Security-Policy-Report-Only: <策略指令>; report-uri <上报URL>

<策略指令> ：定义 CSP 规则（如 default-src 'self'）。
report-uri：指定违规行为的上报 URL。

(2) 示例

以下是一个 Content-Security-Policy-Report-Only 的配置示例：

css
 体验AI代码助手
 代码解读
复制代码
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri /csp-report-endpoint

规则：只允许从同源加载脚本。
上报 URL：违规行为会上报到 /csp-report-endpoint。

3、违规报告的内容

当浏览器检测到 CSP 违规行为时，会向 report-uri 指定的 URL 发送一个 POST 请求，请求体是一个 JSON 对象，包含以下信息：

(1) 示例报告

json
 体验AI代码助手
 代码解读
复制代码
{
  "csp-report": {
    "document-uri": "https://example.com/page.html",
    "referrer": "https://referrer.com/",
    "violated-directive": "script-src 'self'",
    "effective-directive": "script-src",
    "original-policy": "default-src 'self'; script-src 'self'; report-uri /csp-report-endpoint",
    "blocked-uri": "https://malicious.com/script.js",
    "line-number": 42,
    "column-number": 21,
    "source-file": "https://example.com/script.js",
    "status-code": 200,
    "script-sample": "alert('XSS')"
  }
}

(2) 字段说明

字段	说明
`document-uri`	发生违规的页面 URL。
`referrer`	页面的来源 URL。
`violated-directive`	被违反的 CSP 指令。
`effective-directive`	实际生效的 CSP 指令。
`original-policy`	完整的 CSP 策略。
`blocked-uri`	被拦截的资源 URL。
`line-number`	违规代码的行号（如果可用）。
`column-number`	违规代码的列号（如果可用）。
`source-file`	违规代码所在的文件 URL。
`status-code`	页面的 HTTP 状态码。
`script-sample`	违规脚本的示例代码（如果可用）。

`4、Report-Only` 与 `Enforce` 的区别

特性	`Content-Security-Policy-Report-Only`	`Content-Security-Policy`（Enforce）
拦截行为	不拦截，只报告	拦截违规行为
适用场景	测试和调试阶段	生产环境
配置指令	`Content-Security-Policy-Report-Only`	`Content-Security-Policy`
上报机制	通过 `report-uri` 或 `report-to` 上报	无上报机制（直接拦截）

5. `report-uri` 和 `report-to` 的区别

report-uri：传统的上报方式，指定一个 URL 接收违规报告。

css
 体验AI代码助手
 代码解读
复制代码
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report-endpoint

report-to：

新的上报方式，使用 Reporting API 定义上报端点。

需要先在 Report-To 头中定义上报组。

css
 体验AI代码助手
 代码解读
复制代码
Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://example.com/csp-report-endpoint"}]}
Content-Security-Policy-Report-Only: default-src 'self'; report-to csp-endpoint