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

最新推荐文章于 2023-01-12 15:48:36 发布
最新推荐文章于 2023-01-12 15:48:36 发布
阅读量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
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
支持隐私保护和公平支付的数据完整性验证方案
罗伯特技术屋
07-04 29
云存储数据完整性验证是指CSS能够证明它正确存储用户的数据，用户数据被保存完整的一种机制.验证机制一般包括5个算法，分别是密钥产生、标签生成、挑战请求、证据生成、证据验证.支持动态验证的方案还包括执行更新、更新验证2个算法.1) 密钥生成.DO运行概率性算法生成公钥和私钥，对外公布公钥信息.2) 标签生成.DO对数据文件进行分块，计算每个数据块对应的标签作为认证的元数据.然后，将原始文件和所有数据块构成的标签集合上传至CSS.最后，删除本地文件及标签集合.
Web页面子资源完整性校验详细指南
dreamapplehappyapple的专栏
09-20 1286
时间过得好快，距离上一篇文章动手写一个简单的编译器：在JavaScript中使用Swift的尾闭包语法发布已经过去快半年了，这半年时间也一直在想着按时更新文章；但是因为工作和生活的琐事，没有能够坚持下来。有点惭愧，感觉之前年初立下的计划快要实现不了了。希望接下来的这一段时间能够坚持更新文章吧。 这次要跟大家分享的是关于Subresource Integrity（子资源完整性）的内容。如果平时对Web安全关注不是很多的话，可能没怎么听过这个术语。不知道也没关系，接下来我会跟大家一起来研究讨论一下这个内容，相信
html5——integrity和crossorigin属性
weixin_45728126的博客
03-21 1173
html5——integrity和crossorigin属性 crossorigin属性说明 crossorigin属性是枚举值，可能值有以下： 关键字 描述 anonymous 这个元素的CORS请求将凭据标签设置为“同源” use-credentials 这个元素的CORS请求将凭据标签设置为“包含” " " 设置属性为空值，像是crossorigin或是crossorigin=" ",等同于anonymous crossorigin属性，在,,,参考文章： link标签中的
推荐一款在线生成Integrity验证信息工具（SRI Hash 生成器）
tonydc2000的博客
08-20 1460
1、什么是资源完整性(integrity)？ 子资源完整性 (SRI) 是一项安全功能，可让浏览器验证其抓取的文件 (例如，从一个 CDN) 是在没有意外操作的情况下传递的。它的工作原理是允许您提供一个获取的文件必须匹配的加密散列/哈希。 2、crossorigin 该枚举属性指定在加载相关图片时是否必须使用CORS。可取的值包括以下两个： - anonymous：会发起一个跨域请求（即包含Origin: HTTP头）。但不会发送任何认证信息（即不发送cookie, X.509证书和HTTP基本认证信
html css integrity,integrity 属性
weixin_39797381的博客
06-18 1330
一个有用的推论是 document.head 在任何写在网页上的 JavaScript 几乎总是可用。document.body 只有当你将 script 标签写在 标签中或者它之后的时候才可用。async 和 deferHTML5 添加了两个工具来控制脚本的执行。async表示“不用马上执行它”。更具体地它表示：我不介意你在整个网页加载完成之后执行这个脚本，把它放在其他脚本执行之后。这对于统计分...
html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用
weixin_39954698的博客
06-18 478
Bootstrap 4依赖的基础库中出现了两个新的属性1 2 3 HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息，但有两个条件：一是跨域脚本的服务器必须通过Access-Controll-Allow-Origin头信息允许当前域名可以获取错误信息，二是当前域名的script标签也必须指明src属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。听名字...
html标签中crossOrigin、integrity属性详解、SRI、HSTS
AIWWY的博客
07-27 1980
在canvas中使用drawImage()绘制图像时，若传入未声明属性的跨源元素，会使canvas变成污染状态（tainted），此时任何读取canvas数据的操作，如toBlob()等，均会抛出错误（可理解为在。
HTML属性crossorigin和integrity有什么用
Jan's的博客
05-23 823
我的小站https://www.ideaopen.cn/ 在引入许多官方的CDN静态库时，会发现我们引入的script中，不单单只有src属性，还有crossorigin和integrity属性。 那这个东西，如果是我们本地的资源库，我们肯定是没有的。那这两个属性是干嘛的呢？ crossorigin属性 在HTML5中，一些 HTML 元素提供了对CORS的支持。 我先解释一下CORS是啥？ 相当于是给我们服务器一个白名单，让他不会拦截我们的静态资源。 支持CORS请求的浏览器一..
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>`或`...
用于启用子资源完整性的Webpack插件
08-07
3. **更新HTML模板**：Webpack通常会生成一个HTML模板（如`index.html`），在模板中引用打包后的JavaScript和CSS文件。插件会自动在这些引用的`<script>`和`<link>`标签中添加`integrity`属性，并填充对应的哈希值。...
Javascript中integrity属性安全验证
小小笨南瓜
10-22 1236
Javascript中integrity属性安全验证
js 防篡改对象
kaixuanweb的博客
10-18 603
简单介绍一下js的防篡改对象： （1）不可扩展对象（不能添加，可以修改和删除） 默认情况下，所有对象都是可扩展的。即任何时候我们都可以为对象添加属性和方法。但使用Object.preventExtensions()方法可以改变这一默认行为，即不能再为对象添加新的属性和方法，但是仍然可以修改和删除已有成员。另外，可以使用Object.isExtensible()方法检测对象是否可以扩展。 （2...
BootStrap
好好学习
10-12 190
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 294
JS 安全策略
通过js动态生成对象，并给对象赋值
程序员老旸
10-08 3400
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 7060
这个标签是为了防止 CDN 篡改 javascript 用的。 &lt;script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" cross...
css的hash匹配,css-loader往CSS中添加了，但是html中没有添加对应的hash，导致两者对应不上-汗血宝马...
weixin_29894169的博客
08-04 748
问题出现的环境背景及自己尝试过哪些方法目前在整理自己的学习目录时碰到一个问题：使用css-loader中localIdentName: [name]__[local]--[hash:base64:5]为样式添加hash等，最后添加成功了，但是HTML模版里的却没有添加成功。只能使用[local]了。也使用了HtmlWebpackPlugin，但是无效相关代码webpack.base.jsconst...
解决覆盖样式无效之scoped和deep间的那些事儿
weixin_46422035的博客
03-02 2257
CSS的scoped作用域和深度选择器/deep/既可以优雅的开发代码，又可以完美的覆盖三方组件库（例如：element-ui等)、子组件的样式~
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、付费专栏及课程。

余额充值