脚本宝典收集整理的这篇文章主要介绍了Spirit带你了解如何安全引入第三方资源,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文介绍一下如何安全的引入第三方资源
首先我们来了解一下什么是同源策略,下面的是wiki百科的定义
✨同源策略是指Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的协议号(protocol)
,主机号(host name)
和端口号(port)
,一旦两个网站满足上述条件,这两个网站被认定为具有相同来源.
而同源策略主要表现在三个方面 DOM,Web数据和网络
但是如果都按同源策略来的话,便利性其实是大打折扣的,所以为了便利,Web让出了一些安全性,推出了一系列举措,使得我们的网站能够引入第三方资源为用户提供更加丰富的功能
我们先看下wiki百科的定义,方便理解
通过wiki百科的定义,我们可以得到以下的3点
白名单通过服务器的指令传递给客户端,该指令在HTTP响应头中传递给客户端,它包含两个重要的headers
🎉大家可能注意到了,CORS提供的白名单实际上是为该域提供内容的源所维护的,并不是客户端所提供的.并不能由客户端自己决定,接下来所介绍的CSP则很好的解决了这个问题
老规矩,我们先看下wiki百科的定义
内容安全策略(英语:Content Security Policy,简称CSP)是一种计算机安全标准,旨在防御跨站脚本、点击劫持等代码注入攻击,阻止恶意内容在受信网页环境中执行。
我们可以知道,CSP主要是为了抵御攻击手段所发明出来的
但wiki百科对于这一块定义非常的少,接下来介绍的是从MDN上所看到的东西
CSP的主要作用
使用CSP
通过Content-Security-Policy设定策略,以下是MDN中介绍的常见的安全策略方案实例
网站管理者想要所有内容均来自站点的同一个源(不包括其子域名)
Content-Security-Policy: default-src 'self'
一个网站管理者允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)
Content-Security-Policy: default-src 'self' *.trusted.com
一个网站管理者允许网页应用的用户在他们自己的内容中包含来自任何源的图片, 但是限制音频或视频需从信任的资源提供者(获得),所有脚本必须从特定主机服务器获取可信的代码.
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
在这里,各种内容默认仅允许从文档所在的源获取, 但存在如下例外:
一个线上银行网站的管理者想要确保网站的所有内容都要通过SSL方式获取,以避免攻击者窃听用户发出的请求。
Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
一个在线邮箱的管理者想要允许在邮件里包含HTML,同样图片允许从任何地方加载,但不允许JavaScript或者其他潜在的危险内容(从任意位置加载)。
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
注意这个示例并未指定script-src (en-US)。在此CSP示例中,站点通过 default-src
指令的对其进行配置,这也同样意味着脚本文件仅允许从原始服务器获取。
🎊从上述五个常见例子可以看到,通过自己指定策略,客户端可以自己管理可以从哪加载外部源,相比之前更加安全了,等同于可以自己设置防火墙,抵御外部的恶意攻击,同时也解决了跨域资源共享只能由服务器端来决定白名单的问题,Web的灵活性大大提高了
先来看看mdn的定义吧
子资源完整性(SRI)是允许浏览器检查其获得的资源是否被篡改的一项安全特性.它是通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改
我来给大家讲下SRI的应用场景
我们使用cdn分发脚本和样式表等文件时,并不是完全安全的,如果攻击者获得对CDN的控制权,则可以将任意恶意内容注入到CDN的文件上,因此有可能潜在的攻击所有从该CDN上获取文件的站点.而SRI可以极大限度的来降低这种损害
注意:SRI并不能规避所有的风险.第三方库经常会自己请求额外的信息,有可能会携带用户的账号密码等关键信息.这些经常需要JS功能的支持,比如一个地图库会需要取<svg>
数据来渲染,但是包含点击事件.通过点击事件就有可能对你的网站造成损害的
使用方法
<script>
和<link>
标签的integrity就可以启用子资源完整性功能浏览器处理SRI
<script>
或者<link>
标签中遇到 integrity 属性之后,会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。从上面的讲述,我们可以看到为了引入第三方资源,其实是做了很多努力的
我们在此也可以总结出一些内容
以上是脚本宝典为你收集整理的Spirit带你了解如何安全引入第三方资源全部内容,希望文章能够帮你解决Spirit带你了解如何安全引入第三方资源所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。