[8]xss你清楚吗

我们一起学前端

已于 2022-11-05 19:52:29 修改

阅读量853

点赞数

CC 4.0 BY-SA版权

文章标签： xss javascript 前端

于 2022-11-05 19:46:31 首次发布

本文链接：https://blog.csdn.net/qq_35577655/article/details/127707755

3大Web安全漏洞防御解决方案：XSS、CSRF及SQL

XSS攻击是Web攻击中最常见的攻击方法之一。

跨站脚本攻击(Cross Site Scripting)，缩写为XSS，为了与前端css进行区别,因此命名为XSS。

恶意攻击者往Web页面里插入恶意javaScript代码，当用户浏览该页面的时候，嵌入Web里面的javaScript代码会被执行，从而达到恶意攻击用户的目的。

看一个最简单的攻击示例

初始化一个express项目：express demo

大家发现网页执行了一段脚本，而且这段脚本是用户恶意输入的。这就是XSS攻击最简单的一个案例。

XSS攻击的分类

反射型和存储型

1.反射型：我们回想一下初中学的光学物理的反射，是不是一道光射向镜子，然后发射回来了。这里的反射是一样的道理。

客户端向服务器发送一个请求，其中包括了恶意的脚本；

服务器接收到后，直接将请求里的内容发给客户端；

客户端收到服务器响应的数据。

“反射型xss又叫非持久性xss，那为什么叫非持久呢?因为这种攻击方式只有一次，如果没有恶意的链接，就不会构成攻击

2.存储型

又称为持久型跨站点脚本，这个直接通过名字就能很好的理解（存储型），它一般发生在XSS攻击代码存储在网站数据库中，当一个页面被用户打开的时候执行。

持久的XSS相比非持久性XSS攻击危害性更大,因为每当用户打开页面，查看内容时脚本将自动执行。而第一种是一次性的。

例如：当我添加一个评论，并且暗藏一个脚本。这就是最常见的存储型攻击

XSS防御方式

核心手段：将危险的标识进行转义

为什么转义会有效呢？

比如：<script> ====> <script>

这时候，前端就不会认为这个是一个脚本标签，就不会执行脚本。

①我们自己定义转义和反转义方法：

function enCode (html){

   var temp = document.createElement ("div");

   temp.innerText = html

   var   output = temp.innerHTML;

   temp = null;

   return output;

}

function deCode (html){

var temp = document.createElement("div");

temp.innerHTML = html;

var output = temp.innerText;

temp =null;

   return output;

}

HTTP X-XSS-Protection 响应头是Internet Explorer，Chrome和Safari的一个功能，当检测到跨站脚本攻击 (XSS)时，浏览器将停止加载页面

0：禁止XSS过滤。

1：启用XSS过滤

②前端转义库

Package - xss

现学现用：可以在浏览器开发者工具中使用一下

③后端转义

这个就是后端的事情，但是我们要清楚，并且要对应处理。

别以为是后端开发的问题，这是为了防止xss攻击做的转义，我们前端只需要给反转义一下。

但是之前有个同事既然是这样处理的：前端直接将字符串进行了encodeURIComponent和decodeURIComponent处理，这就直接阻止了后端的转义，辜负了后端开发的一片好心。（哈哈大家知道有个同事是指谁哈^_^）

更多学习视频学习资料请参考：B站搜索“我们一起学前端”