前端防止js注入

一、基础概念

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

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

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

• 维护网站正常运行
  • 避免恶意脚本篡改页面布局、功能等。比如将正常的商品展示页面修改为传播恶意广告或者虚假信息的页面，影响用户体验和网站的商业信誉。
• 符合安全规范
  • 满足相关的网络安全法规和行业标准要求，降低法律风险。

三、类型

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

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

四、应用场景

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

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

五、问题原因及解决方法

1. 原因
   • 缺乏输入验证：没有对用户输入的内容进行严格的格式、类型等验证。例如，没有限制输入只能为特定的字符集或者长度范围。
   • 输出编码不当：在将用户输入的内容显示在页面上时，没有进行正确的编码转换。例如，直接将用户输入的包含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;（这里只是一个示例，实际应用中需要根据具体情况调整）。