Javascript使用integrity属性进行安全验证


Posted in Javascript onNovember 07, 2021

一、script标签引入文件

html中,script标签可以通过src属性引入一个js文件,引入的js文件可以是本地的,也可以是远程的。

1. 引入本地文件

开发环境一般多引入本地js文件。


<script src="./js/index.js"></script>
2. 引入远程文件

部署到线上后,一般会分发到cdn,需要引入远程文件,形如:


<script src="https://cdn.xxx.xx/js/index.js"></script>
只是引入远程文件存在一个问题,如果对应的文件被篡改了,那么可能会对用户造成影响。虽然cdn一般都是可靠的,但是不排除受到黑客的攻击。

在这种情况下,可以通过script标签的属性 integrity 来进行安全验证。

integrity安全验证
integrity属性设置引入js文件的hash值,浏览器在下载js文件时候,会对js文件进行hash计算,如果一致则正常加载,否则拒绝加载运行。

形如:

<script
    integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    src="https://cdn.xxx.xx/js/index.js"></script>

二、示例

3. 引入vue的cdn资源

例如我们要引入vue的cdn资源:

https://unpkg.com/vue@3.0.5/dist/vue.global.js

可以通过 https://www.srihash.org/ 生成hash值。

integrity生成hash值
integrity生成hash值

最后将 integrity 的值添加到script标签即可。


<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"
    integrity="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP"
    crossorigin="anonymous">
</script>

4. 验证是否正常

因为引入的是cdn资源,无法直接修改,但是修改 integrity 的值,如果修改了 integrity 的值,最终浏览器会报如下错误:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://unpkg.com/vue@3.0.5/dist/vue.global.js' with computed SHA-256 integrity 'Wr5PnkpmZ3oQFRZLfDrI6fsePSMak5h8rW2rqq+mdWg='. The resource has been blocked.
意思就是cdn文件的hash值和 integrity 的不匹配。

Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
javascript初学者常用技巧
Sep 02 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 #Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
iOS10推送通知开发教程
2016/09/19 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
简析Python的闭包和装饰器
2016/02/26 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
外企测试工程师面试题
2015/02/01 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
浅谈Python协程asyncio
2021/06/20 Python
python数字类型和占位符详情
2022/03/13 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫