跨站脚本攻击（XSS）是客户端脚本安全的头号大敌。本文章深入探讨 XSS 攻击原理，下一章（XSS 攻击进阶）将深入讨论 XSS 进阶攻击方式。
本系列将持续更新。
XSS 简介
XSS（Cross Site Script），全称跨站脚本攻击，为了与 CSS（Cascading Style Sheet） 有所区别，所以在安全领域称为 XSS。
XSS 攻击，通常指黑客通过 HTML 注入 篡改网页，插入恶意脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击行为。在这种行为最初出现之时，所有的演示案例全是跨域行为，所以叫做 "跨站脚本" 。时至今日，随着Web 端功能的复杂化，应用化，是否跨站已经不重要了，但 XSS 这个名字却一直保留下来。
随着 Web 发展迅速发展，JavaScript 通吃前后端，甚至还可以开发APP，所以在产生的应用场景越来越多，越来越复杂的情况下， XSS 愈来愈难统一针对，现在业内达成的共识就是，针对不同的场景而产生的不同 XSS ，需要区分对待。可即便如此，复杂应用仍然是 XSS 滋生的温床，尤其是很多企业实行迅捷开发，一周一版本，两周一大版本的情况下，忽略了安全这一重要属性，一旦遭到攻击，后果将不堪设想。
那什么是 XSS 呢？我们看下面一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>XSS</title>
</head>
<body>
<div id="t"></div>
<input id="s" type="button" value="获取数据" onclick="test()">
</body>
<script>
function test() {
// 假设从后台取出的数据如下
const arr = ['1', '2', '3', '<img src="11" onerror="alert(\'我被攻击了\')" />']
const t = document.querySelector('#t')
arr.forEach(item => {
const p = document.createElement('p')
p.innerHTML = item
t.append(p)
})
}
</script>
</html>
这个时候我们在页面上点击 获取数据 按钮时，页面上会出现如下信息：
你会发现，本应该作为数据展示在界面上的内容居然执行了，这显然是开发者不希望看到的。
XSS 攻击类型
XSS 根据效果的不同可以分为如下几类：
反射型 XSS
简单来说，反射型 XSS 只是将用户输入的数据展现到浏览器上（从哪里来到哪里去），即需要一个发起人（用户）来触发黑客布下的一个陷阱（例如一个链接，一个按钮等），才能攻击成功，一般容易出现在搜索页面、留言板块。这种反射型 XSS 也叫做 非持久型 XSS（No-persistent XSS） 。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="t"></div>
<input id="s" type="button" value="获取数据" onclick="test()">
</body>
<script>
function test() {
const arr = ['1', '2', '3', '<img src="11" onerror="console.log(window.localStorage)" />']
const t = document.querySelector('#t')
arr.forEach(item => {
const p = document.createElement('p')
p.innerHTML = item
t.append(p)
})
}
</script>
</html>
假设这是一个留言板块，加载到这一页时，页面会输出：
黑客可以轻易盗取存储在你本地浏览器的各种信息，进而模拟登陆信息，黑入账户，进行各种操作。
存储型 XSS
存储型 XSS 会把用户输入的数据 保存 在服务器端，这种 XSS 十分稳定，十分有效，效果持久。存储型 XSS 通常叫做 "持久型 XSS（Persistent XSS）"，即存在时间比较长。
比较常见的场景就是，黑客写下一篇包含恶意代码的文章，文章发表后，所有访问该博客文章的用户都会执行这一段代码，进行恶意攻击。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="t">
这是我写的一篇文章
</div>
</body>
<script>
console.log(navigator.userAgent)
</script>
</html>
直接输出了浏览器信息，黑客可以获取到这些信息后，发送到自己的服务器，随意操作。
DOM Based XSS
实际上，这种类型的 XSS 与是否存储在服务器端无关，从效果上来说也是反射型 XSS，单独划分出来是因为此类 XSS 形成的原因比较特殊。
简单来说，通过修改页面 DOM 节点形成的 XSS，称之为 DOM Based XSS。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>XSS</title>
</head>
<body>
<div id="t"></div>
<input type="text" id="text" value="">
<input type="button" id="s" value="search" onclick="test()">
</body>
<script>
function test() {
const str = document.querySelector('#text').value
document.querySelector('#t').innerHTML = '<a href="' + str + '" >查找结果</a>'
}
</script>
</html>
该页面的作用是，在输入框内输入一个内容，跳出查找结果能直接跳转，效果如下：
点击查找结果后，页面会自动跳到百度（毒）页面，但是细心的我们会发现，这字符串拼接有可乘之机啊，输入" onclick=alert(/XSS/) //：
果然，页面执行了我们输入的东西，上面的内容是，第一个双引号闭合掉href的第一个双引号，然后插入onclick事件，最后注释符 //注释掉第二个双引号，点击跳转链接，脚本就被执行了。
web安全系列（一）：XSS 攻击基础及原理的更多相关文章
-
使用 PHP 构建的 Web 应用如何避免 XSS 攻击
本文首先简单介绍开发测试人员如何对 Web 应用进行 XSS 漏洞测试,如何借助工具绕过客户端 JavaScript 校验输入恶意数据:然后针对使用 PHP 语言构建的 Web 站点,从在输出端对动态 ...
-
Java Web使用过滤器防止Xss攻击，解决Xss漏洞
转: Java Web使用过滤器防止Xss攻击,解决Xss漏洞 2018年11月11日 10:41:27 我欲乘风,直上九天 阅读数:2687 版权声明:本文为博主原创文章,转载请注明出处!有时候 ...
-
Web 安全漏洞之 XSS 攻击
什么是 XSS 攻击 XSS(Cross-Site Scripting)又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行.XSS是一种经常出现在 Web 应用程序中的计算机安全漏洞,是由于 ...
-
如何让Asp.net Web Api全局预防Xss攻击
一.概述 二.什么是XSS 三.预防方法 四.在WebApi中如何实现 在实现之前,需要了解ASP.NET WEB API的pipeline机制. 如上,可以采用多种方式进行参数的过滤 1.重写Del ...
-
Web API系列之二WebApi基础框架搭建
本文主要介绍如何搭建一个WebApi的项目.关于如何搭建WebApi的方式一共有两种: 一.通过vs直接新建一个WebApi的项目,步骤如下: 第一步: 新建一个空的Web应用程序,可以理解为作为We ...
-
Web Api全局预防Xss攻击
本文转载自https://www.cnblogs.com/ruanyifeng/p/4739807.html.对第二种过滤方法的代码进行了一些修改和注释,记录一下免得以后忘了.已经测试过,应该可以直接 ...
-
Web安全系列（三）：XSS 攻击进阶（挖掘漏洞）
前言 在前些章节 (web安全系列(一):XSS 攻击基础及原理)以及(Web安全系列(二):XSS 攻击进阶(初探 XSS Payload))中,我详细介绍了 XSS 形成的原理以及 XSS 攻击的 ...
-
XSS攻击及防御（转）
add by zhj: 略有修改.另外还有一篇文章值得参考,使用 PHP 构建的 Web 应用如何避免 XSS 攻击,总得来说防御XSS的方法是客户端和服务端都 要对输入做检查,如果只有客户端做检查, ...
-
.net解决Xss攻击
首先要明白什么是Xss攻击 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端脚本.攻击者利用XSS漏 ...
随机推荐
-
QT下调试基于ros的catkin项目
1.首先告诉qt ros的搜索路径,通过修改qt creator 桌面启动程序来实现 sudo gedit ~/.local/share/applications/DigiaQtOpenSour ...
-
[RxJava^Android]项目经验分享 --- 失败重试
简单介绍一下业务逻辑:获取字符串,如果获取失败进行10次重试,超出10次未成功视为失败. 模拟获取字符串场景 代码块 class MsgTool { int count; String getMsg( ...
-
HDU5831
Rikka with Parenthesis II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
-
Cocos2d坐标系转换
Cocos2d-x坐标系和OpenGL坐标系相同,都是起源于笛卡尔坐标系(高中数学里面那种). 笛卡尔坐标系 笛卡尔坐标系中定义右手系原点在左下角,x向右,y向上,z向外,OpenGL坐标系为笛卡尔右 ...
-
一、富有表现力的JavaScript
第一章:富有表现力的JavaScript 1.1 JavaScript的灵活性 1.2 弱类型语言 1.3 函数是一等对象 1.4 对象的易变性 1.5 继承 1.6 JavaScript ...
-
JMS(java消息服务)整合Spring项目案例
转载自云栖社区 摘要: Sprng-jms消息服务小项目 所需的包: spring的基础包 spring-jms-xx包 spring-message–xx包 commons-collection-x ...
-
《SpringMVC数据绑定入门》笔记
基本类型 最好使用封装类型 简单多数据&多层级对象 简单多数据 单个对象,直接使用属性名=值即可 多层级对象 属性.属性=值即可 同属性多对象 WebDataBinder只在当前类中生效,不是 ...
-
Django学习日记02_项目环境
创建一个工程: django-admin.py startproject mySite 将会产生以下文件: mySite/ manage.py mySite/ __init_ ...
-
C# Note7:MVVM模式之数据绑定
一.资源说明 (1)本文参考自: 一步步走进WPF的MVVM模式(二):数据绑定 WPF之数据绑定总结 二.正文 数据绑定 (Data Binding)是WPF最重要的特性之一,也是实现 MVVM( ...
-
TraceView 使用详解 android eclipse
先看命令 (配置好环境变量的情况下,直接traceview+空格+ trace文件路径即可): TraceView是什么 Traceview是android平台配备一个很好的性能分析的工具.它可以通过 ...