[TOC]

浏览器安全

同源策略

浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。具体来讲，同源策略主要表现在 DOM、Web 数据和网络这三个层面。

同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。但绝对的安全就会牺牲掉便利性，因此浏览器实现了一些加载策略

资源层面

页面中可以引用第三方资源，不过这也暴露了很多诸如 XSS 的安全问题，因此又在这种开放的基础之上引入了 CSP 来限制其自由程度。

请求层面

使用 XMLHttpRequest 和 Fetch 都是无法直接进行跨域请求的，因此浏览器又在这种严格策略的基础之上引入了跨域资源共享策略，让其可以安全地进行跨域操作。

DOM层面

两个不同源的 DOM 是不能相互操纵的，因此，浏览器中又实现了跨文档消息机制，让其可以比较安全地通信。

总结

同源策略、CSP 和 CORS 之间的关系：
同源策略就是说同源页面随你瞎搞，但是不同源之间想瞎搞只能通过浏览器提供的手段来搞
比如说

  1. 读取数据和操作 DOM 要用跨文档机制
  2. 默认 XMLHttpRequest 和 Fetch 不能跨站请求资源，然后又通过 CORS 策略来支持其跨域
  3. 我们默认页面中可以引用任意第三方资源，然后又引入 CSP 策略来加以限制

XSS 攻击

XSS 全称是 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。

重点：HTTPS 试试增加了攻击的难度！

恶意脚本可以做哪些坏事呢（常见的

  • 可以窃取 Cookie 信息。恶意 JavaScript 可以通过“document.cookie”获取 Cookie 信息，然后通过 XMLHttpRequest 或者 Fetch 加上 CORS 功能将数据发送给恶意服务器；恶意服务器拿到用户的 Cookie 信息之后，就可以在其他电脑上模拟用户的登录，然后进行转账等操作。
  • 可以监听用户行为。恶意 JavaScript 可以使用“addEventListener”接口来监听键盘事件，比如可以获取用户输入的信用卡等信息，将其发送到恶意服务器。黑客掌握了这些信息之后，又可以做很多违法的事情。
  • 可以通过修改 DOM 伪造假的登录窗口，用来欺骗用户输入用户名和密码等信息。
  • 可以在页面内生成浮窗广告，这些广告会严重地影响用户体验。

恶意脚本是怎么注入的

存储型

  1. 将恶意代码存储到存在漏洞的服务器（比如有些表单填写啊，什么的各种，里面写