Amp for Email – carousel not showing up – htaccess solution

  • report
    Disclaimer
    Click for Disclaimer
    This Post is over a year old (first published about 4 years ago). As such, please keep in mind that some of the information may no longer be accurate, best practice, or a reflection of how I would approach the same thing today.
  • infoFull Post Details
    info_outlineClick for Full Post Details
    Date Posted:
    May. 03, 2019
    Last Updated:
    May. 03, 2019
  • classTags
    classClick for Tags
    Tags:

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:

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!

Amp For Email - Amp-Access-Control-Allow-Source-Origin-Error

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"

Leave a Reply

Your email address will not be published.