add CORS for movie clip asset loading
I think the issue with the Spring Topiary Garden Background is that EaselJS is trying to do intermediate canvas reads in order to apply computed filters, but loading from our asset proxy counts as tainted data. Here's the traceback I got in Chrome for it: ``` Error building movie clips DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at a.b._applyFilters (https://code.createjs.com/1.0.0/easeljs.min.js:15:12029) at a.b._drawToCache (https://code.createjs.com/1.0.0/easeljs.min.js:15:11806) at a.b.update (https://code.createjs.com/1.0.0/easeljs.min.js:15:8638) at a.b.define (https://code.createjs.com/1.0.0/easeljs.min.js:15:8148) at lib.Flowerfront.b.cache (https://code.createjs.com/1.0.0/easeljs.min.js:13:3361) at new lib.Bg (https://images.neopets-asset-proxy.openneo.net/cp/items/data/000/000/441/441520_f4a43d48bf/441520HTML5.js:4266:16) at new lib._441520HTML5 (https://images.neopets-asset-proxy.openneo.net/cp/items/data/000/000/441/441520_f4a43d48bf/441520HTML5.js:5291:18) at x (https://impress-2020.openneo.net/static/js/11.3a356cfe.chunk.js:1:12286) at https://impress-2020.openneo.net/static/js/11.3a356cfe.chunk.js:1:17768 at Array.map (<anonymous>) ``` To try to fix this, I've updated our Fastly config to version 8, which should accept CORS requests from https://impress-2020.openneo.net. And here, I've updated the movie clip assets to be requested CORS-style, so that the Origin header will actually be set. It's hard to test this without just, pushing it to prod. I've confirmed in isolation that setting the `Origin` header in the request yields the expected `Access-Control-Allow-Origin` response header, and that the `Vary` header is set correctly too. But, end-to-end, I don't really have great mockability here—maybe with a good proxy setup I could do it? But nah, let's just push and find out!
This commit is contained in:
parent
10b10e9a43
commit
49d3b3685d
1 changed files with 4 additions and 1 deletions
|
@ -237,7 +237,10 @@ export async function loadMovieLibrary(librarySrc) {
|
|||
const manifestImages = new Map(
|
||||
library.properties.manifest.map(({ id, src }) => [
|
||||
id,
|
||||
loadImage({ src: safeImageUrl(librarySrcDir + "/" + src) }),
|
||||
loadImage({
|
||||
src: safeImageUrl(librarySrcDir + "/" + src),
|
||||
crossOrigin: "anonymous",
|
||||
}),
|
||||
])
|
||||
);
|
||||
await Promise.all(manifestImages.values());
|
||||
|
|
Loading…
Reference in a new issue