前端防止js注入

一、基础概念

定义
- JavaScript注入攻击是指攻击者通过在目标网页的输入字段（如表单输入框、URL参数等）中插入恶意的JavaScript代码片段，当页面被加载或者相关操作执行时，这些恶意代码就会被浏览器执行，从而可能获取用户的敏感信息（如登录凭证、个人信息等）、篡改页面内容或者进行其他恶意操作。

二、相关优势（这里指防范措施的优势）

保护用户数据安全
- 防止攻击者获取用户的登录信息、个人资料等敏感数据。例如，在一个电商网站中，如果用户登录信息被恶意获取，可能导致账户被盗用，造成财产损失。

三、类型

基于输入字段的注入
- 攻击者在表单输入框（如用户名、密码输入框）或者URL参数中注入JavaScript代码。例如，在一个登录页面，如果对输入没有过滤，攻击者可能在用户名输入框中输入<script>alert('XSS');</script>，当页面加载时就会弹出一个警告框。

基于Cookie的注入
- 如果网站对Cookie的处理不当，攻击者可以通过修改Cookie中的值来注入恶意脚本。比如将一个包含恶意JavaScript的字符串设置为某个Cookie的值，然后在页面读取该Cookie时执行恶意代码。

四、应用场景

用户登录注册页面
- 这些页面涉及到用户的敏感信息输入，是最容易被攻击的目标之一。例如，在社交网络平台的登录页面，如果防范不当，攻击者可以通过注入脚本获取大量用户的登录凭证。

搜索功能页面
- 用户输入的搜索关键词如果被恶意利用，可能导致在整个网站的搜索结果页面中执行恶意脚本。比如在新闻网站的搜索框中注入脚本，使搜索结果页面显示恶意内容或者收集用户的浏览习惯信息。

五、问题原因及解决方法

原因
- 缺乏输入验证：没有对用户输入的内容进行严格的格式、类型等验证。例如，没有限制输入只能为特定的字符集或者长度范围。
- 输出编码不当：在将用户输入的内容显示在页面上时，没有进行正确的编码转换。例如，直接将用户输入的包含HTML标签或JavaScript代码的内容显示在HTML页面中。
- 信任用户输入过度：假设用户输入都是合法和安全的，没有考虑到恶意攻击的可能性。

解决方法
- 输入验证
  - 在前端可以使用JavaScript对用户输入进行初步验证。例如，对于用户名输入框，可以使用正则表达式限制只能输入字母、数字和下划线：
  - 在前端可以使用JavaScript对用户输入进行初步验证。例如，对于用户名输入框，可以使用正则表达式限制只能输入字母、数字和下划线：
  - 在后端也需要进行同样的验证，因为前端验证可以被绕过。
- 输出编码
  - 当将用户输入的内容显示在HTML页面时，需要进行HTML编码。例如，在JavaScript中可以使用textContent属性而不是innerHTML属性来设置元素的内容，这样可以避免将用户输入当作HTML或JavaScript代码执行。
  - 当将用户输入的内容显示在HTML页面时，需要进行HTML编码。例如，在JavaScript中可以使用textContent属性而不是innerHTML属性来设置元素的内容，这样可以避免将用户输入当作HTML或JavaScript代码执行。
- 内容安全策略（CSP）
  - 在服务器端设置CSP头，限制页面可以加载的资源类型和来源。例如，可以设置只允许加载特定域名下的脚本文件，防止执行外部的恶意脚本。
    - 在HTTP响应头中添加Content - Security - Policy: script - src 'self' https://trusted - domain.com;（这里只是一个示例，实际应用中需要根据具体情况调整）。