<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 ...
随机推荐
- 【nginx,apache】thinkphp ,laravel,yii2开发运行环境搭建
缘由 经常会有人问xx框架怎么配置运行环境,这里我就给贴出吉祥三宝(Yii2,Laravel5,Thinkphp5 )的Nginx和Apache的配置,供大家参考 Nginx Yii2 server ...
- day4_高效处理文件
read()将文件内容从磁盘中全部读出,放到内存,再给cpu处理,性能低,如果文件量大,很容易内存溢出或卡死. 高效方式: 方式一:一般不用的,代码行多 f = open('users.txt','r ...
- 动态补丁构建工具nuwa中的“坑”
1. 继承android中的Application的类A1Application:并且A2Application继承自A1Application,并且配置在清单文件中name=".A2App ...
- falsk 与 django 钩子方法
falsk 四大钩子方法# 在第一次请求之前调用@app.before_first_requestdef before_first_request(): print("这是第一次请求之前调用 ...
- falsk_蓝图(blueprint)
蓝图(blueprint) 随着业务代码的增加,将所有代码都放在单个程序文件中,是非常不合适的.这不仅会让代码阅读变得困难,而且会给后期维护带来麻烦. 什么是蓝图 蓝图:用于实现单个应用的视图.模板. ...
- 【Python全栈-后端开发】嵩天老师-Django
嵩天老师-Python云端系统开发入门教程(Django) 视频地址:https://www.bilibili.com/video/av19801429 课前知识储备: 一.课程介绍: 分久必合.合久 ...
- kali蓝牙连接
http://blog.csdn.net/hailangnet/article/details/47723181 http://www.aiuxian.com/article/p-3012084.ht ...
- 【JMeter】【性能测试】配置元件
HTTP Cookie Manager 用来存储浏览器产生的用户信息 Clear Cookies each Iteration:每次迭代请求,清空cookies,GUI中定义的任何cookie都不会被 ...
- centos安装Django之一:安装openssl
这几天在部署Django,需要安装的东西有点多,python3.pip3.openssl(pip依赖ssl环境),所以第一步是安装openssl,如何安装呢?主要有三步,随ytkah一起来看看吧 1. ...
- 最少步数(bfs)
最少步数 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...