https://github.com/Macil/auto-html

ES6 Template string function for encoding text to HTML
https://github.com/Macil/auto-html

Last synced: 4 months ago
JSON representation

ES6 Template string function for encoding text to HTML

• Host: GitHub
• URL: https://github.com/Macil/auto-html
• Owner: Macil
• License: mit
• Created: 2015-04-30T05:04:57.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-05-31T01:44:46.000Z (over 4 years ago)
• Last Synced: 2024-04-24T00:44:05.710Z (8 months ago)
• Language: JavaScript
• Size: 268 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# autoHtml

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Macil/auto-html/blob/master/LICENSE.txt) [![npm version](https://img.shields.io/npm/v/auto-html.svg?style=flat)](https://www.npmjs.com/package/auto-html) [![CircleCI Status](https://circleci.com/gh/Macil/auto-html.svg?style=shield)](https://circleci.com/gh/Macil/auto-html) [![Greenkeeper badge](https://badges.greenkeeper.io/Macil/auto-html.svg)](https://greenkeeper.io/)

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!

```javascript

import autoHtml from "auto-html";

const username = "Bob the XSS guy alert(1)";

const userFormHtml = autoHtml `
Username: ${username}
`;

console.log(userFormHtml);

// "
Username: Bob the XSS guy <script>alert(1)</script>
"

```


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](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).

```javascript

const username = "Bob the XSS guy alert(1)";

const comment = "Some **markdown** text";

const commentHtml = markdownToHtml(comment); // markdownToHtml not included.

const postHtml = autoHtml `


  
Username: ${username}

  
${{__html: commentHtml}}

`;

console.log(postHtml);

// 


//   
Username: Bob the XSS guy <script>alert(1)</script>

//   
Some markdown text

// 

```


## Miscellaneous

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](https://babeljs.io/).

This module can be used in browsers via a CommonJS bundler such as

[Browserify](http://browserify.org/) or [Webpack](https://webpack.js.org/).

The HTML encoding is done by

[Lodash's escape function](https://lodash.com/docs#escape). 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](http://www.html5rocks.com/en/tutorials/security/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.

## Types

Both [TypeScript](https://www.typescriptlang.org/) and

[Flow](https://flowtype.org/) type definitions for this module are included!

The type definitions won't require any configuration to use.