Chromium Blog
News and developments from the open source browser project
Using Cross-domain images in WebGL and Chrome 13
6 Temmuz 2011 Çarşamba
A few weeks ago, we became aware of a
security issue
with WebGL:
shaders could be used
to indirectly deduce the contents of textures uploaded to the GPU. As a result, the WebGL specification was
updated
to be more restrictive when it comes to using cross-domain images and videos as WebGL textures.
As a result, Chrome 13 (and Firefox 5) will no longer allow cross-domain media as a WebGL texture. The default behavior will be a DOM_SECURITY_ERR. However, applications may still utilize images and videos from another domain with the cooperation of the server hosting the media, otherwise known as
CORS
.
CORS support
for MediaElements has also been fully implemented in WebKit by setting a new
.crossOrigin
attribute. This means that sophisticated applications that were using cross-origin textures before, can continue to do so, assuming the hosting image server grants the necessary cross-origin permission using CORS. If you want to enable CORS request on an image, all you have to do is add one line of code:
var img = document.createElement('img');
img.onload = function(e) { … };
img.crossOrigin = ''; // no credentials flag. Same as img.crossOrigin='anonymous'
img.src = 'http://other-domain.com/image.jpg';
Another nice property that we gain from this new setting is the ability to read cross-domain image data set on a 2D canvas. Normally, filling a canvas with a remote image (e.g.
ctx.drawImage()
) flips the
origin-clean flag
to false. Attempting to read back the pixels using
ctx.toDataURL()
or
ctx.getImageData()
throws a SECURITY_ERR. This is to prevent information leakage. However, when
.crossOrigin
is set (and the remote server supports CORS), the read is possible. For example:
var img = document.createElement('img');
img.onload = function(e) {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var url = canvas.toDataURL(); // Read succeeds, canvas won't be dirty.
};
img.crossOrigin = '';
img.src = 'http://other-domain.com/image.jpg';
Unfortunately, this new restriction in WebGL means that some existing content will break. We’ve already started working with external image and video hosting services like Flickr to evangelize the
use of CORS
on their images.
You can test this new behavior today using images from Picasa, which already sends a CORS header allowing cross-origin requests, and the
Chrome dev channel
.
Posted by Eric Bidelman, Developer Advocate
Etiketler
$200K
1
10th birthday
4
abusive ads
1
abusive notifications
2
accessibility
3
ad blockers
1
ad blocking
2
advanced capabilities
1
android
2
anti abuse
1
anti-deception
1
background periodic sync
1
badging
1
benchmarks
1
beta
83
better ads standards
1
billing
1
birthday
4
blink
2
browser
2
browser interoperability
1
bundles
1
capabilities
6
capable web
1
cds
1
cds18
2
cds2018
1
chrome
35
chrome 81
1
chrome 83
2
chrome 84
2
chrome ads
1
chrome apps
5
Chrome dev
1
chrome dev summit
1
chrome dev summit 2018
1
chrome dev summit 2019
1
chrome developer
1
Chrome Developer Center
1
chrome developer summit
1
chrome devtools
1
Chrome extension
1
chrome extensions
3
Chrome Frame
1
Chrome lite
1
Chrome on Android
2
chrome on ios
1
Chrome on Mac
1
Chrome OS
1
chrome privacy
4
chrome releases
1
chrome security
10
chrome web store
32
chromedevtools
1
chromeframe
3
chromeos
4
chromeos.dev
1
chromium
9
cloud print
1
coalition
1
coalition for better ads
1
contact picker
1
content indexing
1
cookies
1
core web vitals
2
csrf
1
css
1
cumulative layout shift
1
custom tabs
1
dart
8
dashboard
1
Data Saver
3
Data saver desktop extension
1
day 2
1
deceptive installation
1
declarative net request api
1
design
2
developer dashboard
1
Developer Program Policy
2
developer website
1
devtools
13
digital event
1
discoverability
1
DNS-over-HTTPS
4
DoH
4
emoji
1
emscriptem
1
enterprise
1
extensions
27
Fast badging
1
faster web
1
features
1
feedback
2
field data
1
first input delay
1
Follow
1
fonts
1
form controls
1
frameworks
1
fugu
2
fund
1
funding
1
gdd
1
google earth
1
google event
1
google io 2019
1
google web developer
1
googlechrome
12
harmful ads
1
html5
11
HTTP/3
1
HTTPS
4
iframes
1
images
1
incognito
1
insecure forms
1
intent to explain
1
ios
1
ios Chrome
1
issue tracker
3
jank
1
javascript
5
lab data
1
labelling
1
largest contentful paint
1
launch
1
lazy-loading
1
lighthouse
2
linux
2
Lite Mode
2
Lite pages
1
loading interventions
1
loading optimizations
1
lock icon
1
long-tail
1
mac
1
manifest v3
2
metrics
2
microsoft edge
1
mixed forms
1
mobile
2
na
1
native client
8
native file system
1
New Features
5
notifications
1
octane
1
open web
4
origin trials
2
pagespeed insights
1
pagespeedinsights
1
passwords
1
payment handler
1
payment request
1
payments
2
performance
20
performance tools
1
permission UI
1
permissions
1
play store
1
portals
3
prefetching
1
privacy
2
privacy sandbox
4
private prefetch proxy
1
profile guided optimization
1
progressive web apps
2
Project Strobe
1
protection
1
pwa
1
QUIC
1
quieter permissions
1
releases
3
removals
1
rlz
1
root program
1
safe browsing
2
Secure DNS
2
security
36
site isolation
1
slow loading
1
sms receiver
1
spam policy
1
spdy
2
spectre
1
speed
4
ssl
2
store listing
1
strobe
2
subscription pages
1
suspicious site reporter extension
1
TCP
1
the fast and the curious
23
TLS
1
tools
1
tracing
1
transparency
1
trusted web activities
1
twa
2
user agent string
1
user data policy
1
v8
6
video
2
wasm
1
web
1
web apps
1
web assembly
2
web developers
1
web intents
1
web packaging
1
web payments
1
web platform
1
web request api
1
web vitals
1
web.dev
1
web.dev live
1
webapi
1
webassembly
1
webaudio
3
webgl
7
webkit
5
WebM
1
webmaster
1
webp
5
webrtc
6
websockets
5
webtiming
1
writable-files
1
yerba beuna center for the arts
1
Archive
2025
Tem
Haz
May
Oca
2024
Ara
Ağu
Haz
May
Nis
Mar
Şub
2023
Kas
Eki
Eyl
Ağu
Haz
May
Nis
Şub
2022
Ara
Eyl
Ağu
Haz
May
Nis
Mar
Şub
Oca
2021
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2020
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2019
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2018
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2017
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2016
Ara
Kas
Eki
Eyl
Ağu
Haz
May
Nis
Mar
Şub
Oca
2015
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2014
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2013
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2012
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2011
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2010
Ara
Kas
Eki
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2009
Ara
Kas
Eyl
Ağu
Tem
Haz
May
Nis
Mar
Şub
Oca
2008
Ara
Kas
Eki
Eyl
Feed
Follow @ChromiumDev
Give us feedback in our
Product Forums
.
