Submitting an “AMP Form” using “action-xhr” causes a “Mixed Content” error when called from the Google AMP Cache but works fine outside it

[prerakjoshi]

What's the issue?

I have set up a "Star Rating" system on my AMP page and it works great from my site's version of the AMP page however, when I submit it from the AMP Cache version of the form I get a Mixed Content error even though I'm sure HTTPS is specified in the action-xhr attribute of the form.

How do we reproduce the issue?

Visit https://healthand.com/us/topic/general-report/aeroplane-travel-amp.

Scroll to the end of the page till you see the star ratings. Select a star rating and it works.

Now visit https://www.google.com/amp/s/healthand.com/us/topic/general-report/aeroplane-travel-amp

This is the AMP Cached version of the first link.

Scroll to the end of the page till you see the star ratings. Select a rating and it throws a "Mixed Content" error.

When I check the source of the https://www.google.com/amp/s/healthand.com/us/topic/general-report/aeroplane-travel-amp version it clearly has HTTPS next to the action-xhr attribute.

What browsers are affected?

It's the same in all browsers I've tested it on. I've been testing it mostly on Chrome using the mobile device "emulator". You need to use the emulator or the AMP Cache link will redirect you to the canonical version of the page https://healthand.com/us/topic/general-report/aeroplane-travel

I've also been testing it on iOS with both Chrome and Safari with the same result.

Which AMP version is affected?

This is the version of amp-form I am referencing in the header.

This is the AMP version

I also reference a number of other amp elements in the header. You can check them out when you load the page rather than list them all here.

I have also asked about this on stack overflow. https://stackoverflow.com/questions/56626099/submitting-an-amp-form-using-action-xhr-causes-a-mixed-content-error-when

[torch2424]

Triaging to @cvializ , feel free to re-assign 😄

[aghassemi]

Hi @prerakjoshi amp-access-control-allow-source-origin field of the response from your endpoint is incorrect. It is currently returning https://healthand-com.cdn.ampproject.org, it needs to return https://healthand.com​​​

Please see https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests#restrict-requests-to-source-origins for more info.

[prerakjoshi]

Hi @aghassemi

Thanks for the quick response. I've got all the headers in order now but still no glory. Any chance you could take another quick glance at it?

https://www.google.com/amp/s/healthand.com/us/topic/general-report/low-lying-placenta-amp

[cvializ]

I took a loot, but I didn't get a mixed content error when using the star rating widget. It looks like it's working. Are you able to see that now too?

[prerakjoshi]

Thanks @aghassemi

Great to see it works somewhere!! I can't get it to work on any browser or my phone (iOS) on the WiFi or 4G.

Did some more testing on firefox this morning and got a more complete set of headers / error messages than I get from chrome.

Does that shed any additional light on the problem? Particularly the "Cross-Origin Request Blocked" on the console. I've tried changing the x-frame-options on Apache. I thought maybe one of the Apache settings could be overriding one or more of the Headers I am setting from add-new-rating.

It still works fine for me on the non-cached amp version. https://healthand.com/us/topic/general-report/low-lying-placenta-amp