共计 4640 个字符，预计需要花费 12 分钟才能阅读完成。
一、Web 安全的关键点
浏览器的同源策略
同源策略：不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源。
http://www.topo.com 的不同域 / 同域
站点
是否同域
原因
https://www.topo.com
不同域
协议不同，https 与 http 是不同的协议
http://alpha.topo.com
不同域
域名不同，alpha 子域与 www 子域不同
http://topo.com
不同域
域名不同，顶级域与 www 子域不是一个概念
http://www.topo.com:8080
不同域
端口不同，8080 与默认端口 80 不同
http://www.topo.com/a/
同域
满足同协议、同域名、同端口，只是目录不同
默认情况下是不允许跨域访问的，只有目标站点（http://www.topo.com）明确返回 HTTP 响应头：Access-Control-Allow-Origin: http://www.evil.com，那么 www.evil.com 上的客户端脚本才有权通过 AJAX 对 www.topo.com 上的数据进行读写操作。
AJAX
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 是在不重新加载整个页面的情况下, 与服务器交换数据并更新部分网页的技术。
DOM
Document Object Mode（文档对象模型）中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
二、前端基础
Web 安全事件的角色：W3C、浏览器厂商、Web 厂商、攻击者、用户。
URL
Uniform Resource Locator（统一资源定位符）protocol://hostname[:port]/path/[;parameters][?query]#fragment
URL 有三类编码方式：escape、encodeURI、encodeURIComponent，对应着三个解码函数 unescape、decodeURI、decodeURIComponent。
HTTP
Hyper Text Transfer Protocol（超文本传输协议）
详情
JavaScript
<script>alert(1)</script>
<img src=# onerror=”alert(1)” />
<input type=’text’ value=”x” onmouseover=”alert(1)” />
<iframe src=”javascript:alert(1)”></iframe>
<a herf=”javascript:alert(1)”>x</a>
…
Cookie
[name] [value] [domain] [path] [expires] [httponly] [secure] 名称、值、所属域名、所属相对根路径、过期时间、是否有 HttpOnly 标志、是否有 Secure 标志
三、前端黑客之 XSS
Cross Site Script（跨站脚本），发生在目标网站中目标用户的浏览器层面上，当用户浏览器渲染整个 HTML 文档的过程中出现了不被预期的脚本指令并执行，XSS 就会产生。
反射型 XSS
发出请求时，XSS 代码出现在 URL 中，作为输入提交到服务端，服务端解析后响应，在响应内容中出现这段 XSS 代码，最后浏览器解析执行。
存储型 XSS
提交的 XSS 代码会存储在服务端，下次请求目标页面时不用再提交 XSS 代码。
DOM 型 XSS
DOM 型 XSS 的 XSS 代码不需要服务器解析响应的直接参与，触发 XSS 靠的是浏览器端的 DOM 解析，可以认为完全是客户端的事情。
常见的输入点：
document.URL
document.URLUnencoded
document.location
document.referrer
document.cookie
windows.location
windows.name
常见输出点：
直接输出 HTML 内容：
document.write()
document.writeln()
document.body.innerHtml=
直接修改 DOM 树：
document.forms[0].action=
document.attachEvent()
document.create()
document.execCommand()
document.body. …()
替换 document URL
document.location=
document.location.hostname=
document.location.replace()
document.location.asign()
document.URL=
window.navigate()
打开或修改新窗口
document.open()
window.open()
window.location.href=
直接执行脚本
eval()
window.execScript()
window.setInterval()
window.setTimeout()
XSS 危害：挂马、盗取用户 Cookie、Dos 客户端浏览器、钓鱼攻击、劫持用户 Web 行为、蠕虫式挂马刷广告等等。
四、前端黑客之 CSRF
Cross-site request forgery（跨站请求伪造跨站的请求）
跨站点的请求：跨站点请求的来源一般为其他站点，但是也可以来自本站。请求是伪造的：发出的请求不是用户的意愿的请求。
HTML CSRF
发起的 CSRF 请求都属于 HTML 元素发出的，HTML 中能设置 href/src 等连接的标签都可以发起一个 GET 请求，如：
<link href=””>
<img src=””>
<meta http-equiv=”refresh” content=”0; url=”>
<iframe src=””>
<script src=””>
…
CSS 中的：
@import “”
background:url(“”)
CSRF 危害：篡改目标网站上的用户数据、盗取用户隐私数据、作物其他攻击向量的辅助攻击手法、传播 CSRF 蠕虫。
五、前端黑客之界面操作劫持
界面操作劫持攻击是一种基于视觉欺骗的 Web 会话劫持攻击，它通过在网页的可见输入控件上覆盖一个不可见的框（iframe），让用户以为在操作可见控件，但是实际上用户的操作行为被其不可见的框所劫持，执行不可见框中的恶意劫持代码，从而完成在用户不知情的情况下窃取敏感信息，篡改数据等攻击。
分类
点击劫持
劫持的是用户的鼠标点击操作，主要的劫持目标是有重要会话交互的页面，比如，银行交易页面、后台管理页面或者劫持用户的摄像头和麦克风。
拖放劫持
在现在的 Web 应用中，有一些需要用户采用鼠标拖放完成的操作，而且用户也经常在浏览器中使用鼠标拖放操作来代替复制粘贴。因此，拖放操作劫持很大程度的扩展了点击劫持的攻击范围，也将劫持模式从单纯的鼠标点击扩展到了鼠标拖放行为。
通过劫持某个页面的拖放操作实现对其他页面链接的窃取，这些链接中可能会有 session key、token、password 等信息；或者可以把其他浏览器中的页面内容拖放到富文本编辑器模式中，这样就能够看到页面源代码了，而这些 HTML 源代码中可能会存在敏感信息。
触屏劫持
移动智能终端设备由于体积限制，一般都没有鼠标、键盘这些输入设备，用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。在移动设备上，类似点击劫持的攻击模式，实现了对用户触摸屏操作的劫持攻击。
原理分析
点击劫持：CSS 透明层 +iframe
利用 CSS 中透明属性 opacity，取值范围 0~1，取值 0 时透明度最高用 iframe 嵌入被劫持界面：<iframe id = “victim” src=”www.victim.com” scrolling=”no”>
危害
界面操作劫持实际上突破了 CSRF 的防御策略，这是一种社工色彩很强的跨域操作，而这种跨域正好是浏览器自身的特性，带来的危害可以很大，比如，篡改与删除数据，偷取隐私甚至爆发蠕虫。
六、漏洞挖掘
CSRF 的漏洞挖掘
目标表单是否有有效的 token 随机串
目标表单是否有验证码
目标是否判断了 Refere 来源
网站根目录下的 crossdomain.xml 的 ”allow-access-from domain” 是否是通配符
目标 JSON 是否可以自定义 callback 函数
界面劫持的漏洞挖掘
目标的 HTTP 响应头是否设置了 X -Frame-Options 字段
目标是否有 Javascript 的 Frame Busting 机制
更简单的是用 iframe 嵌入目标网站试试
反射型 XSS 漏洞挖掘
反射型 XSS 最常见的就是直接在 URL 中进行注入，URL 的格式如下：<scheme>://<netloc>/<path>?<query>#<fragment> 在完整的 URL 构成中，<path>、<query>、<fragment> 都是用户可控的
一般情况下可以通过将 payload 加入到参数来测试 XSS 的存在与否
<script>alert(1)</script>
‘”><script>alert(1)</script>
<img/src=@ onerror=alert(1) />
‘ onmouseover=alert(1) x=’
` onmouseover=alert(1) x=`
javascript:alert(1)//
‘”;alert(1)//
}x:expression(alert(1))
…..
根据请求后的反应看是否有弹出窗或浏览器脚本错误，如果有则说明目标存在 XSS 漏洞例如：www.test.com/xss.php?id=1, 这里输入点为 id=1, 既然有输入点，查看结果则依赖于输出点，可能是以下几处：
HTML 标签之间，<div id=”body”>[输出]</div>
HTML 标签内，<input type=”text” value=[输出] />
Javascript 代码的值，<script>a=”[输出]”;…</script>
CSS 代码的值，<style>body{font-size:[ 输出]px;…}</style>
HTML 标签之间
有很多标签之间的脚本是无法执行的，如：<title>、<textarea>、<xmp>、<iframe>、<noscript>、<plaintext>，可以先闭合前面的标签，来使得脚本能够成功执行。</title><script>alert(1)</script>
HTML 标签内
” onmouseover=alert(1) x=” 这种是闭合属性，然后使用 on 事件来触发脚本。
“><script>alert(1)</script> 这种是闭合属性后又闭合标签，然后直接执行脚本。
细分为三种场景：1. 输出在 src/href/action 等属性内 2. 输出在 on* 事件内 3. 输出在 style 属性内
Javascript 代码的值
</script><script>alert(1)//
CSS 代码的值
与“输出再在 style 属性内”类似，构造能执行的 Javascript 语句，闭合标签。
存储型 XSS 漏洞挖掘
与反射型 XSS 相比，存储型 XSS 漏洞挖掘的差别在于：存储型 XSS 一般都是基于表单的提交，然后进入服务端存储，最终在某个页面输出。
一般情况下，存储型 XSS 表单提交之后的输出点有以下几种可能：
表单提交后跳转到的页面可能是输出点。
表单所在的页面可能是输出点。
表单提交后不见了，整个网站的某个源文件是输出点，需要借助爬虫进行分析。
