From 49d3b3685dd433b9b3fc7ac815ee416f45053845 Mon Sep 17 00:00:00 2001 From: Matchu Date: Fri, 23 Oct 2020 00:20:50 -0700 Subject: [PATCH] add CORS for movie clip asset loading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 () ``` 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! --- src/app/components/OutfitMovieLayer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/components/OutfitMovieLayer.js b/src/app/components/OutfitMovieLayer.js index b12a4dd..7b0d4ee 100644 --- a/src/app/components/OutfitMovieLayer.js +++ b/src/app/components/OutfitMovieLayer.js @@ -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());