前端安全问题的解决方法

梦里梦外; 2023-10-03 14:54 1阅读 0赞

**目录**

前言：

1.常见的安全性问题

2.XSS攻击的解释和解决方法

2.1 XSS攻击是什么：

2.2 经常出现的原因：用户输入，如input框

2.3 防御方式：

3.CSRF（跨站请求伪造）的解释和解决方法

3.1 是什么

3.2 经常出现的原因：

3.3 防御方式：

4.SQL注入

4.1是什么：

4.1 解决：

5.文件上传漏洞

5.1 解决方案：

6.前端常用加密方法：

--------------------

### 前言： ###

> **web前端发展到今天，对于一般的安全问题做的比较完善，我们可以借助第三方库，比如从GitHub上一找一大堆，直接下载引入就能解决大部分问题。**

--------------------

### 1.常见的安全性问题 ###

> **XSS攻击（跨站脚本攻击）、CSRF（跨站请求伪造）、SQL注入和文件上传漏洞**

--------------------

### 2.XSS攻击的解释和解决方法 ###

--------------------

#### 2.1 XSS攻击是什么： ####

> XSS攻击全称[跨站脚本攻击][Link 1](Cross Site Scripting).是一种常见于 Web 应用中的计算机安全漏洞

#### 2.2 经常出现的原因：用户输入，如input框 ####

#### 2.3 防御方式： ####

> **1.输入过滤：在js中对用户输入的数据进行过滤**
> 
> **2.将输出的字符串中的反斜杠进行转义**
> 
> **3.从url中获取的信息，在前端进行转义后再输出**
> 
> **4.使用Cookie的onlyhttp属性**

**可参考我的另一篇文章：[XSS 和 CSRF 原理和基本防御方式][XSS _ CSRF]**

--------------------

### 3.CSRF（跨站请求伪造）的解释和解决方法 ###

#### 3.1 是什么 ####

> **CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF**

#### 3.2 经常出现的原因： ####

> **以用户的名义伪造请求发送给被攻击站点，从而在未授权的情况下进行权限保护的操作。**

图示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_25_color_FFFFFF_t_70_g_se_x_16][]

#### 3.3 防御方式： ####

> **1.验证码：强制用户输入验证码，才能完成最终请求，**
> 
> **2.Referer Check：检查请求来源来防御CSRF**

**可参考我的另一篇文章：[XSS 和 CSRF 原理和基本防御方式][XSS _ CSRF]**

--------------------

### 4.SQL注入 ###

#### 4.1是什么： ####

> **SQL注入是比较常见的网络攻击方式之一，它不是利用操作系统的BUG来实现攻击，而是针对程序员编程时的疏忽，通过SQL语句，实现无帐号登录，甚至篡改数据库。**

> 应用程序在向后台数据库传递SQL时，攻击者将SQL命令插入到web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行的恶意SQL命令。

#### 4.1 解决： ####

> **1.防止系统敏感信息泄露：该方法主要是在后台实现**
> 
> **2.数据转义**
> 
> **3.增加黑名单或白名单验证**

### 5.文件上传漏洞 ###

#### 5.1 解决方案： ####

> **1.检查服务器是否判断了上传文件类型及后缀**
> 
> **2.定义上传文件类型白名单**
> 
> **3.文件上传目录禁止执行脚本解析**

### 6.前端常用加密方法： ###

> MD5、base64、对称加密、非对称加密 、SHA加密

[Link 1]: https://baike.baidu.com/item/%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB/8186208
[XSS _ CSRF]: https://blog.csdn.net/wanghaoyingand/article/details/119550541?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_25_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210824212220147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_25,color_FFFFFF,t_70,g_se,x_16