Line breaks in templated HTML scriptlets - google-apps-script

Question

If I have an HTML file test.html:
<p><?= str ?></p>
And a script function:
var t = HtmlService.createTemplateFromFile("test.html");
t.str = "test\nstring";
var content = t.evaluate().setSandboxMode(...).getContent();
Logger.log(content);
Is there any way to safely replace the newline with an HTML line break? I can use String.prototype.replace() to replace \n with <br/>, but then I'd have to use <?!= to disable the HTML templating engine's contextual escaping. I'm dealing with untrusted input and so I need both escaping and smart handling of line breaks. Having it contextually would be nice. As things stand, I wrote my own escaper, but it is only good for one context.

Answer 1

I see two options for your scenario, the simple one is to forget the substitution entirely and use a <pre> tag, which will render your line breaks (and other formatting chars)
<pre> <?= str ?> </pre>
The second is to perform the substitution and sanitize your input with a custom function, so that you can safely use the force print scriptlet.
In your html:
<?!= sanitize(str); ?>
and in your .gs:
function sanitize(val){
var vals = val.split('\n'); //split string into an array on newlines
for(var i in vals){
vals[i] = Encoder.htmlEncode(vals[i]); //sanitize each element in the array
}
return vals.join('<br />'); //join the elements as a string, with <br /> as glue.
}
Note, in my example I'm using the library located here to sanitize the strings: http://www.strictly-software.com/scripts/downloads/encoder.js

Answer 2

If anyone's curious, this is the code I wound up using to sanitize the untrusted input for display. It's not safe for use inside tags, in script sections, etc. That's why Google's context aware sanitization is so handy.
function dumbEscapeAndBreak(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>');
}
function _testEscape() {
GSUnit.assertEquals('my<test<string>is>not&good&okay<br/>fine<br/>okay', dumbEscapeAndBreak("my<test<string>is>not&good&okay\nfine\nokay"));
}

Answer 3

Or you can do this:
In your .gs script function:
var t = HtmlService.createTemplateFromFile("test.html");
var paragraphs = "test\nstring";
t.str = paragraphs.split("\n");
In your test.html:
<?
for (i = 0; i < str.length; i++) {
?>
<span><?= str[i]?></span><br />
<!-- <p><?= str[i]?></p> -->
<?
}
?>
You can use the <span> or <p> tag, that is up to you. You can also write some simple logic to decide when to put the <br />, e.g. before <span> when i > 0. That will completely fulfil your "test\nstring".