前端程序员必须知道的 Web 漏洞，快来看看

前端程序员必须知道的 Web 漏洞，快来看看

原创2022-01-02 07:48·前端人随着互联网的发展，早已经不是仅限于简单的网页或是社交，电商购物、银行转账、企业管理等等。上次看到一个新闻，后台程序员离职后，利用职位之便，每天还不断的给自己转账，转了好多次才被发现，想想这多可怕。或者会窃取重要的商业信息，所以 Web 安全也是非常值得注意的。

什么是 Web 安全?

黑客利用网络操作系统的漏洞和 Web 服务器的 SQL 注入漏洞等，得到 Web 服务器的控制权，轻则篡改、删除、添加数据，重则窃取重要的商业信息、转账等，更严重的就是在网页中植入恶意代码，使网站受到不可预期的侵害。

常见的攻击可分为三类：XSS、CSRF、SQL注入。

1、XSS 攻击

Cross Site Scripting 跨站脚本攻击，为了与 CSS 区分，所以简写为 XSS 。

恶意攻击给 Web 页面植入恶意的 Script 代码，当用户浏览该网页的时候，嵌入 Web 里面的 script 代码会被执行，从而达到攻击的效果。

讲直白点，就是恶意攻击者通过在输入框处添加恶意 script 代码，用户浏览网页的时候执行 script 代码，从而达到恶意攻击用户的目的。

1.1、XSS 的危害

• 盗用各类账号，然后进行数据各种任意操作。
• 控制企业数据，包括删除、添加、篡改敏感信息等。
• 盗取具有商业价值信息。
• 强制发送电子邮件，获取验证码。
• 控制受害者的机器向其他网站发起攻击。

1.2、XSS 的攻击类型

• 反射型 XSS 跨站脚本攻击

发出请求时，XSS代码会出现在 url 中，作为输入提交到服务器端，服务器再返回给浏览器，然后浏览器解析执行 XSS 代码，这一过程像一次反射，所以称之为反射型。

这种类型的攻击，通常是把 XSS 攻击代码放入请求地址的 数据传输部分，如：

http://www.xxx.com?q=<script>alert("恶意脚本")</script>

或

http://www.xxx.com?n=<img sec="1 onerror=alert('恶意代码')">

• 存储型 XSS 跨站脚本攻击

提交的 XSS 代码会存储在服务器端，如数据库、内存、文件系统内，下次请求目标页面时不再提交 XSS 代码。

如在留言板输入框位置添加 script 代码或 html、css 代码，把代码为转义，直接存入数据库。

• 文档型 XSS 跨站脚本攻击

文档型的 XSS 攻击不会经过服务器，作为中间人的角色，在数据传输过程中劫持到网络数据包，然后修改里面的 html 文档。

1.3、XSS 的防御措施

措施1：编码。

对这些数据进行 html entity 编码。客户端和服务器端都需要进行转义编码。

<script>alert('恶意代码')</script>

转义后为：

<script>alert('恶意代码')</script>

放入上边的代码中，还是会自动解析为上边的代码，所以放到外边。

措施2：过滤。

移除用户上传的 DOM 属性，如上边的 onerror。

移除用户上传的 style、script、iframe 节点。

// 如
<div>
 <style>
  body { display:none } 
 </style>  
</div>

措施3：利用 CSP

浏览器中的内容安全策略，就是决策浏览器加载哪些资源。

2、CSRF 攻击

Cross site request forgery 跨站点请求伪造。

攻击者诱导受害者进入第三方网站，向被攻击网站发送跨站请求，利用被攻击者在被攻击网站已经获取的注册凭证，绕过后台的用户验证达到冒充用户对攻击网站进行的某种操作。

CSRF 攻击特点：

• 并没有劫持 cookie，只是伪造受害者的身份。
• 攻击一般发起在第三方网站，被攻击网站无法防止攻击发生。
• 跨站请求可以是各种方式，如：图片url、超链接、CORS、form提交。

2.1、CSRF 的危害

• 在社交网络，网站被劫持之后，点击会自动关注 + 分享。
• 银行系统，被攻击以后可以查询余额，也可以自动转账。
• 电商类系统，如果被攻击可以添加、删除、清空购物车。

2.2、CSRF 的攻击类型

• GET 类型攻击

使用非常简单，只需要一个 http 请求。

比如页面中的一个图片添加链接，还有 iframe、script ，最容易完成 CSFR 攻击，且不易被用户发现，隐蔽性超强。

由于 get 接口是最常见的一种 CSRF 攻击类型，所以很多重要的接口不适用 get 方式，使用 post 一定程度上可以防止 CSRF 攻击。

• POST 类型攻击

这种类型的 SCRF 攻击，通常使用的是一个自动提交的表单。简单讲就是伪造一个自动提交的表单，一旦访问页面时，表单就会自动提交。

如：

<form action="http://xxx.com/widthdraw" method="post">
 <input type="hidden" name="account" value="web" />
 <input type="hidden" name="psd" value="hacker" />
</form>

<script type="text/javascript">
 document.forms[0].submit()
</script>

• 链接类型的攻击

比起前两个，这个类型的比较少见，链接类型的攻击必须要用户点击链接，才能触发。

通常在论坛中发布的图片嵌入恶意的链接，或以广告的形式诱导用户点击中招。所以我们在邮箱中看到乱七八糟的广告，尽量别点击，防止遇到三方攻击。

• 登录 CSRF 攻击方式

伪造一种新型的攻击方式，用户误以为是在网站正常登录，实际上是使用账户和密码登录到了黑客网站，这样黑客可以监听到用户的所有操作，甚至知道用户的账户信息。

2.3、CSRF 的防御措施

措施1：检查 http 头部的 referer 信息

referer 包含在请求头内，表示请求接口的页面来源。

服务端通过检查 referer 信息，发现来源于外域时，就可以拦截请求，通过阻止不明外域的访问，一定程度上可以减少攻击。

措施2：使用一次性令牌

使用一次性令牌做身份识别，黑客是无法通过跨域拿到一次性令牌的，所以服务端可以通过判断是否携带一次性令牌，就可以排除一部分的非法操作者。

措施3：使用验证图片

服务端生成一些文本和数字，在服务端保存这份信息，同时以图片的形式在客户端展现，让用户去合法填写信息，当 CSRF 攻击时，拿不到这个验证码的时候，无法向服务器提供这个信息，导致匹配失败，从而识别它是非法攻击者。

这个应用非常常见，之前登录的时候，需要填写图形验证码。

现在滑动图片验证也非常常见。

3、SQL注入

SQL 注入，一般发生在注册、评论、添加等，只有有用户输入的地方，就有可能发生 SQL 注入。SQL 注入是一种常见的 Web 安全漏洞，攻击者会利用这个漏洞，可以访问或修改数据，利用潜在的数据库漏洞进行攻击。

所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将(恶意的)SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符暴出的，这类表单特别容易受到SQL注入式攻击.

3.1、SQL 注入危害

任意的账号都可以登录，可以进行任意的操作，粗暴点讲，就是随便来。

3.2、 SQL注入分类

• 数字型注入

当输入的参数为整数时，则有可能存在数字型漏洞。

• 字符型注入

当输入参数为字符串时，则可能存在字符型注入漏洞。数字型与字符型注入最大的区别在于：数字型不需要单引号闭合，而字符型一般需要使用单引号来闭合。

字符型注入最关键的是如何闭合 SQL 语句以及注释多余的代码。

• 其他类型

其实我觉得 SQL 注入只有两种类型：数字型与字符型。很多人可能会说还有如：Cookie 注入、POST 注入、延时注入等。

的确如此，但这些类型的注入归根结底也是数字型和字符型注入的不同展现形式或者注入的位置不同罢了。

以下是一些常见的注入叫法：

• POST注入：注入字段在 POST 数据中
• Cookie注入：注入字段在 Cookie 数据中
• 延时注入：使用数据库延时特性注入
• 搜索注入：注入处为搜索的地方
• base64注入：注入字符串需要经过 base64 加密

3.3、SQL注入的防范措施

凡是用户输入的地方，我们都应该防止黑客攻击，永远不要相信用户的输入。所以对应的防御措施分别有：

• 添加正则验证，使用正则表达式过滤传入的参数。
• 屏蔽敏感词汇。
• 字符串过滤。

4、接口加密

前后端分离之后，前端每天都会接触到很多接口。发送网络请求的时候，有些接口就会使用 get 方法。最常见的传参方式就是，直接在 url 地址后面加参数。

https://www.so.com/s?q='Web前端'

直接采用这种方式传输数据，如果数据被劫持或抓包工具偷走之后，就会直接被人盗取走，特别危险。若是采用接口加密，如下：

// 百度关键字查找示例
// 接口采用 get 方式
https://www.so.com/s?q=get%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F&src=srp_suggst_revise&fr=se7_newtab_big&psid=014cd859f04a9ba923802a92f6821d44&eci=&nlpv=base_yc_52

上边那个看不懂的一长串符号，正是经过加密的数据。

接口加密就是将接口请求调用中传递的参数进行加密，目的就是为了保证接口请求中传递参数和返回的结果的安全性，一般比较敏感数据，如身份证、电话号码、账号、密码等需要进行加密。

常见的加密方式：

• md5 加密
• base64 加密
• RSA 加密
• 对称加密算法
• bcryptjs

加密方式较多，可以根据自己具体的需要和项目语言选择其中一种。

加密之后的数据更安全，那我们能不能将接口所有的数据都进行加密呢?加密是非常消耗资源的，如果有大批量的数据都进行加密时，返回数据需要的时间就更长，会直接影响用户体验。所以我们进行加密时，只需要对敏感的重要的信息进行加密。