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.

HTML entities

Formerly I put users’ message in innerHTML directly, like this:

<p [innerHTML]="message.content"></p>

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 window object2!

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).

Image loading

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:

padding-bottom = image.naturalHeight / image.naturalWidth * 100;

The unit is percentage(%).

Code indentation and newline

white-space: pre-wrap;

pre-wrap

Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

MDN6

References