I'm building an AMP page with an amp-list
that is dynamically populated in an amp-sidebar
so that I can provide the users of our AMP template with an up-to-date version of the current navigation on our website.
Unfortunately, it seems like the URLs I am passing into an href
attribute in the mustache template is causing the anchor-tag to be stripped out completely.
Going back to the original ampbyexample.com-example with the following code, I'm getting the same result:
<amp-list width="auto"
height="100"
layout="fixed-height"
src="https://ampbyexample.com/json/examples.json"
class="m1">
<template type="amp-mustache"
id="amp-template-id">
<div>
<a href="{{url}}">{{title}}</a>
</div>
</template>
</amp-list>
(found here: https://ampbyexample.com/components/amp-list/)
For each element it only outputs: <div>{{title}}</div>
.
The url
attribute definitely is there as I can output as normal text without problems.
My header includes are as follows:
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
Am I missing something?
-Mxck
UPDATE 1: After a bit more digging it seems like the problem is related to the domain the request is coming from. Serving identical HTML from localhost:4502 or just localhost (port 80) makes it work for the latter, but not for the first.
What is the mechanism behind this?