今日偶然见到如下代码:

<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. [knowledge][bigdata] nosql

    几款主流nosq数据库对比:http://www.cnblogs.com/vajoy/p/5471308.html Redis VS MongoDB:http://www.jianshu.com/p/ ...

  2. FlinkCEP - Complex event processing for Flink

    https://ci.apache.org/projects/flink/flink-docs-release-1.3/dev/libs/cep.html 首先目的是匹配pattern sequenc ...

  3. You-Get——基于Python3的媒体下载工具

    You-Get是一个基于 Python 3 的下载工具.使用 You-Get 可以很轻松的下载到网络上的视频.图片及音乐. 项目主页:https://github.com/soimort/you-ge ...

  4. linux内存不足,swap交换分区创建

    为什么需要swap 根 据Redhat公司的建议,Linux系统swap分区最适合的大小是物理内存的1-2倍.不过Linux上有些软件对swap分区得需求较大,例如要顺 利执行Oracle数据库软件, ...

  5. zabbix监控托管主机遇到问题

    昨天监控公司的托管主机时发现监控不上,回想起来其实就是个小问题,分分钟能解决的事,排错的过程才是真正耗心费神的. 监控环境: A zabbix server: 192.168.17.110 serve ...

  6. Postman教程

    1.Postman的介绍 Postman是一款功能强大的用于发送 HTTP 请求的 Chrome插件 .做web页面开发和测试的人员应该都知道!其主要特点:创建 + 测试:创建和发送任何的HTTP请求 ...

  7. wxPython:事件处理一

    事件处理是wxPython程序工作的基本机制,先看几个术语: 事件(event):应该程序期间发生的事情,要求有一个响应. 事件对象(event object):代表具体一个事件,包括事件的数据属性, ...

  8. Redis入门到高可用(九)——无序set

    一.结构 特点:无序,无重复,支持集合间操作 二.主要API smembers : 无序:(会阻塞)小心使用,可用sscan代替 spop: 从集合中弹出元素,每次只能弹出一个: 三.实战 抽奖系统 ...

  9. PHP的类,abstract类,interface及关键字extends和implements

    原文:https://blog.csdn.net/qq_19557947/article/details/77880757?locationNum=4&fps=1 PHP类 PHP类是单继承, ...

  10. python的__getitem__

    #这个方法返回与指定键相关的值.对序列来说,键应该是0~n-1的整数,其中n为序列的长度.对映射来说,键可以是任何类型. class Test(object): def __init__(self): ...