Javascript errors

@trek7k Thanks for getting in touch. I agree; these don’t appear to be standard CORS errors to me, but I’d like to do some more investigation. To do that, can you please share the following info?

1. The URL of a story or stories that are showing these JS errors
2. Your Site Health information privately via this form

Thank you!

Thank you Bethany, I have provided the info via the form.

@trek7k thanks for providing this information. I can see that your story is failing AMP validation.

Looking at the information provided I can see that you are using W3 Total Cache. Would you please be able to temporarily disable this plugin and check your story once more to see if this clears those validation errors?

I can’t disable it on the production site, but have done so on our development server. I have sent that information via the form Bethany linked above.

The error seems to persist even with W3TC turned off.

Edit: As a bit of additional info, the production site sits behind Cloudflare, however the development site does not so there shouldn’t be any caching or CDN interference there. We initially thought Cloudflare might be causing the issue, however we are seeing the same JS errors in both environments.

• This reply was modified 3 years, 2 months ago by trek7k. Reason: additional info

@trek7k thanks for letting me know. I can see that you have a number of plugins active on your site and it would be good to rule out any possible plugin conflict. To do this please could you follow the steps below. Note that doing this only affects a logged in users experience and won’t change what a visiting site user will see.

Use the Health Check & Troubleshooting plugin and enable its troubleshooting mode. This mode disables active plugins and switches to a default theme safely because it only affects the experience of the logged-in user.

• Please enable the Web Stories plugin and let me know if you still get the issue.
• Enable plugins and your theme one by one in this mode may help pinpoint if something else is involved.
• Note you can disable troubleshooting mode from the plugins page.

This will confirm and highlight any plugin causing an issue. Please let me know if you have any further questions.

Have deactivated all plugins except web stories, and have switched to fresh twentytwentyone theme on dev server and are still getting the JS errors.

Looking at the source generated by the web story, it seems unlikely the theme or any plugin would be causing this since none of our site CSS/JS/etc. is being included or referenced in the HTML, even with everything activated. Everything appears to be coming from ampproject and stories.google.

Both our live and production sites are hosted by AWS, and obviously there are a ton of configuration variables involved there. Could it be something at the server level that is mixing origins, possibly in the headers?

@trek7k thanks for trying the above steps. This does look like something is being blocked at the hosting level as you have suggested.

Unfortunately as this is the case then there isn’t anything we can do to help you with this and would advise reaching out to your hosting provider who should be able to assist your further.

If you do have any other questions about Web Stories or any further issues then please do let us know and we can assist you with those.

Bummer, thanks anyway. Like I said, we checked to make sure that the headers are configured correctly (Access-Control-Allow-Origin etc.) so if you can think of any reason that the canvas could become tainted with cross-origin data, please let me know. It does seem like this is something specific to our server setup since others have not noted this issue with the web stories plugin.

Will be investigating and sharing anything we find on our end in case others have a similar issue.

Tried publishing one of the story templates as is, and the errors disappear. It seems it is the images in our story that are supposedly cross origin tainting the canvas. The images are hosted on a subdomain (images.example.com) so not on the same server as the page, however the template stories also use images stored on another server (wp.stories.google) and do not throw the error.

It *could* be an issue with the headers returned by S3 so that’s the next area to investigate. A lot of sites use Amazon S3 for image hosting so I’m surprised others have not run into this yet…

Upon further testing, the cross origin taint error eventually pops up on the final panel even on the templates that use only stock images hosted by google.

To confirm our web and image server are not causing the issue, we tested stripping out all references to any images stored on our own servers, including the logo files etc. Even opening the file locally, the final panel generates the error. ??

This is the HTML that was tested locally, and that continues to produce the error.

https://pastebin.com/bsLTLjJt

Thanks for investigating this!

This sounds like a bug in the Web Stories AMP format itself, and I recommend filing a bug accordingly at https://github.com/ampproject/amphtml

As the name of that script implies, Web Stories have blurry backgrounds. getImageData is used for this feature.

As far as I can tell, this error should have no effect on your analytics or anything.

Will do, thanks.