![cover](https://i-blog.csdnimg.cn/direct/a86a7a6df9d345a08bfebdbb49a37c89.png)
web安全之跨站脚本攻击xss
xss跨站脚本攻击。它指的是恶意攻击者往web页面里插入恶意js代码,当用户浏览该页之时,嵌入其中web里面的js代码会被执行,从而达到恶意的特殊目的。
定义:
后果
比如黑客可以通过恶意代码,拿到用户的cookie就可以去登陆了
分类
存储型
攻击者把恶意脚本存储在目标网站的数据库中(没有过滤直接保存),当用户访问这个页面时,恶意脚本会从数据库中被读取并在用户浏览器中执行。比如在那些允许用户评论的网站, 用户越多,中招的越多
流程
反射型
攻击者通过构造恶意链接,诱使用户点击,恶意脚本随请求发送到目标网站服务器,服务器查看了链接以后以为用户要检索某些信息,并没有进行额外的过滤,服务器的数据库也不需要保存什么信息,就只是返回了对应的结果,浏览器只是把结果呈现在页面.
例子
反射型一般是利用网页的检索功能, 你输入的检索信息会显示在页面中
如果url加一个script标签, 也就注入网页成为内容的一部分,浏览器就会去执行这个js代码
DOM型
攻击者在url中插入恶意代码,前端直接从url中获取恶意代码并且输出到页面,导致恶码被执行, 跟反射型很像,但浏览器并未把恶意代码发送给服务器, 是前端直接执行的. 比如url中的hash部分是不会发送给服务器的,即url前面的部分服务器照常请求,也就是浏览器的渲染分了两步走,给黑客留下可以攻击的漏洞
“#”部分的更改不会重新发送请求, 此页面将hash注入到了页面,黑客就可以利用这个点往页面注入内容, 比如获取cookie并发送等
三者区别
DOM 型取出和执⾏恶意代码由浏览器端完成,不涉及将恶意脚本发送到服务器,属于前端JavaScript 自身的安全漏洞,而其他两种属于服务端的安全漏洞。
应对策略
1. 对用户输入进行严格的验证和过滤
- 前端验证
- 通过h5表单属性,如pattern正则表达式模式,type字段的属性进行限制等;
- js中的动态验证: 通过对表单输入变化或者提交事件添加addevenlistener监听,如限制用户输入的长度
- 服务端验证
无论客户端是否验证,都必须在服务器端再次验证输入。
可以使用后端语言的内置函数或正则表达式进行验证。
2. 输入过滤
- 用户输入显示在网页上之前,将其中的特殊字符(如 <, >, &, ', ")转义,防止其被解释为脚本, 防止 XSS 攻击。
- URL 编码: 将 URL 中的特殊字符转换为 % 加上两位十六进制数的形式,以确保 URL 安全解析
let userInput = 'hello world';
let encodedInput = encodeURIComponent(userInput);
console.log(encodedInput); // hello%20world
3. 内容安全策略CSP
在网关通过HTTP 响应头设Content-Security-Policy或者HTML 标签设置,本质是建立一个白名单,告诉浏览器哪些外部资源可以加载和执行,从而防止恶意代码的注入攻击。
CSP 通过指定允许的资源来源,阻止了恶意脚本、样式表、图像等资源的加载。例如,通过配置 script-src,可以只允许从可信任的域名加载脚本,任何来自其他域名的脚本都会被阻止
4. http-only
黑客本质是想获取cookie拿到客人信息, 而Cookie有一个http-only属性,表示只能被http请求携带,不能通过客户端js脚本访问cookie,
5. textContent代替innerHTML(反射型)
所以前端应该避免使用innerHTML、document.write, v-html、dangerouslySetInnerHTML 把不可信的数据作为 HTML 插到页面上,而应尽量使用 textContent 等。
textContent 属性用于设置或获取一个元素的文本内容。与 innerHTML 不同,textContent 仅处理文本,不会解析 HTML 标签。
参考视频:
https://www.bilibili.com/video/BV1rg411v7B8/?spm_id_from=333.788&vd_source=bb7c78c7981f6b653a3daf2f416312cb
https://www.bilibili.com/video/BV1ww411p7DG/?spm_id_from=pageDriver&vd_source=bb7c78c7981f6b653a3daf2f416312cb
更多推荐
所有评论(0)