ampproject / ampproject/amphtml

The canvas has been tainted by cross-origin data for background-blur.js

Open
#37,299 1 comment 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug WG: stories
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.