ampproject / ampproject/amphtml
The canvas has been tainted by cross-origin data for background-blur.js
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
On web stories that utilize background blur, a javascript error occurs saying the canvas has been tainted by cross-origin data.
### Reproduction Steps
Example of a web story that uses background blur on the final slide. (Click all the way thru the story to get the error.)
https://pastebin.com/bsLTLjJt
### Relevant Logs
```shell
Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
U @ error-reporting.js:206
(anonymous) @ error-reporting.js:294
background-blur.js:144 Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at Eg (https://cdn.ampproject.org/v0/amp-story-1.0.mjs:5:113775)
at https://cdn.ampproject.org/v0/amp-story-1.0.mjs:5:113101
```
### Browser(s) Affected
Chrome, Safari
### OS(s) Affected
Mac OS 10.15.7
### Device(s) Affected
iMac
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start with background-blur.js and reproduce the failure using the web story at the linked Pastebin URL, clicking through to the final slide. Compare the logged getImageData error with the canvas inputs and verify the fix by confirming the story completes without the cross-origin canvas exception in Chrome and Safari.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100