前端冷知识:子资源完整性

1,217 阅读2分钟

这是我参与更文挑战的第13天,活动详情查看: 更文挑战

介绍

这一段先引用一下MDN对这一属性的描述吧。点击查看

摘要:

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

理解: 我给你一个口令,你要取东西就得告诉我口令,不通过的话,我就当你是假冒的

在前端开发中,通常会针对前端性能优化做一些处理,其中就包含将一些可缓存的资源存入CDN中,但是这样就无法保证资源的安全性,而应用这一属性就在解析JS时,先对一遍口令,确保资源是预期的,安全的内容。

生成密钥

既然MDN把这些都列举出来了,那么就直接搬运这一段把。

openssl:

cat filename.js | opensll dgst -sha384 -binary | openssl enc -base64 -A

shasum:

shasum -b -a 384 filename.js | xxd -r -p | base64

生成值: sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC

使用

<script src="from.cdn.js" crossorigin="anonymous" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>

不过这就还有一个问题,即便看上去很安全,但是作为一个新属性,兼容是势必是需要考虑的一部分。

image.png

上图可以看到,目前来说,这个属性的兼容性还并不是最好的。

那么怎么在此基础上继续进行约束呢? 那就是服务器了。

通过在服务器配置内容安全策略要求指定类型文件遵守SRI(子资源完整性);

Content-Security-Policy: require-sri-for script; //script文件进行子资源完整性检查。

Content-Security-Policy: require-sri-for style; // 同上,检测style文件。

好处与限制

这个子资源完整性检查在针对资源完整上是有着较好的保全作用。

但是相应的,如果CDN服务器被入侵或者HTTP被劫持,都会导致实现。

另外,大部分运营商劫持是为了添加广告, 如果验证子资源完整性的话,会导致JS不解析,继而整个页面崩溃。

所以也是在角落吃灰的原因吧。

就当是看看不一样的前端世界吧。