I recently ran into the issue of an <amp-list> carousel not working inside an AMP email template. More specifically, it was not showing up in the “Gmail AMP for Email Playground” tool – where the slide carousel should have appeared, there was just empty blank space. Opening up the browser dev tools, it was pretty easy to spot that this had to with security issues – the JSON src of the list was fetched just fine (200 status), but the Playground was refusing to parse and show it due to a bunch of missing CORs header.
A quick search got me what I was was looking for – the AMP for Email specification does indeed require special security related headers for remote JSON sources that are fetched for <amp-list> elements:
- Here are the recommended headers for use with the AMP Email Playground
- Here is a more complete list of security headers that your server should send back in response to AMP resource requests.
I quickly uploaded the JSON source for my list to a special subfolder on my server, and added an HTACCESS file for that directory so I could play around with adding the correct headers. I followed the recommendations given by Google from the first link, and updated the email template with the new source. However, even though I could see that my JSON fetch now returned the right headers, such as “amp-access-control-allow-source-origin”, I was still getting a very specific error: “The amp-access-control-allow-source-origin must be equal to the amp source origin sent in the request.”
This made even less sense when looking closely at the network request – my response header exactly matched the _amp_source_origin request parameter!
It took me longer than I would like to admit, but after staring at the documentation again, this time at the readme for the full list of CORs headers for AMP, not just for email, I finally realized I was missing one additional header: “access-control-expose-headers”. This is important, because in order for the browser / AMP playground to be able to read back the non-standard AMP-Access-Control-Allow-Source-Origin, it needs to be explicitly exposed through that header. I added it to my HTACCESS file, and lo-and-behold, the carousel showed up and started working. Google should probably update the primary docs for the AMPHTML security page to make this more clear.
Here is my full working HTACCESS:
# CORs
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Source-Origin "AMP-Access-Control-Allow-Source-Origin"
# AMP specific
Header add AMP-Access-Control-Allow-Source-Origin "amp@gmail.dev"
# Don't forget this!
Header add access-control-expose-headers "AMP-Access-Control-Allow-Source-Origin"