tezoatlipoca / GeFeSLE-server

GeFeSLE - Generic, Federated, Subscribable List Engine
1 stars 0 forks source link

Quotes, line breaks in Mastodon Status > Media and Status card descriptions/alt text break List page CSS flow #86

Open tezoatlipoca opened 4 months ago

tezoatlipoca commented 4 months ago

Example:

<div class="namecell">https://mstdn.ca/@ned/112363899252973559<img src="[https://lists.awadwatt.com/gefesleff.png](view-source:https://lists.awadwatt.com/gefesleff.png)" width="15px" height="15px" onclick="copyToClipboard(253);"></div>
<div class="itemrow" id="253">
<div class="commentcell"><div class="oposter">
<img src="[https://media.mas.to/cache/accounts/avatars/109/321/701/731/047/390/original/f3f0e69d452b5eac.jpg](view-source:https://media.mas.to/cache/accounts/avatars/109/321/701/731/047/390/original/f3f0e69d452b5eac.jpg)" alt="Ned Yeung" class="opavatar">
<a href="[https://mstdn.ca/@ned](view-source:https://mstdn.ca/@ned)">Ned Yeung(ned@mstdn.ca)</a></div>
<span class="status_Content"><p>*If the minimum working wage is $2400 a month then why isn't that the minimum Canada Pension Plan?</p><p>I saw this getting shared around and had to fix it. The line, "If a high school kid flipping burgers deserves $15/hr" was incredibly infuriating and unnecessary. Why do people insist on ruining a perfectly good point by injecting pointless hatred towards others?</p><p><a href="[https://mstdn.ca/tags/ubi](view-source:https://mstdn.ca/tags/ubi)" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ubi</span></a> <a href="[https://mstdn.ca/tags/cpp](view-source:https://mstdn.ca/tags/cpp)" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cpp</span></a> <a href="[https://mstdn.ca/tags/abpoli](view-source:https://mstdn.ca/tags/abpoli)" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>abpoli</span></a> <a href="[https://mstdn.ca/tags/cdnpoli](view-source:https://mstdn.ca/tags/cdnpoli)" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cdnpoli</span></a></p></span>
<span class="media_attachment"><img src="[https://mas.to/media_proxy/112363899536710357/original](view-source:https://mas.to/media_proxy/112363899536710357/original)" alt="Original meme says: If a high school kid flipping burgers deserves $15/hr ($2400 a month) then why isn't that the minimum Canada Pension Plan?
<p>&quot;high school kid flipping burgers deserves&quot; is crossed out and replaced with &quot;minimum working wage is&quot;.&quot;&gt;</span></p>
<div class="importattribution">Imported from Mastodon (https://mas.to) on 5/16/2024 8:59:27 PM by tezoatlipoca@mas.to to list Tree's Bookmarks</div>
</div>
<div class="tagscell">
<span class="tag">cdnpoli</span>
<span class="tag">abpoli</span>
<span class="tag">cpp</span>
<span class="tag">ubi</span>
</div>
<div class="utilitybox">
<span class="itemmoddate">2024-05-01 04:17:16</span>
<span class="moveitemlink" style="display: none;"><a href="[#](view-source:https://lists.awadwatt.com/Tree's%20Bookmarks.html#)" oncontextmenu="showContextMenu(event)">Move</a></span>
<span class="itemeditlink" style="display: none;"><a href="[_edit.item.html?listid=16&itemid=253](view-source:https://lists.awadwatt.com/_edit.item.html?listid=16&itemid=253)" >Edit</a></span>
<span class="itemdeletelink" style="display: none;"><a href="[#](view-source:https://lists.awadwatt.com/Tree's%20Bookmarks.html#)" onclick="deleteItem(16,253); return;" >Delete</a></span>
<span class="itemreportlink"><a href="[#](view-source:https://lists.awadwatt.com/Tree's%20Bookmarks.html#)" onclick="reportItem(16,253); return;" >Report</a></span>
</div>
</div>
tezoatlipoca commented 4 months ago

The tag is being clobbered.

tezoatlipoca commented 4 months ago

Here's whats in the db for that entry (in markdown, copied from Edit Item page):

<div class="oposter">
<img src="https://media.mas.to/cache/accounts/avatars/109/321/701/731/047/390/original/f3f0e69d452b5eac.jpg" alt="Ned Yeung" class="opavatar">
<a href="https://mstdn.ca/@ned">Ned Yeung(ned@mstdn.ca)</a></div>
<span class="status_Content"><p>*If the minimum working wage is $2400 a month then why isn't that the minimum Canada Pension Plan?</p><p>I saw this getting shared around and had to fix it. The line, "If a high school kid flipping burgers deserves $15/hr" was incredibly infuriating and unnecessary. Why do people insist on ruining a perfectly good point by injecting pointless hatred towards others?</p><p><a href="https://mstdn.ca/tags/ubi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ubi</span></a> <a href="https://mstdn.ca/tags/cpp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cpp</span></a> <a href="https://mstdn.ca/tags/abpoli" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>abpoli</span></a> <a href="https://mstdn.ca/tags/cdnpoli" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cdnpoli</span></a></p></span>
<span class="media_attachment"><img src="https://mas.to/media_proxy/112363899536710357/original" alt="Original meme says: If a high school kid flipping burgers deserves $15/hr ($2400 a month) then why isn't that the minimum Canada Pension Plan?

"high school kid flipping burgers deserves" is crossed out and replaced with "minimum working wage is"."></span>
<div class="importattribution">Imported from Mastodon (https://mas.to) on 5/16/2024 8:59:27 PM by tezoatlipoca@mas.to to list Tree's Bookmarks</div>
tezoatlipoca commented 4 months ago

And here's the written wrapper when the HTML is generated:

<span class=\"media_attachment\"><img src=\"{media.Url}\" alt=\"{media.Description}\"></span>

Think: quotes and multilines in the media.Description field are borking the tag.

tezoatlipoca commented 4 months ago

Yup, its media descriptions with " characters in them. The reason we don't run into this with the main status body (err .Comment) field is we throw that through a markdown to HTML converter. But we don't sanitize the media or status card descriptions.

Here's another (that breaks the page):

<span class="media_attachment"><img src="default%20site%20title%20Tree's%20Bookmarks_files/3aa51526604a5e47.png" alt="Venn diagram of three circles reading FAST, CHEAP, and GOOD, with " lol="" nope"="" in="" the="" center"=""></span>
tezoatlipoca commented 4 months ago

Another one:

<div class="namecell"><a href="https://front-end.social/@sarajw/112440239248795972">https://front-end.social/@sarajw/112440239248795972</a></div>
<div class="itemrow" id="144">
<div class="commentcell overflow"><div class="oposter">
<img src="default%20site%20title%20Tree's%20Bookmarks_files/c929e49f1ccb2865.jpg" alt="Sara Joy :happy_pepper:" class="opavatar">
<a href="https://front-end.social/@sarajw">Sara Joy :happy_pepper:(sarajw@front-end.social)</a></div>
<span class="status_Content"><p>David Dylan Thomas started his closing talk strong with such a good quote.</p><p>It's still going strong.</p><p>Like his talks title says:<br>"No, seriously, fuck engagement: Building a more human web"</p><p><a href="https://front-end.social/tags/BTConf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BTConf</span></a></p></span>
<span class="media_attachment"><img src="default%20site%20title%20Tree's%20Bookmarks_files/5e28a756cfe17000.jpeg" alt="David in front of his slide with the following quote:
&lt;p&gt;We must rapidly shift from 'thing-oriented' society to a 'person-oriented' society. When machines and computers, profit motives and property rights are considered more important than people, the giant triplets of racism, materialism, and militarism are incapable of being conquered.&lt;/p&gt;
&lt;p&gt;by Dr. Martin Luther King, Jr.&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div class=" importattribution"="">Imported from Mastodon (https://mas.to) on 5/16/2024 8:59:24 PM by tezoatlipoca@mas.to to list Tree's Bookmarks</span></div>
</div>
<div class="tagscell">
<span class="tag">btconf</span>
</div>
<div class="utilitybox">
<span class="itemmoddate">2024-05-14 15:51:32</span>
<span class="moveitemlink" style=""><a href="#" oncontextmenu="showContextMenu(event)">Move</a></span>
<span class="itemeditlink" style=""><a href="https://lists.awadwatt.com/_edit.item.html?listid=16&amp;itemid=144">Edit</a></span>
<span class="itemdeletelink" style=""><a href="#" onclick="deleteItem(16,144); return;">Delete</a></span>
<span class="itemreportlink"><a href="#" onclick="reportItem(16,144); return;">Report</a></span>
</div>
</div>