安全简史

Web1.0 服务端动态脚本的安全问题，比如将一个可执行脚本上传到服务器上，从而获得权限。
Web2.0 Web攻击思路从服务器端转向客户端，转向了浏览器和用户，例如XSS、CSRF攻击

浏览器安全

浏览器是互联网的重要入口，在安全攻防中，浏览器的作用不可忽视

同源策略

同源策略是一种约定，它是浏览器最核心也是最基础的安全功能。
同源指的是指URL的协议、域名、端口相同
举个例子：当前URLhttp://www.example.com/index.html

URL	结果
`http://www.example.com/detail/page.html`	同源
`https://www.example.com/detail/page.html`	不同源，协议不同
`https://en.example.com/detail/page.html`	不同源，域名不同
`https://www.example.com:8080/detail/page.html`	不同源，端口不同

同源具体可以体现在两个方面：

DOM同源策略：禁止对不同源的页面DOM进行操作
XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

同源策略会导致跨域问题，下面列出几种解决方法

CORS Access-Control-Allow-Origin
JSONP 通过动态创建script标签，然后利用src属性进行跨域
服务器代理
document.domain来跨子域
postMessage。

浏览器沙箱

现代浏览器采用多进程架构。如Chrome的主要进程分为：浏览器进程、渲染进程、插件进程、扩展进程。

渲染引擎由Sandbox隔离，网页内容要与浏览器内核进程通信要过IPCchannel，在其中进行安全检查

恶意网站拦截

原理：一般都是浏览器周期性地从服务器端获取一份最新的恶意网址黑名单，如果用户上网时访问的网址存在此黑名单中，浏览器就会弹出一个警告页面。

恶意网址只要有两类：

挂马网站，网站由恶意代码通过浏览器漏洞执行shellcode，植入木马
钓鱼网站，模仿知名网站欺骗用户

常见的攻击方式

跨站脚本攻击XSS

恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

XSS产生的原因：过于信任客户端提交的数据

XSS的分类:

反射型
把用户的输入“反射”到浏览器上，通常攻击者需要诱使用户点击一个恶意链接，才能攻击成功。
存储型
把用户输入的数据“存储在服务器端”，常见情景就是攻击者发表了一篇含有恶意代码的博客，当其他人浏览时，恶意代码就会被执行。
DOM Based
这个类型并不是以数据是否有存储到服务来分类，因为此类攻击形成原因比较特殊，是修改页面的DOM节点形成XSS，所以会把它单独列为一个分类

例子1
正常发送消息：http://www.test.com/message.html?send=Hello,World！接收者将会接收信息并显示Hello,Word
非正常发送消息： http://www.test.com/message.html?send=<script>alert(‘foolish!’)</script>！接收者接收消息显示的时候将会弹出警告窗口，攻击者也就是诱使他人点击此链接来发起进攻

例子2
页面后台有个能修改用户提交的input元素<input type="text" value="">
正常情况：用户输入123，后台标签<input type="text" value="123"/>
非正常情况：用户输入" onclick="alert(1)，后台标签<input type="text" value="" onclick="alert(1)" />当管理者点击标签是就会弹出警告窗口

XSS危害：

窃取用户cookies资料，从而获取用户隐私信息
劫持用户浏览器会话，从而执行任意操作，例如进行非法转账、强制发表日志、发送电子邮件等

XSS防御：

对输入输出进行过滤，内容编码
HttpOnly 禁止js操作cookie

跨站点请求伪造CSRF

攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作。

CSRF 产生原因：重要请求操作的参数都是可以被攻击者猜测到的，攻击者绕过同源策略限制将伪造请求发送出去，而相关的身份信息在cookie中也随之发送。

例子1 银行转账
1、用户登录某银行网站，银行转账请求url为 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory
2、此时用户访问恶意网站
3、恶意网址中有 <img src="http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory "/> 使用img标签绕过了同源策略向银行服务器发起请求，cookie中身份信息也随请求发送出去，完成了攻击。

CSRF防御

Referer Check 检查请求中的referer头，如果不是合法网站发起请求就拒绝服务。但是不足之处是服务器并非什么时候都能获取到Referer。
Anti CSRF Token 在请求的url或者请求头中加入Token，攻击者在不知道Token的情况下就无法攻击成功

点击劫持ClickJacking

原理：利用了视觉欺骗

攻击方式：

攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下操作的都是透明的iframe页面，而不是显示的页面
攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义

一个简单的例子例子中用iframe加载了antd-design页面，然后用一个a标签盖住了页面的logo，点击logo时就会跳到a标签指向的页面

防御:

X-FRAME-OPTIONS是微软提出的一个http头，专门用来防御利用iframe嵌套的点击劫持攻击。

DENY // 拒绝任何域加载
SAMEORIGIN // 允许同源域下加载
ALLOW-FROM // 可以定义允许frame加载的页面地址

参考材料：

《Web 前端黑客技术与揭秘》
《白帽子讲Web安全》
浏览器工作工作原理与XSS-HTML编码
跨域的那些事儿
关于跨域，你想知道的全在这里