Containerless control flow escaped by Go proxy

[cblaettl]

I have a Go reverse proxy running in front of a knockout.js application. The Go proxy uses the go/x/net/html package to parse, analyze and render html content passing though it. This leads to the following comment beeing escaped.

This control flow comment

<!-- ko if: !hasMessages() && displayTabbed() --><!-- /ko -->

is escaped to

<!-- ko if: !hasMessages() &amp;&amp; displayTabbed() -->

which breaks the application with the following error message:

Uncaught SyntaxError: Unable to parse bindings.
Bindings value: if: !hasMessages() && displayTabbed() 
Message: expected expression, got '&'

I can't imagine I'm the first person to encounter an issue like this. But I couln't find a similar issue using the search function.

Is there a solution within the knockout.js library to solve or work around this?

Note that go/x/net/html explicitly mentions they have to escape every & in a comment (also see: https://github.com/golang/go/issues/58246).

[webketje]

I can think of 3 solutions to this:

• Storing the 2 conditions in JS

  this.emptyTabbedDisplay = ko.computed(function() { return !this.hasMessages() && this.displayTabbed() }, this)

  then you can do: <!-- ko if: emptyTabbedDisplay -->

• Using Knockout components loaded after initial page load with eg requirejs or in a JS bundle (essentially bypassing the HTML Content-Type proxy filter by storing it as a string in JS)
• Keeping it on the initial HTML, but applying a preprocessing step to your page before Knockout is initialized, e.g.

  const app = document.getElementById('app')
  app.innerHTML = app.innerHTML.replace(/%KOAND%/g, '&&')
  ko.applyBindings(...)

  Then you could write it in your HTML like

  <!-- ko if: !hasMessages() %KOAND% displayTabbed() --><!-- /ko -->

[cblaettl]

Hi @webketje, thanks for your quick reply! Sadly, I'm not able to modify the code of the knockout.js app, since it's supplied by a third-party, so I guess I'm out of luck?

[webketje]

@cblaettl I guess your best bet would be to ask the third-party to implement solution 1 or 3. 1 is really just a small refactor. A 4th option would actually be to just replace the ko comment with a wrapper <div data-bind="condition">. So the answer to your original question:

Is there a solution within the knockout.js library to solve or work around this?

is definitely YES.

If that is not an option, your only option is to configure the Go proxy to skip any html transforms on this page path, or do some funky, brittle postprocessing where you replace the &s with &'s again (this is only an option if the page sent by the third party has a <meta charset='utf-8'> and the Go transform happens in the parsing & not in the reserialization phase)

[mbest]

This seems like a bug in go/x/net/html since HTML comments should not be escaped.