//防御XSS攻击 //
（1）设置HttpOnly
我们都知道，攻击者一般进行XSS攻击，大部分的目的都是为了获取用户的cookie， 那么我们就可以设置一下 cookie 的 HttpOnly 。当给 cookie 设置了 HttpOnly 时，在前端，就无法通过 js 代码获取到 cookie 的值，即 document.cookie 将得到一个空值，说明此时的 cookie 是一个不可读不可写的状态， 攻击者也就无法获取到想要的用户 cookie 信息了。
那这里呢，我就对如何设置HttpOnly进行讲解了，因为一般都是后端设置的，想要了解的小伙伴可以自行搜索一下，也非常的简单。
还有一点要说一下， 设置HttpOnly 并不是防御住了XSS攻击， 只是说不会让攻击者得到用户 cookie 信息， 所以我们还需要进行别的防御操作。
（2）转义字符串
我们在了解完三种XSS攻击方式以后发现，XSS攻击大多都是由数据的输入和输出作为攻击点进行攻击， 所以我们就需要在这几个点，对数据进行一下过滤，即前端数据输入和输出、后端数据输入和输出。
那么如何对数据进行过滤呢？我们可以来封装一个函数：
function escapeHTML(str) { return String(str) .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '&quto;') .replace(/'/g, ''') .replace(/`/g, '`') .replace(/\//g, '/')}
这里将几个攻击者常用的输入内容都进行了转移，这样就避免了浏览器解析成了脚本代码。
- 防御DOM型跨站攻击
还是拿上面DOM型跨站攻击里的例子来说， 因为 js 代码是获取了文本框里的内容，然后不经过转移就进行输入， 所以才被浏览器解析成了脚本代码。我们则需要将数据输出前进行过滤一下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> </head><body> <input type="text" id="content"><button id="btn">添加</button> <script> window.onload = function () { let content = document.querySelector('#content') let btn = document.querySelector('#btn') btn.onclick = function () { //在输入数据前，用我们封装的escapeHTML函数过滤一下 document.write(escapeHTML(content.value)) } }</script></body></html>
来看一下这时，输入一段脚本代码会发生什么
我们输入的文本内容经过过滤以后，并没有被浏览器解析成脚本代码，而是一串字符串的形式，这样就做到了DOM型跨站攻击的防御。
- 防御反射型跨站攻击
这种类型的攻击是用户先访问了服务器，然后服务器返回给客户端进行渲染的， 所以我们在将数据发送给服务器前，需要对发送的数据进行过滤，其实后端在接收这个数据前和发送数据给客户端前，也应该做一下过滤。原因呢，很简单，因为攻击者可以用伪造请求的方式，绕过前端的数据过滤，直接请求服务器，这里不懂的小伙伴也没事， 我们主要是将前端的防御，想知道更多的可以去搜索一下资料。
这里给大家列举了，可能会被反射型跨站攻击的点， 在向这几个地方输入值的时候， 一定要进行数据的过滤
针对不同的值，我们要做不同的过滤处理，因为我的能力有限，所以我从网上找了一个图，以及一个成熟的转义这些数据的库给大家，感兴趣的可以去学习一下。
js-xss库，可以用来过滤不同的数据，下面放上github地址:https://github.com/leizongmin/js-xss
// 总结 //
总结一下就是，不要相信任何来源的数据（包括用户输入的、服务器传过来的），无论拿到什么数据，输入输出前都必须先进行过滤转译！！！
