前端开发实战基础——网络攻击与防御

文章目录

概要

关于前端的网络攻击，有以下两种是最为常见的

  • Cross-site scripting：跨站脚本攻击

  • 跨站请求伪造（CSRF）

下面分别介绍两种攻击方式

XSS(Cross-site scripting：跨站脚本攻击）

跨站脚本攻击是一种安全漏洞，攻击者可以利用漏洞，向网站注入恶意的客户端代码。

如果受害者在没有察觉中运行这些恶意代码，攻击者就可以突破网站的访问限制，以受害者身份，去操作网站上任何可执行的操作，或者读取受害者在目标网站上的个人信息、cookie、session tokens 等网站验证信息。

XSS 攻击有三种类型，分别如下：

存储型 XSS

存储型XSS，攻击者提交了带有恶意脚本的内容到服务器，这个内容保存到数据库。当其他用户访问这个网站后，内容被这些用户获取，恶意代码便可以在这些用户客户端运行，发起攻击。

反射型

反射型也称为“非持久型XSS” ,它需要靠被攻击者服务器，将用户输入的数据反射回来给浏览器。

攻击者会构造一个包含恶意脚本的URL，并将此URL 发送给用户。当用户点击打开这个URL 时，服务器会将有恶意代码的内容返回到浏览器并运行，达到攻击目标。

这种方式不将恶意脚本存储在被攻击的服务器，而是拼接在URL中，并最后随着操作结果返回到受害者浏览器。通过欺骗浏览器信任此恶意脚本，执行窃取个人身份信息如cookie 等发送到攻击者的服务器。

举例来说，如果一个用户在登录某个Web应用程序后获得了一个cookie，攻击者可以将含有恶意代码的URL发送给用户。

当用户打开这个URL时，Web服务器会执行该URL中的请求，并将恶意代码以请求结果返回给用户浏览器，浏览器执行URL中包含的JavaScript代码。这样，攻击者就可以利用这段恶意代码将用户的cookie信息发送到他们控制的服务器上，进而实现非法登录等恶意行为。

XSS代码例子

下面的地址中，欢迎XXX 是根据URL 的参数name 的值来确定的，是一个动态内容。当我们改变name的值的时候，HTML 显示的值也会变成name对的值。
在这里插入图片描述


<!DOCTYPE html><!--STATUS OK--><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script>
window.alert = function()  //这里是显示一条指定消息和一个确认按钮的警告框
{     
confirm("完成的不错！");//指定消息完成得不错!
 window.location.href="level2.php?keyword=test"; //刷新当前页面，并且重定向到level2
}
</script>
<title>欢迎来到level1</title>
</head>
<body>
<h1 align=center>欢迎来到level1</h1>
<h2 align=center>欢迎用户test</h2><center><img src=level1.png></center>
<h3 align=center>payload的长度:4</h3></body>

上面代码中，我把URL 地址改成https://xssaq.com/yx/level1.php?name=<script>alert()</script>
就是执行alert() 函数，实现攻击目标。因为后端没有过滤掉这些恶意代码，直接将这些动态内容传给前端，便会把当做普通函数执行。

效果如图所示，成功执行了alert 函数。
在这里插入图片描述

容易发生XSS攻击的情形

下面的两种情况，容易发生XSS攻击：

  1. 没有过滤掉恶意代码的动态内容，被发送给其他用户
  2. 数据从一个不可靠的链接进入一个Web应用程序

基于DOM的XSS

DOM型攻击，是将恶意脚本注入到被攻击的应用程序的DOM 结构中，而不需要存储到被攻击者服务器，通过修改原DOM 而达到攻击目的。

跨站请求伪造（CSRF）

跨站伪造请求，Cross-site request forgery，也称为 XSRF，是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。

例如，这些非预期的请求，可能是通过URL 链接加入恶意参数来达到攻击目标，如下面的图片的src参数

<img src="https://www.example.com/index.php?action=delete&id=123" />

对于https://www.example.com 有权限的用户来说，这个标签会在他们不注意的时候下对https://www.example.com/index.php 服务器发送请求，来达到攻击者的目的。

这个图片可能不在https://www.example.com站内，因为用户登录了https://www.example.com后，会保留一些个人信息，攻击者可能通过诱导受害者进入有恶意链接图片，从而执行https://www.example.com/index.php?action=delete&id=123请求，并携带了用户在https://www.example.com的登录信息，造成服务器以为是受害者自己发起的，从而伪造了受害者的请求。

防御措施

对XSS 攻击的防御方案

根据XSS 攻击的发生原因，和类型，我们可以可以采取以下的防御措施

对用户输入过滤和转义

对所有用户的输入的数据进行严格的过滤、移除或转义可能导致脚本执行的字符或字符串，例如特殊字符“>” 、“<”、“&” 等

使用HTTP Only Cookie

将敏感信息（会话标志）存储在HttpOnly 的Cookie 中，这样，即使有恶意脚本，也无法直接执行获取Cookie 的操作。

使用Content Security Policy（CSP）

CSP 可以限制浏览器只加载和执行特定来源的脚本，从而防止恶意脚本的执行

对用户权限进行严格控制

根据用户的角色和权限，限制他们可以访问和操作的资源，从而降低XSS攻击的影响范围。

对CSRF（跨站伪造请求）防御方案

对于CSRF，我们需要加强请求的验证，可以采取以下的方案

验证 HTTP Referer字段

检查HTTP请求头中的Referer字段，确保请求是从合法的源发起的。这样就避免受害者从其他被攻击者诱导进入的网站中，无疑发起非预期的请求。因为 Referer 字段会记录发起请求来源于哪个URL地址，如果这个Referer 字段与自己的网站不一致，基本可以判断为第三方不被信任。

使用Token验证

在表单中添加一个随机生成的令牌，服务器验证该令牌以确保请求是合法的。

使用验证码

在敏感操作中使用验证码，以防止自动化攻击。

小结

  • 跨站脚本攻击，有三种类型，存储型、反射型、基于DOM型
  • 跨站脚本攻击需要执行特定恶意脚本，因此，可以在用户输入上做严格过滤和转义特殊字符，可以使得其不生效，同时使用CSP限制脚本加载规则和HttpOnly的cookie
  • 跨站伪造请求，要加强请求验证，可以检测Referer字段、加token 或者验证码进行增强