web安全之跨站脚本攻击xss

定义:

后果

比如黑客可以通过恶意代码,拿到用户的cookie就可以去登陆了

分类

存储型

攻击者把恶意脚本存储在目标网站的数据库中(没有过滤直接保存),当用户访问这个页面时,恶意脚本会从数据库中被读取并在用户浏览器中执行。比如在那些允许用户评论的网站, 用户越多,中招的越多

流程

反射型

攻击者通过构造恶意链接,诱使用户点击,恶意脚本随请求发送到目标网站服务器,服务器查看了链接以后以为用户要检索某些信息,并没有进行额外的过滤,服务器的数据库也不需要保存什么信息,就只是返回了对应的结果,浏览器只是把结果呈现在页面.

例子

反射型一般是利用网页的检索功能, 你输入的检索信息会显示在页面中

如果url加一个script标签, 也就注入网页成为内容的一部分,浏览器就会去执行这个js代码

DOM型

攻击者在url中插入恶意代码,前端直接从url中获取恶意代码并且输出到页面,导致恶码被执行, 跟反射型很像,但浏览器并未把恶意代码发送给服务器, 是前端直接执行的. 比如url中的hash部分是不会发送给服务器的,即url前面的部分服务器照常请求,也就是浏览器的渲染分了两步走,给黑客留下可以攻击的漏洞

"#"部分的更改不会重新发送请求, 此页面将hash注入到了页面,黑客就可以利用这个点往页面注入内容, 比如获取cookie并发送等

三者区别

DOM 型取出和执⾏恶意代码由浏览器端完成,不涉及将恶意脚本发送到服务器,属于前端JavaScript 自身的安全漏洞,而其他两种属于服务端的安全漏洞。

应对策略

1. 对用户输入进行严格的验证和过滤

  • 前端验证
  1. 通过h5表单属性,如pattern正则表达式模式,type字段的属性进行限制等;
  2. js中的动态验证: 通过对表单输入变化或者提交事件添加addevenlistener监听,如限制用户输入的长度
  • 服务端验证
    无论客户端是否验证,都必须在服务器端再次验证输入。
    可以使用后端语言的内置函数或正则表达式进行验证。

2. 输入过滤

  1. 用户输入显示在网页上之前,将其中的特殊字符(如 <, >, &, ', ")转义,防止其被解释为脚本, 防止 XSS 攻击。
  2. URL 编码: 将 URL 中的特殊字符转换为 % 加上两位十六进制数的形式,以确保 URL 安全解析
bash 复制代码
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

相关推荐
恰薯条的屑海鸥6 分钟前
零基础在实践中学习网络安全-皮卡丘靶场(第十五期-URL重定向模块)
学习·安全·web安全·渗透测试·网络安全学习
Tipray200634 分钟前
让敏感数据在流转与存储中始终守护在安全范围
安全
前端页面仔1 小时前
易语言是什么?易语言能做什么?
开发语言·安全
Guheyunyi9 小时前
监测预警系统重塑隧道安全新范式
大数据·运维·人工智能·科技·安全
IT科技那点事儿10 小时前
引领AI安全新时代 Accelerate 2025北亚巡展·北京站成功举办
人工智能·安全
竹言笙熙10 小时前
Polarctf2025夏季赛 web java ez_check
java·学习·web安全
lubiii_13 小时前
SQL手工测试(MySQL数据库)
数据库·mysql·web安全·网络安全
恰薯条的屑海鸥15 小时前
零基础在实践中学习网络安全-皮卡丘靶场(第十四期-XXE模块)
网络·学习·安全·web安全·渗透测试
20242817李臻15 小时前
20242817李臻-安全文件传输系统-项目验收
数据库·安全
DevSecOps选型指南1 天前
2025软件供应链安全最佳实践︱证券DevSecOps下供应链与开源治理实践
网络·安全·web安全·开源·代码审计·软件供应链安全