HTML属性crossorigin和integrity有什么用

简介: 在引入许多官方的CDN静态库时,会发现我们引入的script中,不单单只有src属性,还有crossorigin和integrity属性。

网络异常,图片无法展示
|

在引入许多官方的CDN静态库时,会发现我们引入的script中,不单单只有src属性,还有crossoriginintegrity属性。

那这个东西,如果是我们本地的资源库,我们肯定是没有的。那这两个属性是干嘛的呢?

crossorigin属性

HTML5中,一些 HTML 元素提供了对 CORS 的支持。

我先解释一下CORS是啥?

网络异常,图片无法展示
|

相当于是给我们服务器一个白名单,让他不会拦截我们的静态资源。

支持CORS请求的浏览器一旦发现ajax请求跨域,会对请求做一些特殊处理,对于已经实现CORS接口的服务端,接受请求,并做出回应。

有一种情况比较特殊,如果我们发送的跨域请求为“非简单请求”,浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的“预检请求”,验证请求源是否为服务端允许源,这些对于开发这来说是感觉不到的,由浏览器代理。

总而言之,客户端不需要对跨域请求做任何特殊处理。

<audio>、<img>、<link>、<script> 和 <video> 都可以设置crossorigin属性

crossorigin的属性值可以是anonymoususe-credentials,如果没有属性值或者非法属性值,会被浏览器默认做anonymous

  1. crossorigin会让浏览器启用CORS访问检查,检查http响应头的Access-Control-Allow-Origin
  2. 对于传统script需要跨域获取的JS资源,控制暴露出其报错的详细信息
  3. 对于module script,控制用于跨域请求的凭据模式

网络异常,图片无法展示
|

而我们看看,我这里引入的静态库他给了一个anonymous。也就是不进行CORS检查。

integrity属性

integrity属性可以用在<script> 或者 <link>元素上,用来开启浏览器对获取的资源进行检查,它允许你为script或者link提供一个hash,用来进行验签,检验加载的JavaScript文件或者CSS问卷是否完整。

你可以当他是一个文件校验。和我们平常下载文件进行md5值校验一样。

告诉浏览器,使用sha384签名算法对下载的js文件进行计算,并与intergrity提供的摘要签名对比,如果二者不一致,就不会执行这个资源。

intergrity的作用有:避免由【托管在CDN的资源被篡改】而引入的XSS 风险

注意:启用 SRI 策略后,浏览器会对资源进行 CORS 校验,这就要求被请求的资源必须同域,或者配置了 Access-Control-Allow-Origin 响应头

相关文章
|
4月前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
|
4天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
10天前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
19 1
|
11天前
|
移动开发 数据管理 HTML5
Twaver-HTML5基础学习(22)层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)、属性管理容器(PropertyBox)
本文介绍了Twaver HTML5中的多种管理容器:层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)和属性管理容器(PropertyBox)。文章解释了这些容器的作用、如何获取它们,并提供了一些基本的操作方法。这些容器分别用于管理图层、告警、表格列和属性对象,是TWaver中数据管理和组织的重要部分。
24 1
|
22天前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
22天前
|
前端开发
html图像属性详解
在 HTML 中,使用 `&lt;img&gt;` 标签插入图像。主要属性包括:`src` 指定图像路径,`alt` 提供替代文本,`width` 和 `height` 设置尺寸,`title` 显示额外信息,`loading` 控制加载方式(如 `lazy` 延迟加载),`class` 和 `style` 用于样式化,`usemap` 定义图像映射,`ismap` 表示服务器端映射。这些属性可组合使用以实现复杂效果。
|
27天前
|
存储 前端开发 UED
HTML 属性新手注意点
在学习和使用HTML属性时,新手应注意以下几点,以确保代码的有效性和可维护性:1. 确保属性名称正确无误;2. 使用引号包围属性值;3. 避免内联样式,集中管理CSS;4. 使用语义化标签;5. 添加`alt`和`title`属性提高可访问性;6. 避免重复的ID;7. 利用`data-*`属性存储自定义数据;8. 测试属性在各浏览器中的兼容性;9. 合理使用`target`属性,注意安全;10. 保持代码简洁。遵循这些注意事项,有助于编写高质量的HTML代码。
|
2月前
HTML标记 和标记的属性
【8月更文挑战第28天】HTML标记 和标记的属性。
28 1
|
2月前
HTML元素(HTML Elements)的属性
【8月更文挑战第27天】HTML元素(HTML Elements)的属性。
26 2
|
2月前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
39 4
下一篇
无影云桌面