<script> 属性crossorigin
今日偶然见到如下代码:
<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的更多相关文章
- script标签crossorigin属性及同源策略和跨域方法
首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...
- js之script属性async与defer
概念 默认情况下js的脚本执行是同步和阻塞的,但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式,这些都是布尔类型了,没有值,只需要出现在 < ...
- <script>属性async和defer的区别
async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...
- 从无到有<前端异常监控系统>落地
导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了. 我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才 ...
- [转]HTML5 script 标签的 crossorigin 属性到底有什么用?
HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- 引入其他服务的JS、和 本地的JS文件,script的属性
==============使用其他服务器引入JS文件,1,减轻服务器压力2,速度快3,可以缓存 cdnjs库,更新比较快https://cdnjs.com/ cdn库 引入JS文件如:jqueryb ...
- npm package.json属性详解
概述 本文档是自己看官方文档的理解+翻译,内容是package.json配置里边的属性含义.package.json必须是一个严格的json文件,而不仅仅是js里边的一个对象.其中很多属性可以通过np ...
- grootJs 属性过滤器
index10.html <html><head> <title>属性过滤器</title> <script src="jquery-1 ...
随机推荐
- 把MP3保存到数据库中
使用JdbcUtils得到连接con java.sql包下的Interface Blob----其实现类SerialBlob Blob是一个可以存储二进制文件的容器. BLOB常常是数据库中用来存储二 ...
- LeetCode 976 Largest Perimeter Triangle 解题报告
题目要求 Given an array A of positive lengths, return the largest perimeter of a triangle with non-zero ...
- LeetCode 766 Toeplitz Matrix 解题报告
题目要求 A matrix is Toeplitz if every diagonal from top-left to bottom-right has the same element. Now ...
- unity插件,从一段文字中提取中文并去重
using System.Collections.Generic; using System.Text.RegularExpressions; using UnityEditor; using Uni ...
- openssl编译参数选项
执行Configure是常见参数选项如下: 安装参数: --openssldir=OPENSSLDIR 安装目录,默认是 /usr/local/ssl . --prefix=PREFIX 设置 lib ...
- golang的json数据解析
import ( "fmt" "time" "github.com/astaxie/beego" " ...
- cudnn升级之后caffe无法训练的问题
由于安装新版本的TensorFlow需要cudnn6.0因此用6.0将原来的 5.0替换了,后来又用之前编译好的caffe进行训练,发现caffe会去找5.0的cudnn,然后就报错了,不能正常训练. ...
- 【托业】【新托业TOEIC新题型真题】学习笔记13-题库四-P7
>counterpart 对应的人 >Master of Business Administration 工商管理学硕士 >superb 极好的 >executive 执行总监 ...
- 【雅思】【写作】【大作文】Discuss both views and give your own opinion
•Discuss both views and give your own opinion • • •Agree or disagree •Discuss both views •Report ...
- Java基础知识(JAVA基本数据类型包装类)
基本数据类型的包装类 为什么需要包装类? Java并不是纯面向对象的语言.Java语言是一个面向对象的语言,但是Java的基本数据类型却不是面向对象的.但是我们在实际使用中经常需要将基本数据转化成对象 ...