浏览器特性
- 会将一些特殊符号当做字母进行解析，此时一个符号可能会被解析成两个到三个字母，这样子如果有漏洞对输入做了限制，黑客就可以利用这个特性来绕过某些漏洞中长度限制。
- 某些特殊字符或者其他国家的文字和某些字母的形状一模一样，也有可能会被黑客用来伪造域名。不过现在已经不支持其他国家的文字和英文在一起来注册域名了。
- 浏览器的输入框可以直接输入账号密码登录服务器，此时可以构造特殊的账号密码，来迷惑用户让其以为自己访问正确的网站，例如 http://qq.com:80@evil.com，用户可能以为自己访问的是 qq，其实访问的是 evil.com。常见的浏览器基本都会隐藏登录信息，所以基本没啥影响。
如果没有同源策略会有什么后果
- 用户在 A 网页的数据，可以被 B 网页随意读取，例如可以B 网页可以读取 A 网页的 cookie 等。B 网页读取数据后可以模拟 A 网页上的用户对 A 网页执行任何操作，例如转账。
- 页面 B 可以直接像用户一样操作直接A页面
伪协议
伪协议分为浏览器伪协议和例如 php 伪协议的语言伪协议，PHP 伪协议是一种在 PHP 中使用的特殊协议，它们允许开发者访问 PHP 的内部功能或资源。
浏览器伪协议
浏览器伪协议通常是浏览器直接处理，不需要服务端参与，伪协议会控制浏览器执行一些操作，例如 ：
- tel 伪协议可以让浏览器调用当前设备上的打电话的应用进行打电话，在 mac 上，此协议可以调出 facetime 进行打电话。
- mailto:example@example.com伪协议可以让浏览器打开设备上的发送邮件的程序，并给example@example.com这个用户编辑一封邮件。
- data:image/png;base64,iVBORw0KGg…伪协议会更新浏览器当前页面，并显示对应的数据，举例如下
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIEZvbnQgQXdlc29tZSBQcm8gNS4xNS40IGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIC0tPjxwYXRoIGQ9Ik01MDUgNDQyLjdMNDA1LjMgMzQzYy00LjUtNC41LTEwLjYtNy0xNy03SDM3MmMyNy42LTM1LjMgNDQtNzkuNyA0NC0xMjhDNDE2IDkzLjEgMzIyLjkgMCAyMDggMFMwIDkzLjEgMCAyMDhzOTMuMSAyMDggMjA4IDIwOGM0OC4zIDAgOTIuNy0xNi40IDEyOC00NHYxNi4zYzAgNi40IDIuNSAxMi41IDcgMTdsOTkuNyA5OS43YzkuNCA5LjQgMjQuNiA5LjQgMzMuOSAwbDI4LjMtMjguM2M5LjQtOS40IDkuNC0yNC42LjEtMzR6TTIwOCAzMzZjLTcwLjcgMC0xMjgtNTcuMi0xMjgtMTI4IDAtNzAuNyA1Ny4yLTEyOCAxMjgtMTI4IDcwLjcgMCAxMjggNTcuMiAxMjggMTI4IDAgNzAuNy01Ny4yIDEyOC0xMjggMTI4eiIvPjwvc3ZnPg==
- javascript 伪协议，会在当前页面执行 js 代码，例如javascript:alert(document.cookie)
- about 伪协议，调用浏览器一些内部功能，例如 about:blank 是显示一个空白网页，但是域和打开它的时候所在页面的域一样。
浏览器的导航过程
导航是指浏览器定位到某个资源的过程。简单来讲步骤如下：
- 用户在导航栏中输入 url
- 浏览器使用 dns 服务解析出 目标的 ip 端口等信息，并和目标建立连接
- 下载目标返回的资源
- 将资源交给 html 解析器去解析成 dom 树
- 运行dom 中的 js 代码，js 代码可能会对 dom 树进行改变
- 此时运行浏览器自己的过滤器，例如 xss 过滤器（不好用，现在已经废弃）等
- 将最终的结果展现给用户
使用 windows.open 打开网页的特点
window.open(“https://www.baidu.com”);打开百度的时候，刚开始先打开的是about:blank，等 baidu 页面被渲染完成后，才会将地址栏中的 url 和网页内容显示出来。不过在显示出来前，about:blank 可以被创造它的页面完全控制，因为此时创造 about:blank 页面的页面和 about:blank 页面是同源的。
之前一些老的浏览器，会在显示 about:blank 页面的时候，地址栏先显示目标网站的 url（正确情况下应该在地址栏先显示 about:blank），等页面加载成功后再将正确的页面显示出来，此时的页面本质上还是 about:blank。
此时如果黑客可以利用某种技术，中断浏览器对正确页面的解析，让此页面继续保持在 about:blank 状态下，就可以完全控制这个页面。此时页面本质上还是 about:blank， url 是目标网站 url，但是内容却能被黑客完全控制，黑客可以通过控制 dom 树来伪造无比逼真的页面，现在已经无法利用。
为什么window.open()不直接打开目标页面而是先显示一个 about:blank 页面
- 浏览器访问目标 url 是需要一定时间的，此时如果弹出一个 about:blank 页面可以让用户知道浏览器正在执行操作，用户不会觉得浏览器稍微卡了一下，这样子的话用户体验会更好。
- 无论 window.open 是否被提供了正确的 url，浏览器都回打开新的页面，这样保持了结果的一致性，用户体验更好。
- 先创建窗口，再加载资源是浏览器的默认流程。
- 因为浏览器要对资源进行同源策略的判断，所以不能立刻加载目标url 返回的数据。此时又必须创建新的页面来反馈用户让用户知道浏览器确实在准备加载资源，所以浏览器需要先弹出一个页面，这个页面中的资源在弹出的时候就必须符合同源策略。此时 about:blank 页面就满足这个要求。当目标的 url 解析完毕后，会替换 about:blank 中的内容。
总得来说就是为了安全性和用户的体验更加流畅。
csp内容安全策略
作用是限制当前页面可以加载什么资源，不能加载什么资源。下面是 csp 的策略和策略值。
| 指令 | 描述 |
|---|---|
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">default-src</font> | 指定默认的资源来源策略，适用于所有未明确指定的资源类型 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">script-src</font> | 指定允许加载和执行的JavaScript资源来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">style-src</font> | 指定允许加载的CSS资源来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">img-src</font> | 指定允许加载的图像资源来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">connect-src</font> | 指定允许发起网络请求的来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">font-src</font> | 指定允许加载的字体资源来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">object-src</font> | 指定允许加载的对象资源（如插件、Flash等）来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">media-src</font> | 指定允许加载的媒体资源（如音频、视频）来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">frame-src</font> | 指定允许嵌入的框架（如iframe）来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">worker-src</font> | 指定允许加载的Web Worker脚本来源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">base-uri</font> | 指定允许的文档基础URL |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">form-action</font> | 指定允许的表单提交URL |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">frame-ancestors</font> | 指定允许嵌入当前页面的框架来源 |
| 策略值 | 含义 |
|---|---|
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'self'</font> | 允许资源从当前域加载 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'unsafe-inline'</font> | 允许内联脚本和样式 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'unsafe-eval'</font> | 允许使用<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">eval()</font>函数和 <font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">new Function()</font>构造函数 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'none'</font> | 不允许加载任何资源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'sha256-<hash>'</font> | 允许加载具有指定SHA-256哈希值的资源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'sha384-<hash>'</font> | 允许加载具有指定SHA-384哈希值的资源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'sha512-<hash>'</font> | 允许加载具有指定SHA-512哈希值的资源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">'nonce-<random-value>'</font> | 允许加载具有指定随机nonce值的资源 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">https:'</font> | 允许资源从HTTPS协议加载 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">http:'</font> | 允许资源从HTTP协议加载（不推荐，存在安全风险） |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">data:'</font> | 允许资源从<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">data:</font>URI加载 |
<font style="color:rgba(0, 0, 0, 0.6);background-color:rgb(248, 248, 248);">blob:'</font> | 允许资源从Blob URL加载 |
通过控制台执行 js 脚本，这种方式是内敛脚本执行，script-src ‘self’;规则会阻止这样的脚本执行。只有同源网站上的.js 文件才能在这个页面上执行。
绕过csp：MIME sniff
假设服务器设置了 csp，只允许执行同源的脚本，但是服务器没有对自己的文件设置正确的 mime 类型，当浏览器请求这个资源的时候会猜测这个资源是什么，猜测的依据是资源的内容。
此时我们可以上传一个图片，这个图片是经过精心构造的，内部有我们的 js 脚本代码。然后在网页上插入一段 html 代码，具体是插入 img 标签，并用 img 标签的 src 属性调用这个图片，此时即可执行图片中融合的 js 代码。因为此时浏览器会将这个图片的 mime 属性识别成octec-stream 或者 script，而不是 image。
如果服务器设置了正确的 mime 类型，则无法通过这种方式绕过 csp。
CORS 跨域资源共享
本质是一种机制，可以让不同的域之间进行资源访问。实现方式是添加几种http 头，通过发送一个options请求，确认目标域是否允许跨域访问。如果允许的话，当前域就可以访问目标域了。
浏览器插件带来的安全问题
- 机器上已经安装的某些插件可能有任意代码执行漏洞，此时构造一个 xss 漏洞或者给受害者发送一封含有 xss 漏洞链接的邮件，当受害者点击链接时即可触发漏洞。
- 利用 xss 来利用浏览器自身的漏洞去静默安装一个含有 rce 漏洞的合法公开插件，然后利用这个插件漏洞达到代码执行的目的。
- 直接安装一个有漏洞的插件，然后用另一个程序和这个插件通信，进而获取浏览器中的数据。
不过现在新版本浏览器已经很难在不被发现的前提下安装插件了。
