URL getting stripped in amp-list mustache template

633 Views Asked by At

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?

0

There are 0 best solutions below