今日偶然见到如下代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

一般来说,我们几乎都是直接使用<script src>标签, 不怎么加其他属性的(目前我一直是这么写的,或许是我代码写的少嘛~~~~)

例如

	<script src="js/vendor/jquery-2.2.4.min.js"></script>

  首先我们了解下这两个属性的意思:

intergrity:脚本文件的密码散列

crossorigin:跨域

1.关于intergrity,这篇文章写的很好,这里只做核心描述:--------------------传送门----------->

许多网站都使用一套通用的JavaScript库。为了节省带宽及提高性能,它们会使用由第三方托管的JavaScript库。jQuery是Web上最流行的JavaScript库,截至2014年大约30%的网站都使用了它。其它流行的库还有Facebook SDK、Google Analytics。如果一个网站包含了指向第三方托管JavaScript文件的script标签,那么该网站的所有访问者都会下载该文件并执行它。如果攻击者攻陷了这样一个托管JavaScript文件的服务器,并向文件中添加了DDoS代码,那么所有访问者都会成为DDoS攻击的一部分,这就是服务器劫持,

这种攻击之所以有效是因为HTTP中缺少一种机制使网站能够禁止被篡改的脚本运行。为了解决这一问题,W3C已经提议增加一个新特性子资源一致性。该特性允许网站告诉浏览器,只有在其下载的脚本与网站希望运行的脚本一致时才能运行脚本。这是通过密码散列实现的。这就是守门神:integrity=文件指纹

密码散列可以唯一标识一个数据块,任何两个文件的密码散列均不相同。属性integrity提供了网站希望运行的脚本文件的密码散列。浏览器在下载脚本后会计算它的散列,然后将得出的值与integrity提供的值进行比较。如果不匹配,则说明目标脚本被篡改,浏览器将不使用它。

2.crossorign

从谷歌的结果来看,比较一致的说法是,引入跨域的脚本(比如用了 apis.google.com 上的库文件),如果这个脚本有错误,因为浏览器的限制(根本原因是协议的规定),是拿不到错误信息的。当本地尝试使用 window.onerror 去记录脚本的错误时,跨域脚本的错误只会返回 Script error。

但 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Controll-Allow-Origin 头信息允许当前域名可以获取错误信息,二是当前域名的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址,也就是 crossorigin 属性。

<script> 属性crossorigin的更多相关文章

  1. script标签crossorigin属性及同源策略和跨域方法

    首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...

  2. js之script属性async与defer

    概念 默认情况下js的脚本执行是同步和阻塞的,但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式,这些都是布尔类型了,没有值,只需要出现在 < ...

  3. <script>属性async和defer的区别

    async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...

  4. 从无到有<前端异常监控系统>落地

    导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了.  我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才 ...

  5. [转]HTML5 script 标签的 crossorigin 属性到底有什么用?

    HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...

  6. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  7. 引入其他服务的JS、和 本地的JS文件,script的属性

    ==============使用其他服务器引入JS文件,1,减轻服务器压力2,速度快3,可以缓存 cdnjs库,更新比较快https://cdnjs.com/ cdn库 引入JS文件如:jqueryb ...

  8. npm package.json属性详解

    概述 本文档是自己看官方文档的理解+翻译,内容是package.json配置里边的属性含义.package.json必须是一个严格的json文件,而不仅仅是js里边的一个对象.其中很多属性可以通过np ...

  9. grootJs 属性过滤器

    index10.html <html><head> <title>属性过滤器</title> <script src="jquery-1 ...

随机推荐

  1. 命令行颜色换算器(基于python)

    import sys print(hex(int(sys.argv[1])<<16|int(sys.argv[2])<<8|int(sys.argv[3]))) 就两行代码 在 ...

  2. Java线程的状态分析

    线程状态 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于“可运行线程池”中,变得可运行,只 ...

  3. Python接口自动化【requests处理Token请求】

    首先说一下使用python模拟登录或注册时,对于带token的页面怎么登录注册模拟的思路: 1.对于带token的页面,需要先从最开始的页面获取合法token 2.然后使用获取到的合法token进行后 ...

  4. 六、SpringBoot与数据访问

    六.SpringBoot与数据访问 1.JDBC spring: datasource: username: root password: 123456 url: jdbc:mysql://192.1 ...

  5. JDBC和hibernate,mybatis的比较

    在学习使用mybatis之前,先比较下jdbc编程和hibernate编程各自的优缺点. JDBC: 我们平时使用jdbc进行编程,大致需要下面几个步骤: 1,使用jdbc编程需要连接数据库,注册驱动 ...

  6. 封装||property

    封装 封装:主要是指在类的定义阶段将,以__开头的属性名进行变形..例如:__name ==> _People__name 封装的主要特点: 1.在类外部无法直接__name,想要在外部调用可以 ...

  7. 【剑指offer】把数组排成最小的数

    一.题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 二.思路: ...

  8. js篇-json字符串与json对象相互转化

    回调返回结果是 json字符串还是json对象一定要看清楚哦,状态不好的时候,感觉眼神也不好使了, var a = "{"name":"jenny", ...

  9. vue-自定义pc端软键盘

    <template> <div> <el-input v-model="money" type="textarea" placeh ...

  10. 常见的local variable 'x' referenced before assignment问题

    def fun1(): x = 5 def fun2(): x *= 2 return x return fun2() 如上代码,调用fun1() 运行会出错:UnboundLocalError: l ...