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 的不匹配。

赞 (0)

相关推荐

  • 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.创建环境 接下来

  • 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

  • JavaScript中isPrototypeOf函数

    JavaScript中isPrototypeOf函数

    目录 1.isPrototypeOf() 示例1,Object类实例: 示例2,自己定义Human类: 示例3,再来看看Object的原型(prototype)是否是human的原型: 示例4,Object.prototype是否是内置类的原型: 示例5,Object也是函数(类): 2.和 instanceof 的区别 有时看一些框架源码的时候,会碰到 isPrototypeOf() 这个函数,那么这个函数有什么作用呢? 1.isPrototypeOf() isPrototypeOf() 是

  • js事件委托详解

    1.每个函数都是对象,占用内存.内存中的对象越多,性能越差.解决事件处理过多问题的办法是事件委托. 2.事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实例 <ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text

  • JavaScript组合继承详解

    JavaScript组合继承详解

    目录 1.前言 2.原型链继承 3.构造函数继承 4.组合继承 1.前言 首先学习继承之前,要对原型链有一定程度的了解. 不了解可以去先阅读我另一篇文章,里面对原型链有一个较为详细的说明:JavaScript 原型链详解. 如果已经了解请继续. 之前写过一篇博文将继承方式全部列出来了,不过我发现一口气看完过于长了,也不利于吸收知识,所以我先将组合继承部分划分出来,后续会把寄生部分补上. 2.原型链继承 父类实例作为子类的原型 子类创造的两个实例的隐式原型__proto__指向父类的那个实例 而父

  • JavaScript中时间格式化新思路toLocaleString()

    目录 1.时间格式化常规思路 2.时间格式化toLocaleString() 研究Object对象的时候,看到了 toLocaleString() 这个方法可以很简单的实现时间格式化. 1.时间格式化常规思路 正常思路是通过Date的实例依次获取年月日等,例如一个简单的格式化例子: Date.prototype.format = function(dateStr) { let date = new Date(); let year = date.getFullYear(); let month

  • JavaScript原型链详解

    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使用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属性动态变化实例分析

    本文实例分析了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函数内部属性和函数方法实例详解

    JavaScript函数内部属性和函数方法实例详解

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数是对象,有自己的属性和方法 .首先通过console下输出的函数属性方法来直观的看一下: 函数内部属性只要包括两个特殊的对象:arguments和this. 函数属性包括:length和prototype 函数方法(非继承)包括:apply()和call() 继承而来的函数方法:bind().toString().toLocaleString().valueOf() 其他的目前不熟,后面再补充 1. 函数内部属性 在函数内部,有两

随机推荐