防XSS攻击

最新推荐文章于 2024-07-31 15:36:49 发布

思ۣۖิิۣۖิ❧❦空❧❦

最新推荐文章于 2024-07-31 15:36:49 发布

阅读量1k

点赞数

文章标签：前端 react javascript html xss

本文链接：https://blog.csdn.net/qq_45228255/article/details/124084859

版权

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

是什么： XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、VBScript 、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和 cookie 等各种内容。

什么情况下出现的：先说一下 xss 有哪些类型吧，存储性、反射型和 DOM 型三种，

存储型：主要是将 xss 交给服务器，当目标用户访问该页面获取数据时，XSS代码会从服务器解析之后加载出来，返回到浏览器做正常的HTML和JS解析执行，XSS攻击就发生了。存储型 XSS 一般出现在网站留言、评论、博客日志等交互处，恶意脚本存储到客户端或者服务端的数据库中。

比如富文本编辑器，用户在内容内部编写 img 标签的 src 属性

xxxxx  <img src='黑客地址' alt="" /> xxxxxx

反射型：一般是攻击者通过特定手法（如电子邮件），诱使用户去访问一个包含恶意代码的 URL，当受害者点击这些专门设计的链接的时候，恶意代码会直接在受害者主机上的浏览器执行。反射型XSS通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端 Cookies 或进行钓鱼欺骗。

http://xxx/article?keyword=<script>alert('嘿嘿嘿');</script>

DOM型：是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞。

地址栏

https://www.abc.com/hello#<img%20src=""%20onerror="alert('xss')">

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box"></div>

  <script>
    var hash = window.location.hash.slice(1);
    var box = document.getElementById('box');
    box.innerHTML = decodeURI(hash);

  // box.innerHTML = decodeURIComponent(hash);

  //  JavaScript 1.5 版中已弃用
  // box.innerHTML = unescape(hash);
  </script>
</body>

</html>

解决方案（前端处理）

在vue中

v-html是不会被转义的，并且框架内部会明确的告诉浏览器：下面要设置的内容是文本（.innerText），还是属性（.setAttribute），还是样式（.style）等等。浏览器不会被轻易的被欺骗，执行预期外的代码了。

<span>{{keyword}}</span>

// 如果 keyword 是 <script>alert('嘿嘿嘿');</script> ，则会转换成

&lt;script&gt;alert(&quot;嘿嘿嘿&quot;)&lt;/script&gt;

在react中

可以使用 dompurify 对 HTML 内容进行净化处理

步骤

1、安装第三方包

npm i dompurify @types/dompurify -D

不用 ts 可以不需要下 @types/dompurify

2、在页面中调用 dompurify 来对文章正文内容做净化：

import DOMPurify from 'dompurify'

<span
  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(keyword || '') }}
  >
</span>

思ۣۖิิۣۖิ❧❦空❧❦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫