Javascript使用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计算,如果一致则正常加载,否则拒绝加载运行。
形如:
<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中isPrototypeOf函数
目录 1.isPrototypeOf() 示例1,Object类实例: 示例2,自己定义Human类: 示例3,再来看看Object的原型(prototype)是否是human的原型: 示例4,Object.prototype是否是内置类的原型: 示例5,Object也是函数(类): 2.和 instanceof 的区别 有时看一些框架源码的时候,会碰到 isPrototypeOf() 这个函数,那么这个函数有什么作用呢? 1.isPrototypeOf() isPrototypeOf() 是
-
JavaScript原型链详解
目录 1.构造函数和实例 2.属性Prototype 3.属性__proto__ 4.访问原型上的方法 5.构造函数也有__proto__ 6.构造函数的原型也有__proto__ 7.Object.prototype这个原型对象很特殊 8.总结 1.构造函数和实例 假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例. function Foo() { console.log("我是一个构造方法"); } const f1 = new Foo(); 现在你
-
JavaScript中时间格式化新思路toLocaleString()
目录 1.时间格式化常规思路 2.时间格式化toLocaleString() 研究Object对象的时候,看到了 toLocaleString() 这个方法可以很简单的实现时间格式化. 1.时间格式化常规思路 正常思路是通过Date的实例依次获取年月日等,例如一个简单的格式化例子: Date.prototype.format = function(dateStr) { let date = new Date(); let year = date.getFullYear(); let month
-
JS中for,for...in,for...of和forEach的区别和用法实例
for循环 基本语法格式: for(初始化变量;条件表达式;操作表达式){ 循环体语句; } 普通for循环在Array和Object中都可以使用.for循环中可以使用return.break等来中断循环. //遍历数组 var arr = [1,2,3,4,5]; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } //遍历对象 var obj={ x0:10, x1:20, x2:30 } for(va
-
js事件委托详解
1.每个函数都是对象,占用内存.内存中的对象越多,性能越差.解决事件处理过多问题的办法是事件委托. 2.事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实例 <ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text
-
nuxt.js 多环境变量配置
目录 1.前言 2.场景 3.创建环境 3.1 注入环境变量 4.最后 1.前言 一般在我们项目开发中,一般会有以下3个环境 开发环境也叫测试环境(test) RC环境也叫预发布环境(rc) 线上环境(production) 2.场景 那么有一种情况是我们需要在不同环境下区分不同的api接口例如 测试环境(test) api=test.ydhtml.com 预发布环境(rc) api=rc.ydhtml.com 线上环境(production) api=ydhtml.com 3.创建环境 接下来
-
JavaScript组合继承详解
目录 1.前言 2.原型链继承 3.构造函数继承 4.组合继承 1.前言 首先学习继承之前,要对原型链有一定程度的了解. 不了解可以去先阅读我另一篇文章,里面对原型链有一个较为详细的说明:JavaScript 原型链详解. 如果已经了解请继续. 之前写过一篇博文将继承方式全部列出来了,不过我发现一口气看完过于长了,也不利于吸收知识,所以我先将组合继承部分划分出来,后续会把寄生部分补上. 2.原型链继承 父类实例作为子类的原型 子类创造的两个实例的隐式原型__proto__指向父类的那个实例 而父
-
Javascript使用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"
-
JavaScript常用的正则表达式表单验证代码
常用的正则表达式如下: 复制代码 代码如下: "^-?[1-9]\\d*$", //整数 "^[1-9]\\d*$", //正整数 "^-[1-9]\\d*$", //负整数 "^([+-]?)\\d*\\.?\\d+$", //数字 "^[1-9]\\d*|0$", //正数(正整数 + 0) "^-[1-9]\\d*|0$", //负数(负整数 + 0) "^([+-]?)
-
javascript设计模式--策略模式之输入验证
策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:
-
浅谈javascript 函数内部属性
在函数内部有两个特殊的属性:arguments 和 this.arguments是一个类数组对象,包含传入的所有参数, 但是这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数. 请看经典的阶乘函数例子: 复制代码 代码如下: function Factorial(num) { if (num <= 1) { return 1; } else {
-
Javascript访问器属性实例分析
本文实例分析了Javascript 访问器属性的用法,分享给大家供大家参考.具体分析如下: 这个和构造函数的意思有点像,但功能又不同,他可以让两个属性建立关联,通过修改一个属性来改变另一个属性. 复制代码 代码如下: var book = { _year:2004, edition: 1 }; Object.defineProperty(book, "year", { get: function() { return this._year;
-
Javascript控制div属性动态变化实例分析
本文实例分析了Javascript控制div属性动态变化的方法.分享给大家供大家参考.具体如下: 这里使用JS控制div属性变化,另Div的几何尺寸发生变化,例如变宽.变高.改变颜色.隐藏Div.重置所有属性为默认值等.虽然在本例中,这些属性值的改变很简单就可实现,但在JavaScript网页前端设计中,这种属性或方法经常会被用到,因此还是值得大家关注的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cha-div-opt-demo/
-
JavaScript使用简单正则表达式的数据验证功能示例
本文实例讲述了JavaScript使用简单正则表达式的数据验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
JavaScript检测实例属性, 原型属性
0.前提 JavaScript对象的属性分为两种存在形态. 一种是存在实例中, 另一是存在原型对象中. 根据上述, 检测属性的时候会出现4种情况 既不存在实例中, 也不存在原型对象中 存在实例中, 不存在原型对象中 不存在实例中, 存在原型对象中 既存在实例中, 也存在原型对象中 1.hasOwnPrototype() hasOwnPrototype()接受一个字符串格式的属性名称, 如果实例本身存在该属性(情况2/情况4), 返回true. 否则, 返回false(情况1/情况3). 复制代码
-
JavaScript访问CSS属性的几种方式介绍
JavaScript访问CSS属性的方式总体说来有两种:"通过元素访问"."直接访问样式表".另外访问样式的时候有一个不可忽略的问题--运行时样式. 1.通过元素访问 既然是要通过元素访问样式表,那么就应该先确定是哪个元素.这是DOM的内容,在此先不多说.获取引用之后就可以通过 "引用.style.要访问的属性" ,来访问某个属性.举个例子,看如下代码. <pre name="code" class="html
-
JavaScript函数内部属性和函数方法实例详解
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数是对象,有自己的属性和方法 .首先通过console下输出的函数属性方法来直观的看一下: 函数内部属性只要包括两个特殊的对象:arguments和this. 函数属性包括:length和prototype 函数方法(非继承)包括:apply()和call() 继承而来的函数方法:bind().toString().toLocaleString().valueOf() 其他的目前不熟,后面再补充 1. 函数内部属性 在函数内部,有两
随机推荐
- 一想千开PJblog审核功能补丁 v2.0版 发布第1/3页
- Powershell小技巧之判断是否包涵大小写
- JQuery弹出层示例可自定义
- IOS设备上给body绑定click事件不生效的原因及解决办法
- JS实现页面打印(整体、局部)
- PHP实现对站点内容外部链接的过滤方法
- php实现在多维数组中查找特定value的方法
- PHP文件缓存类示例分享
- thinkPHP中分页用法实例分析
- Python实现删除列表中满足一定条件的元素示例
- 六、访问CGI变量
- Android Studio开发之 JNI 篇的简单示例
- php实现发送微信模板消息的方法
- Jquery搜索父元素操作方法
- Powershell小技巧之获取变量列表
- jquery 全局AJAX事件使用代码
- 详解C#把DataTable中数据一次插入数据库的方法
- Spring spel表达式使用方法示例
- php入门学习知识点三 PHP上传
- Android中使用Gradle来构建App项目的入门指南