共计 2159 个字符，预计需要花费 6 分钟才能阅读完成。
随着 web 应用的范围越来越广，安全问题也是日益突出，从最初的服务端安全问题到现在的 web 前端安全，各种攻击手段层出不穷，作为前端程序猿，适当的掌握一些安全知识也逐渐成了必备技能。
XSS 攻击
什么是 XSS
XSS，全称 Cross Site Scripting，即跨站脚本，目前主要指 javascript 注入，这种攻击主要原理是往目标网站注入恶意代码，当用户访问目标网站时，嵌入该页面的注入代码就会执行，从而达到窃取用户个人信息等目的。原因就在于浏览器错误的将攻击者提供的用户输入当做 JavaScript 脚本给执行了。攻击者可以利用 XSS 漏洞来窃取包括用户身份信息在内的各种敏感信息、修改 Web 页面以欺骗用户，甚至控制受害者浏览器，或者和其他漏洞结合起来形成蠕虫攻击，等等。总之，关于 XSS 漏洞的利用，只有想不到没有做不到。
XSS 攻击有 3 个关键点：
- 目标网站的目标用户；
- 发生在浏览器；
- 加载执行非目标网站脚本代码；
XSS 攻击 —— 危害
- 窃取用户个人信息
由于在当前页面执行，故可享有开发者所能拥有的能力，比如获取用户 cookie
- 显示伪造内容
同上，注入脚本同样可以执行渲染 dom 等操作。
- XSS 病毒，如恶意篡改数据
获取到用户 cookie 后，就可以利用当前 cookie 发送各种请求，比如留言板，获取管理员 cookie 后进行相应的删除等操作。
- ……
XSS 攻击 —— 分类
- 反射型 XSS
这种类型的 XSS 代码出现在 url 中，作为用户输入提交到服务端，服务端解析后将当前代码返回到浏览器，浏览器解析执行。
- 存储型 XSS
这种类型的 XSS 代码会被提交存储在服务端。
XSS 攻击 —— 攻击形式
- 常见注入代码
alert('xss');
eval(atob('YWxlcnQoeHNzKQ=='))atob, btoa 为 window 内置 base64 编码解码方法，我们可以通过他们实现简单的数据加密。
- 常见注入形式
XSS 攻击 —— 防御
- CSP
资源白名单，告诉浏览器哪些外部资源是可以加载执行的。
开启 csp 的方式包含：
设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的方式
- 字符转义
例如：str.replace(/>/g,‘>’)，输入校验，输出过滤
- HttpOnly Cookie
设置为该属性后，该 cookie 就不能被 js 所读取
- ……
CSRF
CSRF，全称 Cross Site Request Forgery，即跨站伪造请求，关键在于请求是跨站请求且请求是伪造的。主要利用用户在目标网站已登陆的情况下，以用户的名义发送非法请求，这一切对于用户都是不可见的。
同源策略是用来限制客户端脚本的跨域请求行为，而通过 img，script，iframe 等 src 加载资源不在此限制之中, form 可以跨域 post 数据
CSRF 攻击 —— code
CSRF 攻击 —— 防御
- Referer 检测
例如图片防盗链，检测请求来源是否合法
- cookie SameSite
cookie 设置 SameSite 属性，可保证 cookie 不随着第三方网站发送，存在兼容性问题
- 增加验证码
强制验证码校验后才完成请求
- token
发送请求时必须携带随机生成的 token，在服务端用此 token 与 cookie 中 token 进行校验，二者都存在且完全相同的情况下才认为
是合法请求。
界面操作劫持 —— 概述
界面操作劫持是一种机遇视觉欺骗的会话劫持，通过在网页上覆盖一个不可见的层（iframe，opaicty=0），使得用户无意间操作了透明层中的内容，从而完成操作劫持，造成信息窃取，数据篡改等攻击。
- 点击劫持
- 拖放劫持
- 触屏劫持
拖放劫持主要利用 html5 的拖动事件中的 dataTransfer 对象，包含 setData，getData；页面间拖动没有同源策略限制，因此我们就能轻易的通过视觉欺骗诱导用户拖动目标页面到当前页面，进而可以获取页面数据，包括 token；
界面操作劫持 —— 防御
- x-Frame-Options
x-Frame-Options 参数包括 DENY 和 SAMEORIGIN,ALLOW-FROM，表示不能被嵌套和只能同源域名嵌套。这种方法存在一定兼容性
- js 手动防御
function getParentUrl() {
let url = '';
try {url = window.parent.location.href;} catch (e) {url = document.referrer;}
return url;
}
let parentUrl = new URL(getParentUrl());
if (parentUrl.href != self.href) {// do something}前端安全 —— 其他风险
- 未知的第三方资源包
代码开发通常会引入很多第三方包，如果第三方包有安全漏洞甚至本身有恶意代码时就会对我们自己的网站整体造成安全问题。
- 伪造链接
如果我们程序允许 url 添加 callback 并设置了回调跳转，就会看起来是正常的网址实际却跳转到攻击者的恶意网站中，尤其是有
短链接的情况下，访问者很容易被迷惑，如：
http://www.baidu.com?callback…://a.cn/kfjiefif
- 本地数据泄漏
离线应用会导致很多信息存储在本地，就给攻击者有了可趁之机。
- 静态资源完整性校验
通常出现在 cdn 被劫持或资源被污染。防范了解 Subresource Integrity
