前端怎么获取cookie的值_作为前端你必须要了解的安全性问题！

前端技术不断发展，安全性的问题也越来越受到关注。作为前端工程师，保障网络安全也越来越重要。

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攻击使用脚本对页面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>

XSS攻击的预防

使用HttpOnly防止cookie被盗用
微软最早提出HttpOnly的概念，给cookie添加HttpOnly属性将会有效防止JavaScript代码对cookie的截获。
浏览器输入检查与转义
永远不相信用户输入
对用户的特殊输入进行转义。如Vue.js中的decodingMap
// vuejs 中的 decodingMap
// 在 vuejs 中，如果输入带 script 标签的内容，会直接过滤掉
const decodingMap = {
'<': '<',
'>': '>',
'"': '"',
'&': '&',
'
': 'n'
}
服务器输出检查与转义
除了对用户输入转义外，对服务器的输出也要进行转义处理。除了保留富文本编辑器外，其他输出都需转义。

CSRF攻击

跨域站点请求伪造(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的预防

验证码
在网络请求是附带验证码，最有效。
验证RefererHttp的头部携带Referer，用于验证发送请求的来源地址，借此可检查出合法的源。
if (req.headers.referer !== 'http://www.c.com:8002/') {
res.write('csrf 攻击');
return;
}
验证token
在HTTP首部添加由后端随机生成的token值，以此来防止CSRF的攻击。

SQL注入

用户输入参数中输入SQL语法，破坏原有的SQL结构，来实现相应的攻击。

主要原因

编写SQL语句是单纯使用字符串拼接。
对用户输入并未足够过滤便添加到SQL语句中。

猛虎分享

一起进步

共勉
有需要学习资料的小伙伴可以关注微信公众号趣玩前端每日分享前端技术知识点。可进微信群和我们一起学习，一起探讨，还可以领取最新的前端学习资源。

2020前端最新学习资源（一）mp.weixin.qq.com