Spirit带你了解如何安全引入第三方资源

Spirit带你了解如何安全的引入第三方资源

本文介绍一下如何安全的引入第三方资源

同源策略(SOP)

首先我们来了解一下什么是同源策略,下面的是wiki百科的定义

✨同源策略是指Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的协议号(protocol),主机号(host name)和端口号(port),一旦两个网站满足上述条件,这两个网站被认定为具有相同来源.

而同源策略主要表现在三个方面 DOM,Web数据和网络

1. DOM:限制了来自不同源的JavaScript脚本对当前的DOM对象读和写的操作
2. Web数据: 限制了不同源的站点读取当前站点的Cookie,indexDB,LocalStorage等数据
3. 网络:限制了通过XMLHttpRequest等方式将站点的数据发送给不同源的站点

但是如果都按同源策略来的话,便利性其实是大打折扣的,所以为了便利,Web让出了一些安全性,推出了一系列举措,使得我们的网站能够引入第三方资源为用户提供更加丰富的功能

措施

跨域资源共享 - 维基百科(CORS)

我们先看下wiki百科的定义,方便理解

• 跨域资源共享:用于让网页的受限资源能够被其他域名的页面访问的一种机制.
  • 通过该机制，页面能够自由地使用不同源（英语：cross-origin）的图片、样式、脚本、iframes以及视频。一些跨域的请求（特别是Ajax）常常会被同源策略（英语：Same-origin policy）所禁止的。
  • 跨源资源共享定义了一种方式，为的是浏览器和服务器之间能互相确认是否足够安全以至于能使用跨源请求（英语：cross-origin requests）。比起纯粹的同源请求，这将更为自由和功能性的（functionality），但比纯粹的跨源请求更为安全。
  • 跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略

通过wiki百科的定义,我们可以得到以下的3点

1. 页面可以通过该机制,自由的嵌入不同源的图片,样式没脚本,iframes和videos
2. 可以绕过同源策略,发送跨域请求
3. 我们可以这么理解,同源策略相当于是把所有第三方的源列上黑名单,而CORS则是把第三方的源选择性的列成白名单,仿佛那些在白名单上的源和自己的源是在一起的

---

白名单通过服务器的指令传递给客户端,该指令在HTTP响应头中传递给客户端,它包含两个重要的headers

1. Access-control-allow-origin:用于定义允许哪些源可以访问受限的资源的
2. Access-control-allow-credentials:确定是否允许使用cookies验证请求

🎉大家可能注意到了,CORS提供的白名单实际上是为该域提供内容的源所维护的,并不是客户端所提供的.并不能由客户端自己决定,接下来所介绍的CSP则很好的解决了这个问题

内容安全策略(CSP)

老规矩,我们先看下wiki百科的定义

• 内容安全策略（英语：Content Security Policy，简称CSP）是一种计算机安全标准，旨在防御跨站脚本、点击劫持等代码注入攻击，阻止恶意内容在受信网页环境中执行。

• 我们可以知道,CSP主要是为了抵御攻击手段所发明出来的

• 但wiki百科对于这一块定义非常的少,接下来介绍的是从MDN上所看到的东西

CSP的主要作用

1. 减少和报告XSS攻击
2. CSP可以指定有效域,即客户端浏览器这边认可的可执行的脚本来源

使用CSP

通过Content-Security-Policy设定策略,以下是MDN中介绍的常见的安全策略方案实例

1. 网站管理者想要所有内容均来自站点的同一个源(不包括其子域名)

   Content-Security-Policy: default-src 'self'
   

2. 一个网站管理者允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)

   Content-Security-Policy: default-src 'self' *.trusted.com
   

3. 一个网站管理者允许网页应用的用户在他们自己的内容中包含来自任何源的图片, 但是限制音频或视频需从信任的资源提供者(获得)，所有脚本必须从特定主机服务器获取可信的代码.

   Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
   

   在这里，各种内容默认仅允许从文档所在的源获取, 但存在如下例外:

   • 图片可以从任何地方加载(注意 "*" 通配符)。
   • 多媒体文件仅允许从 media1.com 和 media2.com 加载(不允许从这些站点的子域名)。
   • 可运行脚本仅允许来自于userscripts.example.com。

4. 一个线上银行网站的管理者想要确保网站的所有内容都要通过SSL方式获取，以避免攻击者窃听用户发出的请求。

   Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
   

5. 一个在线邮箱的管理者想要允许在邮件里包含HTML，同样图片允许从任何地方加载，但不允许JavaScript或者其他潜在的危险内容(从任意位置加载)。

   Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
   

   注意这个示例并未指定script-src (en-US)。在此CSP示例中，站点通过 default-src 指令的对其进行配置，这也同样意味着脚本文件仅允许从原始服务器获取。

---

🎊从上述五个常见例子可以看到,通过自己指定策略,客户端可以自己管理可以从哪加载外部源,相比之前更加安全了,等同于可以自己设置防火墙,抵御外部的恶意攻击,同时也解决了跨域资源共享只能由服务器端来决定白名单的问题,Web的灵活性大大提高了

子资源完整性Subresource Integrity(SRI)

先来看看mdn的定义吧

子资源完整性(SRI)是允许浏览器检查其获得的资源是否被篡改的一项安全特性.它是通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改

我来给大家讲下SRI的应用场景

我们使用cdn分发脚本和样式表等文件时,并不是完全安全的,如果攻击者获得对CDN的控制权,则可以将任意恶意内容注入到CDN的文件上,因此有可能潜在的攻击所有从该CDN上获取文件的站点.而SRI可以极大限度的来降低这种损害
注意:SRI并不能规避所有的风险.第三方库经常会自己请求额外的信息,有可能会携带用户的账号密码等关键信息.这些经常需要JS功能的支持,比如一个地图库会需要取<svg>数据来渲染,但是包含点击事件.通过点击事件就有可能对你的网站造成损害的

使用方法

• 使用base64编码过后的文件哈希值写入你所引用的<script>和<link>标签的integrity就可以启用子资源完整性功能
• 更为详细的用法 请大家到MDN上浏览,本文不做过多介绍

浏览器处理SRI

1. 当浏览器在<script>或者<link>标签中遇到 integrity 属性之后,会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。
2. 当脚本或者样式表的哈希值和期望的不一致时,浏览器必须拒绝执行脚本或者应用样式脚本,并且返回一个网络

引入第三方资源小结

从上面的讲述,我们可以看到为了引入第三方资源,其实是做了很多努力的

我们在此也可以总结出一些内容

• 同源策略相当于密不透风的防火墙,任何第三方资源都进不来
• 跨域资源共享(CORS)和内容安全策略相当于是白名单,告诉同源策略,我们是安全的,让它放行他们进去
• 子资源完整性(SRI)则是镇守防火墙内的一个尖兵,启动它的时候,能检查出这些第三方资源是否是伪装的恶意进攻
• 他们相互结合,能极大限度的保护我们的网站不受侵害,同时还能很好的为用户提供更加丰富的功能