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

晴空闲云
• 阅读 908

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>

还是来个示例看看。

1. 引入vue的cdn资源

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

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

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

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

最后将 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

点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
javascript实践教程-02-javascript入门
本节目标1.掌握如何编写javascript代码。2.掌握javascript的3个弹框。3.掌握javascript的注释。4.掌握浏览器的调试工具控制台。内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。script标签如果我们需要在网页中编写
Python进阶者 Python进阶者
2年前
一文带你解读​JavaScript的基本用法
前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。JavaScript的基本用法1.如何使用Js脚本1).引入Js文件在头部标签中导入脚本标签并指明脚本文件路径2).
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Chase620 Chase620
3年前
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢?1:抽离javascriptHome.vue<template<div<div:style"{padding:'24px',back
Stella981 Stella981
3年前
JQuery
一、jq简介jq其实就是js的一个文件。二、jq书写步骤1、先引入jq文件(min的文件)<scripttype"text/javascript"src"file:///C|/jquery/jquery3.3.1.min.js"</script2、换新的一行写js代码<scripttype"text/javascri
Stella981 Stella981
3年前
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法<script type"text/javascript" src"js/jquery.min.js"</script<script type"text/javascript" src"js/gallery.js"</script   二、Html结构<div id"wrapper"<div id"mai
Wesley13 Wesley13
3年前
JS的常用属性
JS定义:基于事件和对象驱动,并具有安全性能的脚本语言。引入:<script type”text/javascript”具体js代码</script<script type”text/javascript”src”js文件”</script大小写敏感:例如:A与a是两个不同的东东注释:// 单
Stella981 Stella981
3年前
JavaScript模块化
前言:模块化开发需求在JS早期,使用script标签引入JS,会造成以下问题:1.加载的时候阻塞网页渲染,引入JS越多,阻塞时间越长。2.容易污染全局变量。3.js文件存在依赖关系,加载必须有顺序。项目较大时,依赖会错综复杂。4.引入的JS文件过多,不美观,且不易于管理。一、CommonJS规范
Wesley13 Wesley13
3年前
JS相关重点知识 (概况)
1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的。2.当从外部引入js文件时,该外部文件里面可以有多个方法,  html页面中的onclick只选中其中一个方法即可。   做法是在<scriptsrc"外部文件名.js"</script   注意:外部脚
Stella981 Stella981
3年前
JavaScript模块化开发
1:发展历史早期的Javascript是作为浏览器的脚本语言,使用<script标签直接引入,没有所谓的模块化。也就是说如果我们需要一个js文件,我们就加一个<script标签,把需要的js引入进来。这种方式的特点在于:简单粗暴。但是当项目越来越大,依赖越来越多时可能就会出现问题,比如逻辑越来越混乱,页面也越复杂,然后可维护性就变
晴空闲云
晴空闲云
Lv1
男 · 软件工程师
专注计算机科学,阅读、思考、写作。
文章
26
粉丝
8
获赞
35