This is a module containing a function to automatically encode Javascript ES6 template strings into HTML safely. This lets you assemble HTML strings yourself but still with automatic safety from XSS attacks!
import { autoHtml } from "auto-html";
const username = "Bob the XSS guy <script>alert(1)</script>";
const userFormHtml = autoHtml`<div>Username: ${username}</div>`;
console.log(userFormHtml);
// "<div>Username: Bob the XSS guy <script>alert(1)</script></div>"
If you really want to substitute in HTML, then use an object with an __html
property. Be careful that the html is properly encoded! This syntax is inspired
by
React.
const username = "Bob the XSS guy <script>alert(1)</script>";
const comment = "Some **markdown** text";
const commentHtml = markdownToHtml(comment); // markdownToHtml not included.
const postHtml = autoHtml`<div class="post">
<div>Username: ${username}</div>
<div>${{ __html: commentHtml }}</div>
</div>`;
console.log(postHtml);
// <div class="post">
// <div>Username: Bob the XSS guy <script>alert(1)</script></div>
// <div>Some <strong>markdown</strong> text</div>
// </div>
This library only uses Lodash's escape
function on values in the template string. It
does not protect against dangerous values being inserted into HTML element
attributes (like in <a href="${link}">
where link could be
javascript:alert(1)
), and it does not protect against attacks from values
being inserted into unquoted HTML attributes (like <a title=${link}>
, where
link could be foo href="javascript:alert(1)"
).
This module is built for use with template strings, a feature of ES6, the next version of Javascript. If you are targeting platforms that don't support template strings natively yet, you may want to use an ES6 compiler like Babel.
This module can be used in browsers via a CommonJS bundler such as Browserify or Webpack.
The HTML encoding is done by Lodash's escape function. Text encoded into HTML by this function is safe to be placed in HTML element attributes and as an element's children.
Use of Content Security Policy headers is highly recommended to prevent XSS attacks! You'll still want to bother to encode your HTML correctly, but CSP headers stop that from being a remote-code-execution security issue at least.
TypeScript type definitions for this module are included! The type definitions won't require any configuration to use.