Kahla 2.3.0 is rolling out! In this release, I encountered two major obstacles: the first one is how to treat the user input as plain text but make sure URL links are clickable simultaneously; the second is setting images size before they are loaded.
Formerly I put users’ message in
innerHTML directly, like this:
So if there are any URLs in the message, Autolinker can replace them with anchor elements and render as HTML elements instead of plain text. Although Angular can sanitize these codes automatically1, it still contains flaws and will not work as expects if the user just wants to share some codes.
Thanks to Ganlv, I realize this vulnerability: send a message which contains an anchor element but doesn’t add
noopener, Angular can’t sanitize this. The new tab can then get Kahla page’s
But if I don’t use
innerHTML then the links will not work, thanks to Anduin Xue, he suggested HTML entities. HTML entities can be used to replace HTML reserved characters, they are displayed the same in browsers but won’t be parsed as HTML codes3. There are tons of characters need to be replaced4, obversely I must use a library(he).
Before images are loaded, the message container’s height is zero. I need to set their height before images are loaded, so the page can scroll to bottom. In order to make images “responsible”, we need to set the height and width as
100%. And that value is calculable, we can substruct message’s parents’ padding and border from
window.innerWidth. Then add image’s height divided by image’s width as
padding-bottom to image container5:
The unit is percentage(%).
Code indentation and newline
Sequences of white space are preserved. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes.