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验证请求

标签：脚本,src,浏览器,第三方,Spirit,同源,引入,com,CSP
来源： https://www.cnblogs.com/codespirit-zx/p/15419058.html