常见的是:恶意链接。
比如我现在做一个demo。在本地启动一个简单的服务器,然后在页面上点击一个链接后,比如如下代码:html代码如下:
然后node中app.js 代码如下:
router.get(‘/xss’, (ctx, next) => {
ctx.body = ‘’;
});
router.get(‘/testcookie’, (ctx, next) => {
console.log(ctx.cookies.get(‘connect.sid’));
ctx.body = ‘’;
next();
});
如上代码,当用户点击xxs 攻击恶意链接时候,页面会跳转到 http://localhost:3001/xss 攻击者预先准备的页面,然后会返回攻击者准备的js脚本,该js脚本就在浏览器中执行了,如下所示:
当用户点击 testcookie 攻击 这个链接的时候,首先要保证页面上有cookie,比如我请求如下的cookie:
然后我们点击 testcookie 该链接,也会调用node中的 router.get(’/testcookie’, (ctx, next) => {}) 这个请求获取到cookie,如下所示:
如上我们就可以很容易通过xss攻击拿到对方的cookie信息了。
===========================================================================
存储型XSS的原理是:主要是将恶意代码上传或存储到服务器中,下次只要受害者浏览包含此恶意代码的页面就会执行恶意代码。
比如我现在做了一个博客网站,然后攻击者在上面发布了一篇文章,内容是如下: 如果我没有对该文章进行任何处理的话,直接存入到数据库中,那么下一次当其他用户访问该文章的时候,服务器会从数据库中读取后然后响应给客户端,那么浏览器就会执行这段脚本,然后攻击者就会获取到用户的cookie,然后会把cookie发送到攻击者的服务器上了。
因此存储型XSS的攻击步骤如下:
-
攻击者将恶意代码提交到目标网站数据库中。
-
用户打开目标网站时,网站服务器将恶意代码从数据库中取出,然后拼接到html中返回给浏览器中。
-
用户浏览器接收到响应后解析执行,那么其中的恶意代码也会被执行。
-
那么恶意代码执行后,就能获取到用户数据,比如上面的cookie等信息,那么把该cookie发送到攻击者网站中,那么攻击者拿到该cookie然后会冒充该用户的行为,调用目标网站接口等违法操作。
如何防范?
-
后端需要对提交的数据进行过滤。
-
前端也可以做一下处理方式,比如对script标签,将特殊字符替换成HTML编码这些等。
==================================================================================
我们客户端的js可以对页面dom节点进行动态的操作,比如插入、修改页面的内容。比如说客户端从URL中提取数据并且在本地执行、如果用户在客户端输入的数据包含了恶意的js脚本的话,但是这些脚本又没有做任何过滤处理的话,那么我们的应用程序就有可能受到DOM-based XSS的攻击。因此DOM型XSS的攻击步骤如下:
-
攻击者构造出特殊的URL、在其中可能包含恶意代码。
-
用户打开带有恶意代码的URL。
-
用户浏览器收到响应后解析执行。前端使用js取出url中的恶意代码并执行。
-
执行时,恶意代码窃取用户数据并发送到攻击者的网站中,那么攻击者网站拿到这些数据去冒充用户的行为操作。调用目标网站接口执行攻击者一些操作。
DOM XSS 是基于文档对象模型的XSS。一般有如下DOM操作:
-
使用document.write直接输出数据。
-
使用innerHTML直接输出数据。
-
使用location、location.href、location.replace、iframe.src、document.referer、window.name等这些。
比如如下demo:
假如对于变量url的值是:javascript:alert(‘dom-xss’); 类似这样的,那么就会收到xss的攻击了。因此对于DOM XSS主要是由于本地客户端获取的DOM数据在本地执行导致的。因此我们需要对HTML进行编码,对JS进行编码来防止这些问题产生。具体如何编码可以请看我下面的 XSS 如何防范那个地方即可。
我们接下来看看demo代码吧:
- 使用document.write直接输出导致浏览器解析恶意代码
代码如下:
页面渲染完成后,点击弹窗如下所示:
2. 使用innerHTML直接输出导致浏览器解析恶意代码
代码如下:
点击一样也会弹窗窗口的。也会一样执行xss攻击的。
- 使用location/location.href/location.replace/iframe.src 造成的XSS
如下代码:
刷新下页面,也会弹出窗口执行 xss攻击了。
=============================================================================
在服务器端设置cookie的时候设置 http-only, 这样就可以防止用户通过JS获取cookie。对cookie的读写或发送一般有如下字段进行设置:
-
http-only: 只允许http或https请求读取cookie、JS代码是无法读取cookie的(document.cookie会显示http-only的cookie项被自动过滤掉)。发送请求时自动发送cookie.
-
secure-only: 只允许https请求读取,发送请求时自动发送cookie。
-
host-only: 只允许主机域名与domain设置完成一致的网站才能访问该cookie。
=====================================================================================
目前该属性被所有的主流浏览器默认开启XSS保护。该参数是设置在响应头中目的是用来防范XSS攻击的。它有如下几种配置:
值有如下几种:默认为1.
-
0:禁用XSS保护。
-
1:启用XSS保护。
1;mode=block; 启用xss保护,并且在检查到XSS攻击是,停止渲染页面。
==============================================================================
我们为什么要防御HTML编码呢?比如如下html代码:<div>content</div>
,在div标签中存在一个输出变量{content}. 那么浏览器在解析的过程中,首先是html解析,当解析到div标签时,再解析 content的内容,然后会将页面显示出来。那假如该{content} 的值是 <script>alert('XSS攻击')</script>
这样的呢?因此该script脚本就会解析并且执行了,从而达到XSS的攻击目标。
因此我们需要将不可信数据放入到html标签内(比如div、span等)的时候需要进行html编码。
编码规则:将 & < > " ’ / 转义为实体字符。如下基本转义代码:
// 使用正则表达式实现html编码
function htmlEncodeByRegExp(str) {
var s = ‘’;
if (str.length === 0) {
return s;
}
return (s + str)
.replace(/&/g, “&”)
.replace(/</g, “<”)
.replace(/>/g, “>”)
.replace(/ /g, " ")
.replace(/'/g, “'”)
.replace(/“/g, “””)
.replace(///g, ‘/’);
}
// 使用正则表达式实现html解码
function htmlDecodeByRegExp(str) {
var s = ‘’;
if (str.length === 0) {
return s;
}
return (s + str)
.replace(/&/g, “&”)
.replace(/</g, “<”)
.replace(/>/g, “>”)
.replace(/ /g, " ")
.replace(/'/g, “'”)
.replace(/“/g, “””)
.replace(///g, “/”);
}
=========================================================================================
和HTML编码一样,html中的属性也要进行编码,比如 这样的,name是input的属性,因此在html解析时,会对name属性进行编码,因为假如{name} 的值为:" " οnclick=“alert(‘属性XSS’)” " " 这样的,也就是说input变成这样的了,<input name=" " οnclick=“alert(‘属性XSS’)” " ">,input属性name被插入onclick事件了,因此也需要针对这种常规的html属性,都需要对其进行HTML属性编码。
因此我们需要将不可信数据放入html属性时(不含src、href、style 和 事件处理函数(onclick, onmouseover等))。需要进行HTML Attribute 编码。
编码规则:除了字母、数字、字符以外,使用 &#x;16进制格式来转义ASCII值小于256所有的字符。
因此编码代码如下:
function encodeForHTMLAttibute(str) {
let encoded = ‘’;
for(let i = 0; i < str.length; i++) {
let ch = hex = str[i];
if (!/[A-Za-z0-9]/.test(str[i]) && str.charCodeAt(i) < 256) {
hex = ‘&#x’ + ch.charCodeAt(0).toString(16) + ‘;’;
}
encoded += hex;
}
return encoded;
};
=====================================================================================
在上面的 XSS 防御HTML Attribute编码中我们是可以防御XSS攻击,但是它只能防御的是HTML通用属性,并不是全部属性,在html中还存在很多支持协议解析的html属性,比如 onclick, onerror, href, src 等这些,类似这些属性我们是无法通过HTML编码来防范XSS攻击的。因为浏览器会先解析html编码的字符,将其转换为该属性的值,但是该属性本身支持JS代码执行,因此游览器在HTML解码后,对该属性的值进行JS解析,因此会执行响应的代码。
比如如下代码:<a href="javascript:alert('href xss')" target="_blank">href xss</a>
是可以点击的。 如果我们对该进行html属性编码一下,还是可以点击的,
如代码:<a href="javascript:alert('href xss HTML编码无效')" target="_blank">
href xss HTML属性编码无效 页面还是可以点击的。如下图所示:
=================================================================================
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)
![](https://i-blog.csdnimg.cn/blog_migrate/645aca96405968f2e71f1cdccc74562f.jpeg)
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)
![](https://i-blog.csdnimg.cn/blog_migrate/645aca96405968f2e71f1cdccc74562f.jpeg)
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
[外链图片转存中…(img-MAxcd9Zf-1711655856862)]
[外链图片转存中…(img-9AXa9oSG-1711655856862)]