跨域图片资源权限(CORS enabled image)
HTML 规范文档为 images 引入了 crossorigin
属性, 通过设置适当的头信息 CORS , 可以从其他站点加载 img
图片, 并用在 canvas 中,就像从当前站点(current origin)直接下载的一样.
crossorigin
属性的使用细节, 请参考 CORS settings attributes.
什么是 “被污染的(tainted)” canvas?
尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob()
, toDataURL()
和 getImageData()
等方法, 否则会抛出安全错误(security error).
这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏。
(译者注: 如果用户登陆过QQ等社交网站, 假若不做保护 ,则可能打开某个网站后,该网站利用 canvas 将用户的图片信息获取,上传,进而引发泄露.)
示例: 从其他站点保存图片
首先, 图片服务器必须设置相应的 Access-Control-Allow-Origin
响应头。添加 img 元素的 crossOrigin 属性来请求头。比如Apache服务器,可以拷贝 HTML5 Boilerplate Apache server configs 中的配置信息, 来进行回应:
<IfModule mod_setenvif.c><IfModule mod_headers.c><FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">SetEnvIf Origin ":" IS_CORSHeader set Access-Control-Allow-Origin "*" env=IS_CORS</FilesMatch></IfModule>
</IfModule>
这些设置生效之后, 就可以像本站的资源一样, 保存其他站点的图片到 DOM存储 之中(或者其他地方)。
var img = new Image,canvas = document.createElement("canvas"),ctx = canvas.getContext("2d"),src = "http://example.com/image"; // 具体的图片地址img.crossOrigin = "Anonymous";img.onload = function() {canvas.width = img.width;canvas.height = img.height;ctx.drawImage( img, 0, 0 );localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// 确保缓存的图片也触发 load 事件
if ( img.complete || img.complete === undefined ) {img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";img.src = src;
}
浏览器兼容性
Desktop
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 13 | 8 | No support | No support | ? |
Mobile
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
另请参见
Chrome:在WebGL中使用跨域图片
HTML规范-
crossorigin
属性
感谢
- 众成翻译: http://zcfy.cc/article/486
翻译人员: 铁锚 http://blog.csdn.net/renfufei
翻译日期: 2016年3月29日
原文日期: 2014年9月16日
原文链接: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
跨域图片资源权限(CORS enabled image)相关推荐
- 漫谈同源策略(SOP)和跨域资源共享(CORS)
前言提要: 面试的时候被问到了是否了解同源策略,并没有了解过 (虽然朋友洋写了文章,但是我当时也没有仔细琢磨).所以有了这篇文- 据说了解同源策略是十分有必要的,要深入了解XSS/CSRF等w ...
- 新蜂商城(newbee-mall-api)部分接口实验,跨域处理(同源策略,跨域访问,CORS),系统安全问题(Session,Cookie,Token,OAuth)(软件工程综合实践课程第十三周)
文章目录 一.要求 二.知识总结 跨域处理 1.同源策略 1.1 浏览器的同源策略 1.2 跨域请求实验 2 跨域访问 2.1 添加响应头来处理跨域 2.1.1 CORS 跨域资源共享 2.1.2 设 ...
- Ajax入门笔记(原生Ajax、jQuery、axios、fetch、跨域SONP、CORS)
文章目录 一.基础知识 1.1AJAX简介 1.2 AJAX的特点 1.2.1 AJAX 的优点 1.2.2 AJAX 的缺点 1.3 XML简介 1.4 HTTP简介 1.4.1 请求报文 1.4. ...
- 【AJAX 笔记】AJAX 基本、HTTP 基本、原生 AJAX 的使用,jQuery / Axios / fetch 发送请求、跨域(JSONP/CORS)
文章目录 1 Ajax 概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 1.4 AJAX 属性和方法 2. H ...
- 跨域资源共享(CORS)--跨域ajax
几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...
- 跨域问题及CORS机制
跨域 跨域是指一个资源请求与其不在同一个域(源)的资源,不在同一个域(源)是指两个域的协议.域名或端口不同. 同源策略 出于安全考虑,浏览器制定了同源策略, 限制了某些跨域请求.同源策略是跨域问题产生 ...
- 跨域解决方案之CORS及其相关概念
在讲解 CORS 之前先了解以下几个概念 同源策略 同源策略(Same origin policy)是一种约定,是浏览器限制一个域名与另外一个域名的资源的交互的规则,是浏览器最核心也最基本的安全功能, ...
- JS跨域请求解决方案-CORS
文章目录 JS跨域请求解决方案-CORS 1.JS跨域请求 测试JavaScript的跨域请求(失败) 2. 跨域解决方案CORS 普通实现方法 springMVC的跨域请求注解 3.分布式Id解决方 ...
- 跨域解决方案(CORS)
跨域解决方案(CORS) 1. 什么是跨域? 跨域问题是出于浏览器的[同源策略]限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略 ...
最新文章
- OpenStack环境搭建(六:常见问题及解决方案总结)
- win10安装和配置Maven3.6.3
- Python-OpenCV 笔记5 -- 几何变换(Geometric Transformations)
- Scala带返回值函数声明示例
- 如何将Android Studio卸载的干干净净?
- ruby array_Ruby中带有示例的Array.index()方法
- php什么程度算学会,十天学会PHP - 序1,学会的标准是什么?(20180820-1)
- Android SQLite (二) 基本用法
- go 判断切片是否存在某元素_Golang基础之切片
- 强悍的 Python —— 读取大文件
- 借教室(codevs 1217)
- (二)Excel函数应用之数学和三角函数
- 手机声音同步到另一部手机_教你一招,手机耳机音量一键同步!
- 51单片机-DS1302时钟芯片(自己理解的
- 010项目沟通管理和干系人管理
- ie11找不到java_IE11桌面图标不见了怎么办 IE11桌面图标不见了的两种解决方法
- oracle导入dmp文件数据不全,Oracle dmp文件损坏恢复案例
- Android Q 获取设备唯一ID(UDID\GUID\UUID\SSAID\GAID)
- 搜狗老域名作用之快速大量搜狗收录
- ElementUI表格多选数据处理
热门文章
- 蚂蚁金服开源-SofaRpc源码学习篇
- 攻略(一):骑马与砍杀-潘德的预言mod快速自立攻略
- Redis Cluster 集群部署
- 服务器开发系列(三)——Linux与Windows操作系统基础功能对比
- RHCE8学习过程(八)Centos8软件包的管理与安装
- win7工作组计算机无法连接打印机,Win7计算机无法连接到Win10共享打印机解决方案...
- obv代码matlab,通达信精进终极obv指标公式,通达信obv指标公式源码
- 项目管理的3个关键动作:启动、推进、复盘
- 【转载】《仙剑OL》主题曲_玩家版
- 基金什么时候买入好?