Web页面安全

浏览器安全可分为三大块——Web页面安全、浏览器网络安全和浏览器系统安全。这里将Web页面安全。

一、浏览器的同源策略

如果两个url协议、域名和端口都相同，那么就称这两个URL同源。浏览器默认同源的两个源之间是可以相互访问资源和操作DOM的。两个不同的源之间想要互相访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。

同源策略主要表现在DOM、Web数据和网络这三个层面

１、DOM层面

同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作

要是不同源的站点操作DOM就会报错：Uncaught DOMException

２、Web数据

同源策略限制了不同源站点读取当前站点的Cookie、IndexDB、LocalStorage等数据。

3、网络

同源策略限制了通过XMLHttpRequest等方式将站点数据发送给不同源的站点。默认情况下，XMLHttpRequest不能访问跨域的资源

二、牺牲一些安全性，增加一些便利性

浏览器牺牲了一些安全性，来让Web开发和使用相对便捷。让出的安全性就衍生出了一些安全问题。比方说引入外部资源文件就出现XSS风险，进而出现CSP减少XSS攻击。

1、页面中可以嵌入第三方资源

页面需要引入外部不同源的文件，当恶意程序通过各种途径向HTML插入script标签的恶意脚本，当页面启动时，这个脚本就会执行。它能修改用户的搜索结果、改变一些内容的链接指向、窃取如Cookie、IndexDB、LoacalStorage等数据，通过XSS的手段发送给服务器。为了应对XSS攻击，浏览器引入了内容安全策略CSP，CSP的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联JavaScript代码，CSP能够大大减少XSS攻击。

2、跨域资源共享和跨文档消息机制

XMLHttpRequest因为同源策略不能访问不同源的资源，但实际上很多时候又需要访问不同源资源。

为了访问不同源的资源，引入了跨域资源共享（CORS），使用此机制可以进行跨域访问控制，是跨域可以安全的进行。CORS的内容比较,要单独拿出来看.

两个不同源的页面不可以互相操作DOM，在实际应用中，经常需要两个不同源之间的DOM之间进行通信，于是引入了跨文档消息机制，即通过window.postMessage的JavaScript接口来和不同源的DOM进行通信.

三、XSS攻击

XSS（Cross Site Scripting）是跨站脚本攻击，为了与“CSS”区分，所以叫XSS，翻译过来就是跨站脚本

最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨站脚本”。但是现在往HTML中注入恶意代码的方式越来越多了，所以是否跨域注入脚本已经不是唯一的注入手段，但是XSS这个名字却一直保留至今。

1、恶意脚本可以做哪些事情

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

2、恶意脚本是如何注入的

通常情况下，被恶意注入JavaScript脚本是非常危险的。所以要知道有哪些注入方式。通常情况下，主要有存储型XSS攻击、反射型XSS攻击和基于DOM的XSS攻击三种方式来注入恶意脚本.

① 存储型XSS攻击

攻击者将恶意JavaScript代码提交给服务器的数据库，用户访问服务器时，恶意JavaScript代码随着正常请求的页面返回给用户。

② 反射型XSS攻击

在一个反射性XSS攻击过程中，恶意JavaScript脚本属于用户发送给网站请求的一部分，随后网站又将恶意JavaScript脚本返回给用户。和存储型XSS类似的是都要先把恶意JavaScript脚本发送给服务器，但是反射型XSS不会存储这段恶意JavaScript代码，而是直接返回。主要是通过用户点击恶意链接实现的

③ 基于DOM的XSS攻击

基于DOM的XSS攻击都是在浏览器端完成的，不要经过服务器，基于DOM的XSS攻击是属于前端的安全漏洞。黑客通过各种手段将恶意脚本注入到用户的页面中，比如通过网络劫持在页面传输过程中修改HTML页面内容，这种劫持类型很多，比如WiFi路由器劫持、通过本地恶意软件劫持，它们的共同点是在Web资源传输过程或者在用户使用页面的过程中修改Web页面的数据。

3、如何阻止XSS攻击

存储型XSS和反射型XSS都是需要经过Web服务器来处理的，因此可以认为这是服务器的安全漏洞。而基于DOM的XSS攻击全部都是在浏览器端完成的，因此基于DOM的XSS攻击是属于前端的安全漏洞。

① 服务器对输入脚本进行过滤转码

• 过滤就是把script标签以及其中的内容直接过滤掉。（就是删除）
• 转码就是把script标签等敏感字符替换

② 充分利用CSP

虽然服务器过滤转码能够阻止XSS攻击的发生，但完全依靠服务器端依然是不够的，我们还需要CSP等策略充分地利用起来，以降低XSS攻击带来的风险和后果。

• 限制加载其他域下面的资源文件，这样即使黑客插入了一个JavaScript文件，这个JavaScript文件也是无法被加载的
• 禁止向第三方域提交数据，这样用户数据也不会外泄
• 禁止执行内联脚本和未授权的脚本
• 提供了上报机制，这样可以帮助我们尽快发现有哪些XSS攻击，以便尽快修复问题

③ 使用HttpOnly属性

很多XSS攻击都喜欢盗用Cookie，服务器可以在设置Cookie时添加HttpOnly属性，这样document.cookie就无法获取cookie了。

四、CSRF攻击

CSRF(Cross Site request forgery)——跨站请求伪造。指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登陆状态发起跨站的请求。主要有三种方式去实施CSRF攻击：自动发起Get请求、自动发起Post请求、引诱用户点击链接。和XSS不同的是，CSRF攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。

1、CSRF是如何发起伪造请求的

① 自动发起Get请求

黑客把一个请求接口隐藏在img标签中，欺骗浏览器这是一个图片资源。页面加载的时候浏览器会自动发起img的资源请求，如果服务器没有对该请求做判断的话，就会被执行。如果这是一个转账请求，钱就被转走了

② 自动发起Post请求

黑客在他的页面构造了一个隐藏的表单，表单就是一个转账接口。当用户打开该站点之后，这个表单就会被自动执行提交；当表单被提交，就会执行转账操作。

③ 引诱用户点击链接

黑客还可以诱惑用户去点击黑客站点的链接，这种方式常常出现在论坛或者恶意邮件上。黑客会采用很多方式去诱惑用户点击链接。比如黑客说这是一张美女图片，放了图片的下载地址，而这个下载地址实际上是黑客用来转账的接口，一旦用户点击了这个链接，他的钱就会被转到黑客账户上了。

2、如何阻止CSRF

CSRF发起攻击有三个必要条件：目标站点必须要有CSRF漏洞、用户要登录过目标站点，并持有目标站点的Cookie、第三个需要用户打开一个第三方站点，可以是黑客的站点或者是一些论坛

① 利用Cookie的SameSite属性

在HTTP响应头中，通过设置set-cookie字段设置Cookie时，可以带上SameSite选项，SameSite有三个值：Strict、Lax和None

• Strict会完全禁用第三方Cookie。从B网站访问A网站无论如何都不会带上A网站的Cookie
• Lax相对宽松一点，从B网站提交Get表单到A网站或者从B网站打开A网站的链接都会带上Cookie，Post或者img、iframe等都不会携带Cookie
• None的话，就是任何情况下都可以发生Cookie

② 验证请求的来源站点

服务器可以通过验证请求来源的站点，禁用来自第三方的请求。

Referer是请求头中的一个字段，记录了HTTP请求的来源地址，Referer可以告诉服务器HTTP请求的来源，这只是一个选项，因为有些场景不适合将Referer发送给服务器。

Origin属性，通过XMLHttpRequest、Fetch发起跨站请求或者通过Post方法发送请求时，都会带上Origin属性。Origin属性和Referer的区别是Origin只包含了域名信息，没有包含具体的URL路径，这是因为有些站点因为安全考虑，不想把源站点的详细路径暴露给服务器。

服务器的策略是优先判断Origin，如果请求头中没有包含Origin属性，再根据实际情况判断是否使用Referer值

③ CSRF Token

CSRF Token验证分为两步

第一步：客户端发起请求后，服务器生成一个CSRF Token，即服务器生成的字符串，然后将该字符串植入到返回的页面中

第二步：在浏览器端如果要发起转账请求，那么需要带上页面中的CSRF Token，然后服务器会验证该Token是否合法。如果是从第三方站点发出的请求，那么将无法获取到CSRF Token中的值，所以即使发出了请求，服务器也会因为CSRF Token不正确而拒绝请求。

五、总结

1、同源:如果两个url协议、域名和端口都相同，那么就称这两个URL同源。浏览器默认同源的两个源之间是可以相互访问资源和操作DOM的。

2、同源策略:两个不同的源之间想要互相访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。

3、CSP(内容安全策略):Content-Security-Policy 的 HTTP Header 可以指示浏览器只信任指定白名单的JS源。即使通过XSS攻击注入了恶意的脚本文件，浏览器也不会执行。CSP旨在减少XSS攻击.

4、CSP基于HTTP Header 中的 Content-Security-Policy

• default-src ‘self’ ： 只允许加载本站资源
• img-src https://* ： 只允许加载 HTTPS 协议图片
• child-src ‘none’ ：允许加载任何来源框架

5、CORS（跨域资源共享）：允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS内容还挺多的,要单独拿出来学.

6、跨文档消息机制:**通过window.postMessage的JavaScript接口来和不同源的DOM进行通信.**是一个HTML5的API.

7、XSS(跨站脚本攻击):往HTML中注入恶意代码,根据注入方式主要有存储型、反射型、基于DOM型三种方式.

• 存储型:将恶意代码提交给服务器的数据库,当用户访问数据库时,恶意代码就会被返回给用户并执行
• 反射型:将恶意代码提交给服务端,服务器立刻就返回这个恶意代码给同一个用户.通常是通过点击恶意外链来实现的.
• 基于DOM的:黑客通过各种手段将恶意代码注入到客户端,主要是在HTML传输过程中或者是用户使用HTML的过程中插入恶意代码

8、如何阻止XSS:服务器对输入的脚本进行过滤转码、在设置Cookie的时候添加HttpOnly属性和充分利用CSP

9、CSRF(跨站请求伪造):指黑客利用用户登录的Cookie进行跨站请求.主要有自动发起Get请求、自动发起Post请求和引诱用户点击链接三种方式.

• 自动发起Get请求:把链接放在一个img标签里面,加载图片的时候就会自动发起Get请求
• 自动发起Post请求:黑客页面上构造了一个转账接口,当打开页面的时候就会自动执行表单.表单提交时转账操作进行
• 引诱用户点击链接:黑客制造一个可点击的恶意链接如转账接口并引诱你去点击,你点击的时候就会发起如转账等操作

10、如何阻止CSRF:利用Cookie的SameSite属性、验证请求的来源站点、使用CSRF Token认证

• Cookie的SameSite属性:* Strict:会完全禁用第三方Cookie.从B网站访问A网站无论如何都不会带上A网站的Cookie* Lax:从B网站提交GET表单或者打开A网站都会带上Cookie,其他方式则不会.* None:任何情况下都可带上Cookie
• 验证请求的来源站点:服务器通过请求头中的Referer或者Origin属性来判断来源站点,从而决定要不要处理该请求.
• 使用CSRF Token认证:* 服务器根据客户端的请求,除了生成一个Cookie,还要生成一个CSRF Token放到返回到页面中.Cookie和CSRF都要随请求发给服务器.如果是第三方站点的CSRF,那么拿不到页面中的CSRF Token值,服务器会拒绝这个没有CSRF Token的请求.### 如何入门网络安全

建议

多看书

阅读永远是最有效的方法，尽管书籍并不一定是最好的入门方式，但书籍的理解需要一定的基础；但是就目前来看，书籍是比较靠谱的入门资料。

现在Web安全书籍比较多，因此大家在学习的过程中可以少走了不少的弯路。如果以上推荐书籍阅读有困难，那就找自己能看得进的 Web 安全的书

当然纸上谈兵终觉浅，最好还是实践一下。

对于那些没有学习方向和资料的同学，可以看下我整理的资源，这份资料经历过社会的实践，可以说是当下全网较全的网络安全知识体系：
①网络安全学习路线
②20份渗透测试电子书
③安全攻防357页笔记
④50份安全攻防面试指南
⑤安全红队渗透工具包
⑥网络安全必备书籍
⑦100个漏洞实战案例
⑧安全大厂内部视频资源
⑨历年CTF夺旗赛题解析