Set the HTML of an element while protecting yourself from XSS attacks.
Switch branches/tags
Nothing to show
Clone or download
Latest commit ae8ff6c Aug 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Updated docs Aug 23, 2018
dist Optimized injection Aug 27, 2018
src Optimized injection Aug 27, 2018
.gitignore Initial release Aug 23, 2018
.travis.yml Initial release Aug 23, 2018
LICENSE.md Initial release Aug 23, 2018
README.md Updated readme Aug 24, 2018
gulpfile.js Initial release Aug 23, 2018
package.json Optimized injection Aug 27, 2018

README.md

saferInnerHTML Build Status

Set the HTML of an element with the simplicity of innerHTML, while protecting yourself from XSS attacks.


Want to learn how to write your own vanilla JS plugins? Check out my Vanilla JS Pocket Guides or join the Vanilla JS Academy and level-up as a web developer. 🚀


Getting Started

Compiled and production-ready code can be found in the dist directory. The src directory contains development code.

1. Include saferInnerHTML on your site.

There are two versions of saferInnerHTML: the standalone version, and one that comes preloaded with a polyfill for Array.from(), which is only supported in newer browsers.

If you're including your own polyfills or don't want to support older browsers (you monster!), use the standalone version. Otherwise, use the version with polyfills.

Direct Download

You can download the files directly from GitHub.

<script src="path/to/saferInnerHTML.polyfills.min.js"></script>

CDN

You can also use the jsDelivr CDN. I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Reef uses semantic versioning.

<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/saferInnerHTML/dist/saferInnerHTML.polyfills.min.js"></script>

<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/saferInnerHTML@1/dist/saferInnerHTML.polyfills.min.js"></script>

<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/saferInnerHTML@1.0/dist/saferInnerHTML.polyfills.min.js"></script>

<!-- Get a specific version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/saferInnerHTML@1.0.0/dist/saferInnerHTML.polyfills.min.js"></script>

2. Inject any string into any element

The saferInnerHTML() method accepts three arguments.

/**
 * @param {Node}    elem      The element to inject markup into
 * @param {String}  template  The string to inject into the element
 * @param {Boolean} append    [optional] If true, append string to existing content instead of replacing it
 */
saferInnerHTML(elem, template, append);

Here's an example. Play with the demo.

<div id="app"></div>
var app = document.querySelector('#app');
var template = '<p>Hello, world!</p><button>Click me</button>';
saferInnerHTML(app, template);

And here's another, this time appending the new string to the existing content. There's a demo for that one, too.

<div id="app">
    <p>Hi, universe!</p>
</div>
var app = document.querySelector('#app');
var template = '<button>Do NOT click me</button>';
saferInnerHTML(app, template, true);

3. That's it!

You're done. Nice work. Go make something awesome!

Browser Compatibility

Reef works in all modern browsers, and IE 10 and above.

Polyfills

Support back to IE10 requires a polyfill for Array.from(). Without it, support starts with Edge.

Use the included polyfill version of saferInnerHTML, or include your own.

License

The code is available under the MIT License.