script使用integrity属性进行安全验证
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计算,如果一致则正常加载,否则拒绝加载运行。
形如:
<scriptintegrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"src="https://cdn.xxx.xx/js/index.js"></script>
还是来个示例看看。
1. 引入vue的cdn资源
例如我们要引入vue的cdn资源:
https://unpkg.com/vue@3.0.5/dist/vue.global.js
可以通过 https://www.srihash.org/ 生成hash值。
最后将 integrity 的值添加到script标签即可。
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"integrity="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP" crossorigin="anonymous">
</script>
2. 验证是否正常
因为引入的是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 的不匹配。
参考资料
Subresource Integrity:https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity
script使用integrity属性进行安全验证相关推荐
- html css integrity,integrity 属性
一个有用的推论是 document.head 在任何写在网页上的 JavaScript 几乎总是可用. document.body 只有当你将 script 标签写在 标签中或者它之后的时候才可用. ...
- [原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略
.NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略 前言:之前的讨论一直关注在怎么从DAL中获取数据,以及数据的Mapping问题.实际上,一个业务框架最主要的作用就是简化业务 ...
- script 标签 async 属性
script 标签 async 属性 普通script 文档解析的过程中,如果遇到script脚本,就会停止页面的解析进行下载(但是Chrome会做一个优化,如果遇到script脚本,会快速的查看后边 ...
- script标签charset属性
现象: 1.js编码格式为utf-8: 2.script标签也设置了charset="utf-8": 浏览器显示js文件还是乱码??? 原因: 1.js文件使用的是无BOM头的ut ...
- ASP.NET中 ValidationGroup[控件的属性]:分组验证的使用
1.A,运行效果返回顶部 ValidationGroup[控件的属性]:分组验证 同组验证的组名相同 登录 注册 用户名: 注册账号: 密 码: 密 钥: ...
- HTML5 script 标签的 crossorigin 和integrity属性的作用
Bootstrap 4 依赖的基础库中出现了两个新的属性 1 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim ...
- html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用
Bootstrap 4 依赖的基础库中出现了两个新的属性 1 2 3 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Contr ...
- “本地连接”属性中“身份验证”选项卡消失的处理方法
问题描述: 打开我的"本地连接",查看属性,却发现里没有"身份验证"标签,无法对"身份验证"进行设置.如何进行处理? 解决方案: 右击&qu ...
- script 有哪个属性可以让它不立即执行 defer,async
.async 和 defer 属性 http://blog.csdn.net/qq_34986769/article/details/52155871 1. defer 属性 <script s ...
最新文章
- PHP glob() 函数
- CAN 总线 之四 BOSCH CAN2.0 Part A
- php Function split() is deprecated 的解决办法(转)
- RAILS 学习日记 --扩展
- linux gradle解压后, 执行gradle error13: Permission denied
- 31岁负债59万(房贷27万,私人借款32万),该怎么办?
- 异步网络消息处理框架
- mysql参数化查询为什么可以实现_为什么参数化SQL查询可以防止SQL注入?
- 抗疫进展:华为云联合多家科研机构筛选出五种可能有效的抗病毒药物
- 在Dialog中设置焦点失败?
- 异步社区两周年 - 技术图书免费送(活动已结束)
- 京东/拼多多淘客小程序跳入路径
- 老一辈学计算机的在那,真实的南京大学计算机系
- Java - 过滤器有哪些作用和用法?
- layui中实现动态的cols表头字段
- IDEA GoLand 问题 Contents have differences only in line separators
- Python也有对象了哈哈哈哈哈哈嗝
- 基于Java的亚马逊“手机”评论爬虫的情感分类分析
- android把后台应用放最上层,Android 判断app是否在最上层展示
- RJ45和RJ48的区别