Amphtml: amp-form: omit credentials
What's the issue?
When requesting a page that has 'Access-Control-Allow-Origin' as *, this fails in AMP, since there's no way to disable the credentials
Failed to load https://ofcncog2cu-2.algolia.net/1/indexes/*/queries?__amp_source_origin=https%3A%2F%2Fampbyexample.com: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'https://ampbyexample.com' is therefore not allowed access.
How do we reproduce the issue?
<!doctype html>
<html âš¡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
h1 {
margin: 16px;
}
</style>
</head>
<body>
<h1>Algolia AMP</h1>
<form action-xhr="https://ofcncog2cu-dsn.algolia.net/1/indexes/*/queries" method="post" target="_top" id="myform" credentials="omit">
<input type="reset" value="reset">
<input name="q" placeholder="Search something" required type="search" on="change:myform.submit">
<input type="submit" value="search">
<input type="hidden" name="x-algolia-agent" value="Algolia for vanilla AMP 0.0.0">
<input type="hidden" name="x-algolia-application-id" value="OFCNCOG2CU">
<input type="hidden" name="x-algolia-api-key" value="f54e21fa3a2a0160595bb058179bfb1e">
<div submit-success>
<template type="amp-mustache">
{{results[Ø].nbHits}} success
</template>
</div>
<div submit-error>
<template type="amp-mustache">
{{results[Ø].nbHits}} error
</template>
</div>
</form>
</body>
</html>
What browsers are affected?
all
Which AMP version is affected?
1499807487098
Haroenv
All 6 comments
amp-form currently enforces credentials for xhr. I don't believe there is any plan to allow this to become configurable ( @rudygalfi ?).
Looks like you want to implement search functionality based on your sample. Using amp-list (which does not enforce credentials) might be a better solution than amp-form to fetch search results. Please see https://ampbyexample.com/samples_templates/product_browse_page/ for a sample.
aghassemi
on 19 Jul 2017
Okay, but there's no way I can have a dynamic results url with amp-list, right? And list only works with "items", while I have "hits" -- which can't be changed
Haroenv
on 20 Jul 2017
@Haroenv the src of amp-list can be changed with amp-bind which would result in another fetch and render of data.
The endpoints for pretty much every XHR in AMP (form, amp-list, etc..) need to adhere to AMP CORS Requirements which means you need to make changes to server-side part anyway. If it is an external service that you can't change, you would need to proxy it and add the additional headers that AMP CORS requires, so maybe at the same time you can adapt your JSON to have items instead of hits.
aghassemi
on 20 Jul 2017
Thanks @aghassemi, that means that there’s no way, even not when forking and changing amp-list to use another xhr method, since that wouldn’t be approved, right?
Apart from that, I think we’re pretty close being able to have Algolia work in AMP
Haroenv
on 21 Jul 2017
This issue just came up when attempting to convert the WordPress Jetpack plugin's MailChimp module to be AMP compatible.
On the original non-AMP page, the form submission results in this fetchSubscription() function being called:
So an XHR is opened to https://public-api.wordpress.com/rest/v1.1/sites/… and WordPress.com REST API includes the response:
Access-Control-Allow-Origin: *
When porting over to amp-form with an action-xhr pointing to that same URL, the result is that same error:
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
If amp-form recognized an attribute to prevent sending credentials then this wouldn't be a problem.
westonruter
on 13 Jun 2019
A test was done to ensure that Access-Control-Allow-Origin returned the value of __amp_source_origin, but then another problem ensued:
...has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
So then what was needed was to _also_ send:
Access-Control-Allow-Credentials: true
Then of course the error occurred:
Response must contain the AMP-Access-Control-Allow-Source-Origin header
So two more response headers were needed:
AMP-Access-Control-Allow-Source-Origin: https://example.com
Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin
Related issues
aghassemi
·
3Comments
sryze
·
3Comments
aghassemi
·
3Comments
westonruter
·
3Comments
edhollinghurst
·
3Comments
Most helpful comment
This issue just came up when attempting to convert the WordPress Jetpack plugin's MailChimp module to be AMP compatible.
On the original non-AMP page, the form submission results in this
fetchSubscription()function being called:https://github.com/Automattic/jetpack/blob/8782a170fedf2c4ebc3943ecdb9b685d7af2c19d/extensions/blocks/mailchimp/view.js#L13-L33
So an XHR is opened to
https://public-api.wordpress.com/rest/v1.1/sites/…and WordPress.com REST API includes the response:When porting over to
amp-formwith anaction-xhrpointing to that same URL, the result is that same error:If
amp-formrecognized an attribute to prevent sendingcredentialsthen this wouldn't be a problem.