HTML attribute quotes are switched from '->" on published posts

[bzoel]

Issue Summary

Running Ghost 2.23.4/2.5.0 on Ubuntu - the exact HTML I enter into the editor is modified on the frontend page.

To Reproduce

I entered the following HTML block into the editor - note the single quotes.

<span class="text-success" data-toggle="typed" data-options='{"strings": ["item1", "item2"]}'></span>.

On the front end, single quotes are reflected as double quotes

<!--kg-card-begin: html--><span class="text-success" data-toggle="typed" data-options="{"strings": ["item1", "item2"]}"></span>.<!--kg-card-end: html-->

Technical details:

• Ghost Version: 2.25.0
• Node Version: 10.16.0
• Browser/OS: Chrome/Firefox on Windows
• Database: MySQL & SQLite (dev)

[kevinansfield]

@billyzoellers how are you inspecting the code output? I've just checked this and I can't reproduce. In Chrome's web inspector it appears as though there are double quotes because its inspector automatically changes them as it always uses double quotes for attribute values:

However, looking at the raw data in the response from Ghost the single quotes are preserved:

[bzoel]

@kevinansfield I as looking in view source in Chrome. I see the same issue in view source in Firefox as well.

'data-options' is being parsed by a js script that is throwing an error due to the quotes, so I believe the 'bad' HTML is making it to that js script somehow.

I have confirmed that if I hardcode the HTML onto the .hbs template, things work as expected - and when hardcoded, view source shows the single quotes as expected.

[kevinansfield]

Hmm, this is very strange. I can only see the '->" switch happening when a published post served. After putting the post back to draft without changing the contents, no switch is apparent.

It appears this is not related to the editor at all, the data saved in the HTML card inside mobiledoc is always correct, as is the rendered html field. There is something in the handlebars rendering layer that is causing the problem 🤔

[kevinansfield]

There is something in the handlebars rendering layer that is causing the problem 🤔

Scratch that, it's in the API layer rather than the handlebars layer. When performing API requests to the v2 Admin/Content APIs for the post in question the quotes are returned incorrectly in the html field...

➜ curl 'http://ghost.blog/ghost/api/v2/content/posts/5d08fc7b26720fe7f85df7d0/?formats=html&key=95bb077bf727261b118b0c72e8' | jq 
######################################################################## 100.0%
{
  "posts": [
    {
      ...
      "html": "<!--kg-card-begin: html--><span class=\"text-success\" data-toggle=\"typed\" data-options=\"{\"strings\": [\"item1\", \"item2\"]}\"></span><!--kg-card-end: html--><p>Testing</p>",
      ...

The key point being data-options=\"{.

The data in the database is correct:

<!--kg-card-begin: html--><span class="text-success" data-toggle="typed" data-options='{"strings": ["item1", "item2"]}'></span><!--kg-card-end: html--><p>Testing</p>

The v0.1 Public API does not mangle quotes.

[bzoel]

@kevinansfield Interesting! I can confirm that draft mode works for me as well.

[kevinansfield]

Adding some extra context, the mangling is much worse if you try to escape the quotes with backslashes...

html card content:

<span class="text-success" data-toggle="typed" data-options="{\"strings\": [\"item1\", \"item2\"]}"></span>.

becomes:

<!--kg-card-begin: html--><span class="text-success" data-toggle="typed" data-options="{\" strings\":="" [\"item1\",="" \"item2\"]}"=""></span>.<!--kg-card-end: html-->

---

@billyzoellers the core team is unlikely to get to this until at least next Monday but maybe a contributor will get there first 😄 In the meantime you can workaround the issue by using html-escape codes if that's possible (html escaped chars appear as the actual char to JS when reading attributes):

<span class="text-success" data-toggle="typed" data-options="{&quot;strings&quot;: [&quot;item1&quot;, &quot;item2&quot;]}"></span>.

[kevinansfield]

This issue is now being tracked in our SDK package repo TryGhost/SDK#124

[kevinansfield]

This issue was resolved via #11027