当前位置：首页 > news >正文

前端常见的安全问题

news 2025/7/13 0:22:51

跨站脚本攻击(XSS)

XSS（跨站脚本攻击，Cross-Site Scripting）是一种通过在网页中注入恶意脚本，从而窃取用户数据或控制用户行为的攻击方式。注入的js跟网页与原有的js具有同样的权限，可以获得server端数据、可以获取cookie等。根据攻击原理和场景，主要分为以下三类：

原理：攻击者通过电子邮件等方式将包含恶意脚本的链接发送给目标用户，当用户点击链接时，服务器将带有恶意脚本的数据反射回用户的浏览器，浏览器解析并执行这段脚本。
场景举例：
恶意链接：http://example.com/search?keyword=<script>alert('XSS');</script>
用户点击后，服务器返回的搜索结果页面中包含恶意脚本，浏览器执行后弹出弹窗（实际攻击会更隐蔽，如窃取 Cookie）。
特点：
- 攻击不存入服务器数据库，依赖用户主动触发。
- 常见于搜索框、登录表单等用户输入直接显示的场景。
解决方法：
- 对用户输入进行严格的验证和过滤，确保输入内容符合预期。
- 在将用户输入输出到页面时，进行HTML编码，将特殊字符（如<、>）转换为HTML实体。
```
<script>alert('XSS');</script>
```
```
&lt;script&gt;alert(&#39;XSS&#39;);&lt;/script&gt;
```
- 使用Web应用防火墙（WAF）等安全工具检测和阻止XSS攻击。

原理：攻击者将恶意脚本存入网站的数据库中（如评论区、用户资料等），当其他用户访问该页面时，服务器从数据库中读取并渲染包含恶意脚本的内容，自动触发攻击。
场景举例
攻击者在论坛发布一条包含恶意脚本的评论：<img src=x onerror="alert('XSS');">，其他用户浏览该评论时，浏览器执行脚本。应为该评论存储到了数据库中
特点：
- 攻击脚本持久存储在服务器，影响范围广（所有访问该页面的用户）。
- 常见于社交网站、博客、留言板等用户可提交内容并长期展示的平台。
解决方法：
- 在存储用户输入之前，对输入内容进行严格的过滤和编码。
- 使用内容安全策略（CSP）限制网页可以加载的资源，减少XSS攻击的机会。
- 定期对存储的数据进行安全审计，及时发现和清理潜在的恶意脚本。

原理：攻击不依赖服务器端处理，而是通过修改客户端页面的 DOM 结构，将恶意脚本注入到浏览器解析的页面中。例如，利用 JavaScript 获取 URL 参数并动态插入到页面元素中，且未对参数进行过滤。
场景举例：
- 页面代码存在漏洞：document.getElementById("demo").innerHTML = window.location.hash.slice(1);
- 攻击者构造 URL：http://example.com/#<script>alert('XSS');</script>，浏览器解析时将哈希值插入到页面，执行脚本。
特点：
- 攻击完全发生在客户端，服务器日志可能无法记录。
- 依赖前端代码对用户输入的处理漏洞。
解决方法：
- 在前端代码中对所有用户可控的输入（如URL参数）进行严格的验证和编码。
- 使用现代Web框架（如React、Vue.js）的自动转义功能，避免直接操作DOM。
- 使用安全库（如DOMPurify）对输入数据进行净化。

攻击方式：攻击者诱导用户在已登录的状态下，访问一个恶意网站或点击恶意链接，从而在用户不知情的情况下，利用用户的会话信息向目标网站发送伪造的请求。
解决方法：
在表单提交时，添加一个唯一的Token值，并在服务器端验证该Token。
验证HTTP请求头中的Referer值是否来自同一域名。
使用双重身份验证（如手机验证码）增强敏感操作的安全性。
部署HTTPS协议，确保通信过程的安全。

攻击方式：攻击者通过发送大量请求或数据包，使目标服务器或网络资源过载，导致正常用户无法访问服务。
解决方法：
部署防火墙和入侵检测系统（IDS），检测并阻止异常流量。
使用负载均衡技术，分散攻击流量。
限制单个IP地址的请求频率，防止恶意流量集中攻击。
定期更新系统和软件，修复已知的安全漏洞。

攻击方式：攻击者通过窃取用户的会话标识（如Session ID），冒充用户身份进行非法操作。
解决方法：
使用HTTPS协议加密通信过程，防止Session ID被窃取。
设置Cookie的HttpOnly属性，防止JavaScript脚本访问Cookie。
定期更新会话ID，并在用户登录时重新生成会话ID。
设置会话超时，避免用户长时间不操作时会话信息依然有效。

攻击方式：攻击者通过在用户浏览器中嵌入不可见的恶意页面，诱导用户点击看似正常的按钮或链接，从而触发恶意操作。
解决方法：
使用X-Frame-Options或Content-Security-Policy响应头，防止页面被嵌入到其他页面中。
在页面中添加透明的保护层，防止用户点击被劫持。
提醒用户注意识别恶意链接和页面，避免点击不可信的内容。