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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
javascrip关于继承的小例子
May 10 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 #Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php桥接模式应用案例分析
2019/10/23 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
React优化子组件render的使用
2019/05/12 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python中图像通道分离与合并实例
2020/01/17 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
实习生岗位职责
2014/04/12 职场文书
医师定期考核实施方案
2014/05/07 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
自我查摆剖析材料
2014/10/11 职场文书
放假通知格式
2015/04/14 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers