在HTML上添加integrity，验证js和css的hash，防止篡改

最新推荐文章于 2023-12-21 19:32:39 发布
最新推荐文章于 2023-12-21 19:32:39 发布
阅读量2.3k 收藏 4
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49172831/article/details/107662017
版权

近期甲方做了什么安全检查防止html、js被串改，要求加上integrity属性这边记录下如何生成hash值

计算hash

在linux上面使用此命令计算你需要生成hash的文件

[root@hhlqrtest js]# cat ./util.js | openssl dgst -sha384 -binary | openssl enc -base64 -A                
rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG
[root@hhlqrtest js]# 

rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG

这一行就是我们需要的hash值

添加integrity属性

crossorigin="anonymous" integrity="sha384-[刚刚的hash值]"

例如：

<script type="text/javascript" src="<c:url value='/js/PageJs/Home/login.js'/>" integrity="sha384-HI67irbqe+kwOQ8FJ1RH64pq172I2Y1wJN8BauJqymn8/ZAql5aMssg9fUe72fqE" crossorigin="anonymous" ></script>
TsukasaHwan
关注
支持隐私保护和公平支付的数据完整性验证方案
罗伯特技术屋
07-04 50
云存储数据完整性验证是指CSS能够证明它正确存储用户的数据，用户数据被保存完整的一种机制.验证机制一般包括5个算法，分别是密钥产生、标签生成、挑战请求、证据生成、证据验证.支持动态验证的方案还包括执行更新、更新验证2个算法.1) 密钥生成.DO运行概率性算法生成公钥和私钥，对外公布公钥信息.2) 标签生成.DO对数据文件进行分块，计算每个数据块对应的标签作为认证的元数据.然后，将原始文件和所有数据块构成的标签集合上传至CSS.最后，删除本地文件及标签集合.
Web页面子资源完整性校验详细指南
dreamapplehappyapple的专栏
09-20 1345
时间过得好快，距离上一篇文章动手写一个简单的编译器：在JavaScript中使用Swift的尾闭包语法发布已经过去快半年了，这半年时间也一直在想着按时更新文章；但是因为工作和生活的琐事，没有能够坚持下来。有点惭愧，感觉之前年初立下的计划快要实现不了了。希望接下来的这一段时间能够坚持更新文章吧。 这次要跟大家分享的是关于Subresource Integrity（子资源完整性）的内容。如果平时对Web安全关注不是很多的话，可能没怎么听过这个术语。不知道也没关系，接下来我会跟大家一起来研究讨论一下这个内容，相信
推荐一款在线生成Integrity验证信息工具（SRI Hash 生成器）
tonydc2000的博客
08-20 1554
1、什么是资源完整性(integrity)？ 子资源完整性 (SRI) 是一项安全功能，可让浏览器验证其抓取的文件 (例如，从一个 CDN) 是在没有意外操作的情况下传递的。它的工作原理是允许您提供一个获取的文件必须匹配的加密散列/哈希。 2、crossorigin 该枚举属性指定在加载相关图片时是否必须使用CORS。可取的值包括以下两个： - anonymous：会发起一个跨域请求（即包含Origin: HTTP头）。但不会发送任何认证信息（即不发送cookie, X.509证书和HTTP基本认证信
html css integrity,integrity 属性
weixin_39797381的博客
06-18 1365
一个有用的推论是 document.head 在任何写在网页上的 JavaScript 几乎总是可用。document.body 只有当你将 script 标签写在 标签中或者它之后的时候才可用。async 和 deferHTML5 添加了两个工具来控制脚本的执行。async表示“不用马上执行它”。更具体地它表示：我不介意你在整个网页加载完成之后执行这个脚本，把它放在其他脚本执行之后。这对于统计分...
html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用
weixin_39954698的博客
06-18 506
Bootstrap 4依赖的基础库中出现了两个新的属性1 2 3 HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息，但有两个条件：一是跨域脚本的服务器必须通过Access-Controll-Allow-Origin头信息允许当前域名可以获取错误信息，二是当前域名的script标签也必须指明src属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。听名字...
html标签中crossOrigin、integrity属性详解、SRI、HSTS
AIWWY的博客
07-27 2049
在canvas中使用drawImage()绘制图像时，若传入未声明属性的跨源元素，会使canvas变成污染状态（tainted），此时任何读取canvas数据的操作，如toBlob()等，均会抛出错误（可理解为在。
html5——integrity和crossorigin属性
weixin_45728126的博客
03-21 1225
html5——integrity和crossorigin属性 crossorigin属性说明 crossorigin属性是枚举值，可能值有以下： 关键字 描述 anonymous 这个元素的CORS请求将凭据标签设置为“同源” use-credentials 这个元素的CORS请求将凭据标签设置为“包含” " " 设置属性为空值，像是crossorigin或是crossorigin=" ",等同于anonymous crossorigin属性，在,,,参考文章： link标签中的
Subresource Integrity (SRI) Hash Generator-crx插件
04-02
1. **哈希计算**：开发者在HTML代码中引用外部资源（如JavaScript文件或CSS文件）时，会添加一个`integrity`属性，该属性包含资源的哈希值。这个哈希值通常是SHA-384或SHA-256算法生成的。 2. **资源请求**：当用户...
subresource_integrity_rewrite:重写平面HTML页面以包括所有第三方脚本的子资源完整性
05-05
子资源完整性（Subresource Integrity，SRI）是Web安全领域的一个重要概念，它允许开发者在引入外部资源，如JavaScript库、CSS文件或者字体时，验证这些资源是否在传输过程中被篡改。SRI通过在HTML的`<script>`或`...
grunt-sri-hash：自动化脚本与样式表的完整性散列任务
grunt-sri-hash 插件专注于在HTML文档中的内联脚本和样式表元素上添加SRI属性。它会扫描HTML文件，并为那些包含了SRI属性的脚本和样式表元素生成相应的散列值。这个过程是自动化的，因此减轻了开发者手动添加和维护...
HTML属性crossorigin和integrity有什么用
Jan's的博客
05-23 863
我的小站https://www.ideaopen.cn/ 在引入许多官方的CDN静态库时，会发现我们引入的script中，不单单只有src属性，还有crossorigin和integrity属性。 那这个东西，如果是我们本地的资源库，我们肯定是没有的。那这两个属性是干嘛的呢？ crossorigin属性 在HTML5中，一些 HTML 元素提供了对CORS的支持。 我先解释一下CORS是啥？ 相当于是给我们服务器一个白名单，让他不会拦截我们的静态资源。 支持CORS请求的浏览器一..
Javascript中integrity属性安全验证
小小笨南瓜
10-22 1300
Javascript中integrity属性安全验证
js 防篡改对象
kaixuanweb的博客
10-18 618
简单介绍一下js的防篡改对象： （1）不可扩展对象（不能添加，可以修改和删除） 默认情况下，所有对象都是可扩展的。即任何时候我们都可以为对象添加属性和方法。但使用Object.preventExtensions()方法可以改变这一默认行为，即不能再为对象添加新的属性和方法，但是仍然可以修改和删除已有成员。另外，可以使用Object.isExtensible()方法检测对象是否可以扩展。 （2...
BootStrap
好好学习
10-12 217
BootStrap 概念：一个前端开发的框架（定义好了很多的css样式和js插件） 1、定义了很多的css样式和js插件，我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2、响应式布局：同一套页面 可以兼容不同分辨率的设备 快速入门 1、下载Bootstrap链接: https://www.bootcss.com/. 2、点击中文文档–>用于生产环境的 Bootstrap 3、在项目中将下载的压缩包中的三个文件夹复制 4、创建html页面，引入必要的资源文件 <!doctype ht
JS 安全策略
Candour_0的博客
01-12 325
JS 安全策略
通过js动态生成对象，并给对象赋值
程序员老旸
10-08 3435
pageEncoding="UTF-8"%> //动态创建对象,并保存数据 function saveData(inputName,fm){ var obj = new Object(); for(j=0;j){ obj[fm[j]] =$("#"+inputName[j]).val();
html 里面的 script 标签有了新的属性： integrity
men_shuangshuang的博客
12-06 7111
这个标签是为了防止 CDN 篡改 javascript 用的。 &lt;script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" cross...
【Bootstrap】bootstrap快速入门
南北极之间
05-12 879
下载： 安装后：有3个文件夹： css，字体，js jQuery需要自己下载 ******** 新建一个文件： 成功。 第一个bootstrap文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
第二章 HTML中的JavaScript
最新发布
weixin_52878347的博客
12-21 1478
不过，把所有JavaScript文件都放在里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到的起始标签时开始渲染）。虽然这个例子中的元素包含在页面的中，但它们会在浏览器解析到结束的标签后才会执行。HTML5规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在DOMContentLoaded事件之前执行。
encrypt care加密工具如何生成并验证文本和文件的校验和（防止被篡改）
03-26
使用encrypt care加密工具生成文件的校验和步骤： 1. 打开encrypt care加密工具，选择“Hash”的功能。 2. 点击 “Add File” 或者 “Add Folder”按钮选择要计算校验和的文件或者文件夹。如果需要计算连续文件的校验和，你可以选择“Add File”按钮。 3. 一旦你选择了文件或文件夹，点击“Start”按钮，程序会计算文件的校验和，计算结束后校验和会显示在主窗口中。 4. 校验和可以用于验证文件本身是否被篡改。如果文件在传输和存储期间被修改，它的校验和也将更改。验证文件的校验和可以确定文件的完整性是否得到了维护。 验证文件的校验和步骤： 1. 打开encrypt care加密工具，选择“Hash”的功能。 2. 点击“Verify”按钮，选择你要验证的文件或者文件夹（包含校验和的文本文件） 3. 一旦你选择了文件或文件夹，点击“Start”按钮，程序将重新计算文件的校验和，并与原始校验和进行比较。 4. 如果计算出的校验和与原始校验和不同，说明文件有被篡改的可能性，如果计算出的校验和与原始校验和相同，则文件的完整性没有被破坏。 注意事项： 为了确保校验和的正确性，必须对原始文件和校验和本身进行适当的保护和存储。最好将校验和存储在另一个设备或媒体上，以防止在同一个设备或媒体上出现故障的情况下丢失或损坏校验和。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值