html标签中crossOrigin、integrity属性详解、SRI、HSTS

已于 2023-03-21 10:53:11 修改
阅读量1.9k 收藏 3
点赞数 2
分类专栏： HTML 前端安全 文章标签： integrity属性使用详解 crossOrigin属性使用 HSTS强制https SRI子资源完整性
于 2022-07-27 17:24:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AIWWY/article/details/126017250
版权

crossOrigin属性

用于img标签

在canvas中使用drawImage()绘制图像时，若传入未声明crossorigin属性的跨源<img>元素，会使canvas变成污染状态（tainted），此时任何读取canvas数据的操作，如getImageData()、toDataURL()、toBlob()等，均会抛出错误（可理解为在img标签涉及到canvas时需使用crossOrigin='anonymous'）。

示例及详述 

Allowing cross-origin use of images and canvas - HTML: HyperText Markup Language | MDN

跨源相关机制综述（三）：crossorigin属性 - 知乎

用于script标签

对于跨源的传统脚本（未声明type=module的脚本），若未声明crossorigin属性，在发生错误时，window.onerror中不会收到详细的错误信息，仅有类似“Script error”这样的简单提示。这样做是因为，即使是错误信息，也有可能暴露用户状态。

SRI

Subresource Integrity - 子资源完整性，是指浏览器通过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性。通常通过script或link标签上的integrity属性值确定。

integrity属性

用于script或者link标签，赋值哈希，开启浏览器对获取的资源进行检查，用来进行检验加载的JavaScript文件或者CSS文件是否完整（可避免托管在CDN的资源被篡改而引入的XSS 风险）。

示例及详述 

HTML属性crossorigin和integrity有什么用_小帅的编程笔记的博客-CSDN博客

使用 SRI 解决 CDN 劫持 - 掘金

HSTS

HSTS(HTTP Strict Transport Security) 是一种Web安全协议，它的作用是在本地强制客户端（如浏览器）使用HTTPS与服务器创建连接。服务器开启HSTS的方法是，当客户端通过HTTPS发出请求时，在服务器返回的超文本传输协议响应头中包含STS(Strict-Transport-Security)字段。

一文带你了解中间人攻击和HSTS - 掘金

简单易懂HSTS，你需要它！ - 掘金

YF-SOD
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
注解@CrossOrigin具有什么功能呢？
qq_25073223的博客
06-06 9622
CrossOrigin注解的功能简介说明
springboot之跨域访问cros，@CrossOrigin注解
YMYYZ的博客
01-09 9612
1.springboot之跨域访问cros，@CrossOrigin注解 2.浏览器协议的默认端口号
@CrossOrigin是Spring框架中的一个注解，用于处理跨域资源共享（Cross-Origin Resource Sharing, CORS）问题。
最新发布
wangqiaowq的博客
04-30 489
是Spring框架中的一个注解，用于处理跨域资源共享（Cross-Origin Resource Sharing, CORS）问题。在Web应用开发中，出于安全原因，浏览器实施了同源策略（Same-origin policy），这一策略限制了从一个源加载的Web页面脚本与来自不同源的资源交互。当你在一个控制器类或具体处理方法上使用此注解时，Spring会自动在HTTP响应头中添加适当的CORS相关头部信息，如。）发送AJAX请求，浏览器会阻止这个请求，除非服务器端明确允许此类跨域请求。
@CrossOrigin及其实现跨域原理
cristianoxm的博客
05-18 9176
一、关于什么是跨域及解决方法看这篇文章 文章 二、关于@CrossOrigin 简单请求和非简单请求 对于简单请求（GET，HEAD，POST），浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为预检请求 （preflight） @Cro
@CrossOrigin的使用
计算机小白的奋起
04-19 982
说明注解@CrossOrigin的使用
Spring 注解面面通 之 @CrossOrigin 注解应用详解
只为成功找方法 不为失败找借口
06-10 2593
默认情况下，只允许客户端访问：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。注意：CORS处理时，从Forwarded、X-Forwarded-Host、X-Forwarded-Port、X-Forwarded-Proto取请求源值。若为Cache-Control、Content-Language、Expires、Last-Modified、Pragma，则无需设置。
webpack-subresource-integrity：用于启用Subresource完整性的Webpack插件
02-06
webpack-subresource-integrity Webpack插件，用于启用子资源完整性。 （SRI）是一项安全功能，使浏览器可以验证是否已交付获取的文件（例如，从CDN获取的文件）而没有意外的操作。 产品特点 与可选集成。 自动...
Subresource Integrity (SRI) Hash Generator-crx插件
04-02
1. **哈希计算**：开发者在HTML代码中引用外部资源（如JavaScript文件或CSS文件）时，会添加一个`integrity`属性，该属性包含资源的哈希值。这个哈希值通常是SHA-384或SHA-256算法生成的。 2. **资源请求**：当用户...
srihash.org:SRI哈希生成器
04-27
SRI哈希生成器 这是网站背后的代码。 它生成哈希。 安装 您需要使用Node.js 10.x和npm进行lint，并需要使用本地服务器进行测试 克隆git仓库并安装依赖项： git clone git://github.com/mozilla/srihash.org.git cd ...
gulp-sri-php:扫描Gulp中PHP文件并处理脚本和样式表标签以添加SRI属性
04-02
扫描Gulp中PHP（或其他基于HTML的）文件，并处理脚本和样式表标签以添加子资源完整性（SRI）属性。 我尝试了其他插件，但是发现了以下问题... hash-使用Cheerio，它需要HTML并在PHP标签上失败 需要OpenSSL并且在...
grunt-sri-hash:一个 grunt 任务，它散列所有具有完整性属性的内联脚本和样式表
05-29
grunt-sri-hash 一个 grunt 任务，它散列所有具有完整性...在项目的 Gruntfile 中，将名为sri_hash的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initConfig ( { sri_hash : { options : { algor
@CrossOrigin注解的使用指南
LSW1737554365的博客
11-03 1941
CrossOrigin注解是Spring框架提供的一种注解，用于配置CORS策略。通过在控制器类或方法上添加@CrossOrigin注解，我们可以指定哪些来源可以访问该类或方法，从而实现对CORS的简化配置。@CrossOrigin注解支持多种配置选项，例如允许特定来源、允许所有来源、指定请求头和响应头等。
注解@CrossOrigin详解
热门推荐
诚的博客
10-25 11万+
注解@CrossOrigin 出于安全原因，浏览器禁止Ajax调用驻留在当前原点之外的资源。例如，当你在一个标签中检查你的银行账户时，你可以在另一个选项卡上拥有EVILL网站。来自EVILL的脚本不能够对你的银行API做出Ajax请求（从你的帐户中取出钱！）使用您的凭据。 跨源资源共享（CORS）是由大多数浏览器实现的W3C规范，允许您灵活地指定什么样的跨域请求被授权，而不是使用一些不太安全和不太强大的策略，如IFRAME或JSONP。 一、跨域(CORS)支持： Spring Framework
html css integrity,integrity 属性
weixin_39797381的博客
06-18 1305
一个有用的推论是 document.head 在任何写在网页上的 JavaScript 几乎总是可用。document.body 只有当你将 script 标签写在 标签中或者它之后的时候才可用。async 和 deferHTML5 添加了两个工具来控制脚本的执行。async表示“不用马上执行它”。更具体地它表示：我不介意你在整个网页加载完成之后执行这个脚本，把它放在其他脚本执行之后。这对于统计分...
解决springboot添加@CrossOrigin支持跨域不起作用
qq_45721173的博客
05-07 9128
问题描述 在springboot开发中，为解决跨域请求问题，在代码中添加注解@CrossOrigin不起任何作用。 后端报错信息如下 java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" resp
Spring Boot 使用 CORS 解决跨域请求问题
养歌的博客
01-10 2282
对于前后端分离的项目来说，如果前端项目与后端项目部署在两个不同的域下，那么势必会引起跨域问题的出现。 那什么是跨域呢？ 跨域指的是从一个域名去请求另外一个域名的资源。即跨域名请求，跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的 “同源策略” 造成的，是浏览器施加的安全限制。跨域的严格一点来说就是只要协议，域名，端口有任何一个的不同，就被当作是跨域。 下面举个例子： 判断下面 URL 是否和 http://www.baidu.com/a/a.html 同源 http://www.baidu.com/
springboot跨域问题，解决方法
qq_35716085的博客
12-20 2万+
前端访问出现CORS跨域问题。不多说，直接上代码~
html5——integrity和crossorigin属性
weixin_45728126的博客
03-21 1147
html5——integrity和crossorigin属性 crossorigin属性说明 crossorigin属性是枚举值，可能值有以下： 关键字 描述 anonymous 这个元素的CORS请求将凭据标签设置为“同源” use-credentials 这个元素的CORS请求将凭据标签设置为“包含” " " 设置属性为空值，像是crossorigin或是crossorigin=" ",等同于anonymous crossorigin属性，在,,,参考文章： link标签中的
SRI (Subresource Integrity) 的检查
05-24
SRI (Subresource Integrity) 是一种安全机制，可以帮助保护网页免受恶意第三方脚本的攻击。它通过在引入外部资源（如脚本、样式表、图片等）时，附加一个 Hash 值，来确保浏览器只会加载经过验证的资源，从而防止恶意脚本的注入和执行。 当使用 SRI 时，浏览器会在加载资源前，检查资源的 Hash 值是否与预期的值相符。如果不相符，则浏览器会认为资源已被篡改，并拒绝加载该资源。 要使用 SRI，可以在引用外部资源的标签中添加 integrity 属性，该属性的值为资源的 Hash 值。例如： ```html <script src="https://example.com/example.js" integrity="sha384-xxxx"></script> ``` 其中，sha384-xxxx 是资源的 Hash 值。通常可以使用工具自动生成 Hash 值，以确保正确性。 使用 SRI 可以有效提高网页的安全性，但需要注意的是，如果引用的资源本身就已经被篡改，则 SRI 也无法提供保护。因此，仍需注意选择可信赖的外部资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值