XSS攻击原理和防御;XSS攻击方式;前端安全之XSS;Cross Site Scripting

本文主要是介绍XSS攻击原理和防御;XSS攻击方式;前端安全之XSS;Cross Site Scripting,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

XSS定义

XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻击。

跨站脚本的重点不在‘跨站’上,而在于‘脚本’上。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。

XSS攻击方式

1,反射型 XSS

反射型XSS,也叫非持久型XSS,是指发生请求时,XSS代码出现在请求URL中,作为参数提交到服务器,服务器解析并响应。响应结果中包含XSS代码,最后浏览器解析并执行。

从概念上可以看出,反射型XSS代码是首先出现在URL中的,然后需要服务端解析,最后需要浏览器解析之后XSS代码才能够攻击。

举一个小栗子。

使用express起一个web服务器,然后设置一下请求接口。通过ajax的GET请求将参数发往服务器,服务器解析成json后响应。将返回的数据解析后显示到页面上。(没有对返回的数据进行解码和过滤等操作。)

<textarea name="txt" id="txt" cols="80" rows="10">
<button type="button" id="test">测试</button>

var test = document.querySelector('#test')
test.addEventListener('click', function () {var url = `/test?test=${txt.value}`   // 1. 发送一个GET请求var xhr = new XMLHttpRequest()xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {// 3. 客户端解析JSON,并执行var str = JSON.parse(xhr.responseText).testvar node = `${str}`document.body.insertAdjacentHTML('beforeend', node)} else {console.log('error', xhr.responseText)}}}xhr.open('GET', url, true)xhr.send(null)
}, false)
express
var express = require('express');
var router = express.Router();router.get('/test', function (req, res, next) {
// 2. 服务端解析成JSON后响应
res.json({test: req.query.test
})
})

现在我们通过给textarea添加一段有攻击目的的img标签,

<img src="null" onerror='alert(document.cookie)' />

实际的页面时这样的。

ok现在,我们点击<测试>按钮,一个XSS攻击就发生了。下面图片中是获取了本地的部分cookie信息

实际上,我们只是模拟攻击,通过alert获取到了个人的cookie信息。但是如果是黑客的话,他们会注入一段第三方的js代码,然后将获取到的cookie信息存到他们的服务器上。这样的话黑客们就有机会拿到我们的身份认证做一些违法的事情了。

以上,存在的一些问题,主要在于没有对用户输入的信息进行过滤,同时没有剔除掉DOM节点中存在的一些有危害的事件和一些有危害的DOM节点。

2,存储型 XSS

存储型XSS,也叫持久型XSS,主要是将XSS代码发送到服务器(不管是数据库、内存还是文件系统等。),然后在下次请求页面的时候就不用带上XSS代码了。

最典型的就是留言板XSS。用户提交了一条包含XSS代码的留言到数据库。当目标用户查询留言时,那些留言的内容会从服务器解析之后加载出来。浏览器发现有XSS代码,就当做正常的HTML和JS解析执行。XSS攻击就发生了。

3,DOM XSS
DOM XSS攻击不同于反射型XSS和存储型XSS,DOM XSS代码不需要服务器端的解析响应的直接参与,而是通过浏览器端的DOM解析。这完全是客户端的事情。

DOM XSS代码的攻击发生的可能在于我们编写JS代码造成的。我们知道eval语句有一个作用是将一段字符串转换为真正的JS语句,因此在JS中使用eval是很危险的事情,容易造成XSS攻击。避免使用eval语句。

如以下代码

test.addEventListener('click', function () {var node = window.eval(txt.value)console.log(node)
}, false)

txt中的代码如下

<img src='null' onerror='alert(123)' />

以上通过eval语句就造成了XSS攻击。

XSS危害

通过document.cookie盗取cookie
使用js或css破坏页面正常的结构与样式
流量劫持(通过访问某段具有window.location.href定位到其他页面)
Dos攻击:利用合理的客户端请求来占用过多的服务器资源,从而使合法用户无法得到服务器响应。
利用iframe、frame、XMLHttpRequest或上述Flash等方式,以(被攻击)用户的身份执行一些管理动作,或执行一些一般的如发微博、加好友、发私信等操作。
利用可被攻击的域受到其他域信任的特点,以受信任来源的身份请求一些平时不允许的操作,如进行不当的投票活动。

XSS防御

从以上的反射型和DOM XSS攻击可以看出,我们不能原样的将用户输入的数据直接存到服务器,需要对数据进行一些处理。以上的代码出现的一些问题如下

没有过滤危险的DOM节点。如具有执行脚本能力的script, 具有显示广告和色情图片的img, 具有改变样式的link, style, 具有内嵌页面的iframe, frame等元素节点。
没有过滤危险的属性节点。如事件, style, src, href等
没有对cookie设置httpOnly。
如果将以上三点都在渲染过程中过滤,那么出现的XSS攻击的概率也就小很多。

解决方法如下

1, 对cookie的保护

对重要的cookie设置httpOnly, 防止客户端通过document.cookie读取cookie。服务端可以设置此字段。
对用户输入数据的处理

2, 编码:不能对用户输入的内容都保持原样,对用户输入的数据进行字符实体编码。对于字符实体的概念可以参考文章底部给出的参考链接。
3, 解码:原样显示内容的时候必须解码,不然显示不到内容了。
4, 过滤:把输入的一些不合法的东西都过滤掉,从而保证安全性。如移除用户上传的DOM属性,如onerror,移除用户上传的Style节点,iframe, script节点等。
通过一个例子讲解一下如何处理用户输入的数据。

实现原理如下:

存在一个parse函数,对输入的数据进行处理,返回处理之后的数据
对输入的数据(如DOM节点)进行解码(使用第三方库 he.js)
过滤掉一些元素有危害的元素节点与属性节点。如script标签,onerror事件等。(使用第三方库HTMLParser.js)

<script src='/javascripts/htmlparse.js'></script>
<script src='/javascripts/he.js'></script>

// 第三方库资源在文章底部给出

// parse函数实现如下

function parse (str) {// str假如为某个DOM字符串// 1. result为处理之后的DOM节点let result = ''// 2. 解码let decode = he.unescape(str, {strict: true})HTMLParser(decode, {start (tag, attrs, unary) {// 3. 过滤常见危险的标签if (tag === 'script' || tag === 'img' || tag === 'link' || tag === 'style' || tag === 'iframe' || tag === 'frame') returnresult += `<${tag}`for (let i = 0; i < attrs.length; i++) {let name = (attrs[i].name).toLowerCase()let value = attrs[i].escaped// 3. 过滤掉危险的style属性和js事件if (name === 'style' || name === 'href' || name === 'src' || ~name.indexOf('on')) continueresult += ` ${name}=${value}`}result += `${unary ? ' /' : ''} >`},chars (text) {result += text},comment (text) {result += `<!-- ${text} -->`},end (tag) {result += `</${tag}>`}})return result}

因此,有了以上的parse函数之后,就可以避免大部分的xss攻击了。

test.addEventListener('click', function () {// ... 省略部分代码xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {// 3. 客户端解析JSON,并执行// test按钮的点击事件中唯一的变化就是使用parse对服务端返回的数据进行了解码和过滤的处理。var str = parse(JSON.parse(xhr.responseText).test)// 通过parse解析之后返回的数据就是安全的DOM字符串var node = `${str}`document.body.insertAdjacentHTML('beforeend', node)}}}// ... 省略部分代码
}, false)

总结:

1、一旦在DOM解析过程成出现不在预期内的改变(JS代码执行或样式大量变化时),就可能发生XSS攻击
2、XSS分为反射型XSS,存储型XSS和DOM XSS
3、反射型XSS是在将XSS代码放在URL中,将参数提交到服务器。服务器解析后响应,在响应结果中存在XSS代码,最终通过浏览器解析执行。
4、存储型XSS是将XSS代码存储到服务端(数据库、内存、文件系统等),在下次请求同一个页面时就不需要带上XSS代码了,而是从服务器读取。
5、DOM XSS的发生主要是在JS中使用eval造成的,所以应当避免使用eval语句。
6、XSS危害有盗取用户cookie,通过JS或CSS改变样式,DDos造成正常用户无法得到服务器响应。
7、XSS代码的预防主要通过对数据解码,再过滤掉危险标签、属性和事件等

这篇关于XSS攻击原理和防御;XSS攻击方式;前端安全之XSS;Cross Site Scripting的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/723920

相关文章

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操