fix: safari data url taints (#1797)

This commit is contained in:
Niklas von Hertzen 2019-04-09 20:32:22 -07:00 committed by GitHub
parent a63cb3c0f1
commit 4e4a231683
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 77 deletions

View File

@ -27,38 +27,6 @@ const testRangeBounds = document => {
return false; return false;
}; };
// iOS 10.3 taints canvas with base64 images unless crossOrigin = 'anonymous'
const testBase64 = (document: Document, src: string): Promise<boolean> => {
const img = new Image();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
return new Promise(resolve => {
// Single pixel base64 image renders fine on iOS 10.3???
img.src = src;
const onload = () => {
try {
ctx.drawImage(img, 0, 0);
canvas.toDataURL();
} catch (e) {
return resolve(false);
}
return resolve(true);
};
img.onload = onload;
img.onerror = () => resolve(false);
if (img.complete === true) {
setTimeout(() => {
onload();
}, 500);
}
});
};
const testCORS = () => typeof new Image().crossOrigin !== 'undefined'; const testCORS = () => typeof new Image().crossOrigin !== 'undefined';
const testResponseType = () => typeof new XMLHttpRequest().responseType === 'string'; const testResponseType = () => typeof new XMLHttpRequest().responseType === 'string';
@ -135,15 +103,6 @@ const FEATURES = {
return value; return value;
}, },
// $FlowFixMe - get/set properties not yet supported // $FlowFixMe - get/set properties not yet supported
get SUPPORT_BASE64_DRAWING() {
'use strict';
return (src: string) => {
const value = testBase64(document, src);
Object.defineProperty(FEATURES, 'SUPPORT_BASE64_DRAWING', {value: () => value});
return value;
};
},
// $FlowFixMe - get/set properties not yet supported
get SUPPORT_FOREIGNOBJECT_DRAWING() { get SUPPORT_FOREIGNOBJECT_DRAWING() {
'use strict'; 'use strict';
const value = const value =

View File

@ -129,42 +129,36 @@ export default class ResourceLoader {
this.logger.log(`Added image ${key.substring(0, 256)}`); this.logger.log(`Added image ${key.substring(0, 256)}`);
} }
const imageLoadHandler = (supportsDataImages: boolean): Promise<Image> => this.cache[key] = new Promise((resolve, reject) => {
new Promise((resolve, reject) => { const img = new Image();
const img = new Image(); img.onload = () => resolve(img);
img.onload = () => resolve(img); //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
//ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous if (isInlineBase64Image(src) || useCORS) {
if (!supportsDataImages || useCORS) { img.crossOrigin = 'anonymous';
img.crossOrigin = 'anonymous'; }
}
img.onerror = reject; img.onerror = reject;
img.src = src; img.src = src;
if (img.complete === true) { if (img.complete === true) {
// Inline XML images may fail to parse, throwing an Error later on // Inline XML images may fail to parse, throwing an Error later on
setTimeout(() => { setTimeout(() => {
resolve(img); resolve(img);
}, 500); }, 500);
} }
if (this.options.imageTimeout) { if (this.options.imageTimeout) {
const timeout = this.options.imageTimeout; const timeout = this.options.imageTimeout;
setTimeout( setTimeout(
() => () =>
reject( reject(
__DEV__ __DEV__
? `Timed out (${timeout}ms) fetching ${src.substring(0, 256)}` ? `Timed out (${timeout}ms) fetching ${src.substring(0, 256)}`
: '' : ''
), ),
timeout timeout
); );
} }
}); });
this.cache[key] =
isInlineBase64Image(src) && !isSVG(src)
? // $FlowFixMe
FEATURES.SUPPORT_BASE64_DRAWING(src).then(imageLoadHandler)
: imageLoadHandler(true);
return key; return key;
} }

View File

@ -1,2 +0,0 @@
[Safari]/tests/reftests/acid2.html
[Safari]/tests/reftests/background/encoded.html