Skip to main content

Injection attacks

templ is designed to prevent user-provided data from being used to inject vulnerabilities.

<script> and <style> tags could allow user data to inject vulnerabilities, so variables are not permitted in these sections.

templ Example() {
<script type="text/javascript">
function showAlert() {
alert("hello");
}
</script>
<style type="text/css">
/* Only CSS is allowed */
</style>
}

onClick attributes, and other on* attributes are used to execute JavaScript. To prevent user data from being unescaped, on* attributes accept a templ.ComponentScript.

script onClickHandler(msg string) {
alert(msg);
}

templ Example(msg string) {
<div onClick={ onClickHandler(msg) }>
{ "will be HTML encoded using templ.Escape" }
</div>
}

Style attributes cannot be expressions, only constants, to avoid escaping vulnerabilities. templ style templates (css className()) should be used instead.

templ Example() {
<div style={ "will throw an error" }></div>
}

Class names are sanitized by default. A failed class name is replaced by --templ-css-class-safe-name. The sanitization can be bypassed using the templ.SafeClass function, but the result is still subject to escaping.

templ Example() {
<div class={ "unsafe</style&gt;-will-sanitized", templ.SafeClass("&sanitization bypassed") }></div>
}

Rendered output:

<div class="--templ-css-class-safe-name &amp;sanitization bypassed"></div>
templ Example() {
<div>Node text is not modified at all.</div>
<div>{ "will be escaped using templ.EscapeString" }</div>
}

href attributes must be a templ.SafeURL and are sanitized to remove JavaScript URLs unless bypassed.

templ Example() {
<a href="http://constants.example.com/are/not/sanitized">Text</a>
<a href={ templ.URL("will be sanitized by templ.URL to remove potential attacks") }</a>
<a href={ templ.SafeURL("will not be sanitized by templ.URL") }</a>
}

Within css blocks, property names, and constant CSS property values are not sanitized or escaped.

css className() {
background-color: #ffffff;
}

CSS property values based on expressions are passed through templ.SanitizeCSS to replace potentially unsafe values with placeholders.

css className() {
color: { red };
}