社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
前端技术不断发展,安全性的问题也越来越受到关注。作为前端工程师,保障网络安全也越来越重要。
XSS攻击
XSS
(Cross Site Scripting)跨站脚本攻击。
攻击者在网站上植入非法的html
或是JavaScript
代码,将受害者重定向到一个被攻击者控制的恶意网站,在恶意网站中对用户的隐私(如cookie
)进行盗取。
反射型XSS
攻击
对用户的输入进行简单的浏览器反射。
常见的在网页端设置一个连接,当用户点击时,将跳转至被攻击的网站,实现反射XSS
攻击。
来看例子
在本地设置一个静态页面html
中有一个a
的连接标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS攻击</title>
</head>
<body>
<a href="http:127.0.0.1:3000">XSS攻击</a>//该连接指向另一危险页面
</body>
</html>
当点击连接后,将会跳转到收到控制的XSS
页面。
const http = require('http')
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/plain'
})
res.end('XSS 非法攻击')
}).listen(3000)
console.log("http:127.0.0.1:3000/")
存储型XSS攻击
存储型XSS
攻击的用户将恶意脚本植入到服务器中,当其他用户访问网站时将会收到恶意脚本的攻击。
常见的场景就是博客或评论系统中,攻击者写下恶意的脚本发布,当其他用户访问时,浏览器将自动执行恶意脚本。
如下代码
攻击者即可在输入框中输入恶意代码植入服务器,进而实现存储型XSS
攻击。
<input type="text" id="input">
<button id="btn">Submit</button>
<script>
const input = document.getElementById('input');
const btn = document.getElementById('btn');
let val;
input.addEventListener('change', (e) => {
val = e.target.value;
}, false);
btn.addEventListener('click', (e) => {
fetch('http://localhost:8001/save', {
method: 'POST',
body: val //植入的恶意代码将会通过POST请求传递到服务器
});
}, false);
</script>
基于DOM
的XSS
攻击使用脚本对页面DOM
进行修改,和反射型XSS
一样,均是浏览器本身的行为。
<h2>XSS: </h2>
<input type="text" id="input">
<button id="btn">Submit</button>
<div id="div"></div>
<script>
const input = document.getElementById('input');
const btn = document.getElementById('btn');
const div = document.getElementById('div');
let val;
input.addEventListener('change', (e) => {
val = e.target.value;
}, false);
btn.addEventListener('click', () => {
div.innerHTML = `<a href=${val}>testLink</a>`//在click事件后,产生DOM元素的改变。
}, false);
</script>
HttpOnly
防止cookie
被盗用HttpOnly
的概念,给cookie
添加HttpOnly
属性将会有效防止JavaScript
代码对cookie
的截获。Vue.js
中的decodingMap
跨域站点请求伪造(Cross Site Request Forgery)
攻击者非法获取用户cookie
,伪造用户的登录状态在用户不知情的情况下,实现对服务器的未授权请求。
场景:浏览器同时打开安全网站和一个危险网站时,在危险网站中攻击者通过用户本地浏览器为媒介,获取用户的cookie
值进而与安全网站进行通信,实现跨域站点请求伪造。
如下代码
<p>CSRF 攻击者准备的网站:</p>
<img src="http://www.c.com:8002/content/delete/87343">
当用户访问时攻击者将CSRF
的攻击携带在img
标签,将会发起相应的delete
请求,形成跨域站点请求伪造。
在此,攻击者并没有获取cookie
的详细值,仅仅使用cookie
就实现了请求伪造。
CSRF的预防
Referer
Http
的头部携带Referer
,用于验证发送请求的来源地址,借此可检查出合法的源。token
HTTP
首部添加由后端随机生成的token
值,以此来防止CSRF
的攻击。SQL注入
用户输入参数中输入SQL
语法,破坏原有的SQL
结构,来实现相应的攻击。
主要原因
SQL
语句是单纯使用字符串拼接。SQL
语句中。猛虎分享
一起进步
共勉
有需要学习资料的小伙伴可以关注微信公众号趣玩前端每日分享前端技术知识点。可进微信群和我们一起学习,一起探讨,还可以领取最新的前端学习资源。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!