Skip to content

amp-script: innerHTML renders ampersand-escaped sequences as they are #27153

Closed
@derolf

Description

What's the issue?

Setting innerHTML of an element renders ampersand-escaped sequences as they are, i.e. &lt; is not rendered as <, but as &lt;.

How do we reproduce the issue?

The following minimal example use an amp-script to just set innerHTML = "&lt;&amp;" for a test element. The browser should render <&, but it renders &lt;&amp;.

<!doctype html>
<html data-ampdevmode >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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>
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
 </head>
<body data-ampdevmode>
  <amp-script layout="fixed-height" height="800px" script="hello-world">
    <span id="a"></span>
  </amp-script> 
  <script id="hello-world" type="text/plain" target="amp-script">
      document.getElementById("a").innerHTML = "&lt;&amp;"
   </script>
</body>
</html>

What browsers are affected?

Tested with Chrome, MacOS Safari, iOS Safari.

Which AMP version is affected?

2002251816300

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions