{"id":17269,"date":"2022-09-21T07:26:31","date_gmt":"2022-09-21T14:26:31","guid":{"rendered":"https:\/\/coderpad.io\/?p=17269"},"modified":"2023-06-05T14:05:11","modified_gmt":"2023-06-05T21:05:11","slug":"javascript-innerhtml","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/javascript-innerhtml\/","title":{"rendered":"How to Use innerHTML in JavaScript, Plus Alternate Methods"},"content":{"rendered":"\n

If you’re creating any dynamic web page these days, making sure you have relevant and up-to-date information is vital.<\/p>\n\n\n\n

Whether it’s showing stock quotes, the current time, the user’s name, or any other piece of info that changes with time or user, you’ll want to make sure you’re regularly updating this dynamic content to produce the best experience for your users.<\/p>\n\n\n\n

Luckily for you, we can associate these dynamic pieces of information with HTML elements and easily display their current state using the innerHTML <\/em>property.<\/p>\n\n\n\n

This blog post will walk you through the pros and cons of using the innerHTML<\/code> property and how you can use it safely without opening the doors to potential Cross-Site scripting (XSS) attacks<\/a>. <\/p>\n\n\n\n

What is innerHTML in JavaScript?<\/strong><\/h2>\n\n\n\n

innerHTML<\/code> is an HTML element property that has two uses for web developers:<\/p>\n\n\n\n

1) You can use it to get the internal HTML content of any HTML element as an HTML string. <\/p>\n\n\n\n

2) You can also use it to set or change elements’ innerHTML<\/code> content. <\/p>\n\n\n\n

Take the following HTML example: <\/p>\n\n\n

<div<\/span> id<\/span>=\u201dsomeDivElement\u201d<\/span>><\/span>\n\u00a0\u00a0<span<\/span>><\/span>Hello World<\/span<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To access the innerHTML you\u2019ll first need to access the element itself with getElementById()<\/code>: <\/p>\n\n\n\n
const someDivElement = document.getElementById(\u201csomeDivElement\u201d);<\/code><\/p>\n\n\n\n
Then we can access the innerHTML<\/code>: <\/p>\n\n\n\n
console.log(someDivElement.innerHTML);<\/code><\/p>\n\n\n\n
This will give us \"<\/strong><span>Hello World<\/span>\"<\/strong><\/code> <\/strong>as a string. And if you want to modify the innerHTML<\/code> property of the element, it can be achieved in the following way: <\/p>\n\n\n\n
someDivElement.innerHTML = \u201c<span>Something just like this\u2026<\/span>\u201d;<\/code><\/p>\n\n\n\n
Here’s an example that can be used by to-do apps where list items are appended to an existing list: <\/p>\n\n\n
const<\/span> todos = [\n  \"Exercise\"<\/span>,\n  \"Have milk\"<\/span>,\n  \"Buy bread\"<\/span>,\n  \"Walk the dog\"<\/span>,\n  \"Sleep timely :)\"<\/span>\n];\n\nconst<\/span> todoListPreview = document<\/span>.getElementById(\u201ctdlst-preview\u201d); \/* returns an <ol> *\/<\/span> element\n\ntodos.forEach((todo<\/span>) =><\/span> {\n  todoListPreview.innerHTML += `<li>${todo}<\/span><\/li>`<\/span>;\n});\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This will add all the to-do items as <li><\/code>tags in our ordered list element. These are the ways we can get and set the innerHTML<\/code> properties. <\/p>\n\n\n\n
However \u2013 as with any piece of code \u2013 there can be exceptions. A common one you may see with innerHTML<\/code> is theSyntaxError<\/code>, <\/strong>which is thrown when the provided HTML string is ill-formed. Here’s an example: <\/p>\n\n\n
someDivElement.innerHTML = \u201c<span<\/span>><\/span>William Bradley \"Brad\" Pitt<\/span<\/span>><\/span>\u201d<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The moment the browser parses this script, \"<\/strong>Brad\"<\/strong><\/code> is perceived as an unknown identifier because of the double quotes, and the SyntaxError<\/code> exception is thrown. <\/p>\n\n\n\n
When not to use innerHTML<\/strong><\/h2>\n\n\n\n
Using innerHTML<\/code> is fine if you’re using it to get the value of an element’s innerHTML<\/code> content. Things change, however, if it’s used to set values, as it accepts all <\/strong>HTML tags, including the script<\/code> tag. This means you could potentially open up a portal to your cookies and users’ personal information via a Cross Site Scripting (XSS) attack.<\/p>\n\n\n\n
An XSS attack is a type of web security vulnerability that allows an attacker to inject malicious code into a webpage. Then that code is executed by the web browser when an unsuspecting user visits the page. <\/p>\n\n\n\n
Take the example below that allows a bad script to send a user’s cookies to its server, which then can be used to impersonate the actual user and perform malicious actions: <\/p>\n\n\n
document.getElementById(\u201csomeLogoutButton\u201d).innerHTML = \u201c<script<\/span>><\/span>callHome(document<\/span>.cookie);<\/span><\/script<\/span>><\/span>\u201d;<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Let’s take the following example of the img<\/code> <\/strong>tag. It has an onerror<\/code> attribute that accepts JavaScript and is allowed to be run. <\/p>\n\n\n\n
<img src=123 onerror=alert(\u201cHaha!\u201d)><\/code><\/p>\n\n\n\n
Once browsers parse this tag, the value of src<\/code> is invalid as browsers expect a URL. Thus, an error will be thrown, and as the image tag has an onerror<\/code> listener, the script inside will be executed. <\/p>\n\n\n\n
How to use innerHTML without creating XSS vulnerabilities<\/strong><\/h3>\n\n\n\n
To prevent XSS issues, you always want to sanitize your user input, especially when it’s going to be rendered as-is. <\/p>\n\n\n\n
Say you’re building a WYSIWYG<\/a> editor in which you’re letting users save their HTML content in your database via innerHTML. Since you can’t trust your users’ input, you’ll need to implement some sanitization to prevent them from adding malicious code.<\/p>\n\n\n\n
There are a lot of open-source libraries<\/a> available that provide this sanitization service. One of my favorites is sanitize-HTML<\/a>, which provides HTML cleaning for browser and node environments.<\/p>\n\n\n\n
npm install sanitize-HTML<\/code><\/p>\n\n\n\n
The library is fairly easy to use. Here are a few examples: <\/p>\n\n\n
\/\/ the es module way<\/span>\nimport<\/span> sanitizeHtml from<\/span> 'sanitize-html'<\/span>;\n\/\/ the commonjs way<\/span>\nconst<\/span> sanitizeHtml = require<\/span>('sanitize-html'<\/span>);\n\nsanitizeHtml('<img src=x onerror=alert(1)\/\/>'<\/span>); \/\/ returns \"\"<\/span>\n\nsanitizeHtml('<svg><g\/onload=alert(2)\/\/<p>'<\/span>); \/\/ returns \"\"<\/span>\n\nsanitizeHtml('<p>abc<iframe\/\/src=jAva&Tab);script:alert(3)>def<\/p>'<\/span>); \/\/ returns <p>abcdef<\/p><\/span>\n\nsanitizeHtml('<TABLE><tr><td>HELLO<\/tr><\/TABL>'<\/span>); \/\/ returns \"<table><tr><td>HELLO<\/td><\/tr><\/table>\"<\/span>\n\nsanitizeHtml('<UL><li><A HREF=\/\/google.com>click<\/UL>'<\/span>); \/\/ returns \"<ul><li><a href=\\\"\/\/google.com\\\">click<\/a><\/li><\/ul>\"<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
By default, sanitize-HTML has a predefined set of rules on what tags and attributes to allow and remove\/escape; however, it can be tailored (refer to the documentation<\/a>) further per the developers’ requirements. <\/p>\n\n\n\n
\u26a0\ufe0f Always sanitize HTML string inputs on both the front and back end to reduce the attack vector substantially. <\/p><\/blockquote>\n\n\n\n
innerHTML vs. createElement<\/strong><\/h2>\n\n\n\n
createElement is an alternative method of innerHTML, so here we’ll look at the two. <\/p>\n\n\n\n
createElement<\/code> is faster, as browsers are not required to parse the HTML string and then build a node tree out of it; it also doesn’t have to attach event listeners as innerHTML<\/code> does. Using innerHTML<\/code> will cause browsers to reparse and recreate all DOM nodes inside the element whose innerHTML<\/code> is modified. <\/p>\n\n\n\n
However, if you’re writing a dynamic solution like a Markdown to HTML converter with a real-time preview, then innerHTML<\/code> is the way to go as it is a “one-size-fits-all” approach. This is precisely what’s required for this particular conversion and real-time preview. Building the same logic with createElement<\/code> would be a pain and render highly coupled logic with unextendable code. <\/p>\n\n\n\n
We can see this if we take the same to-do list example discussed above but use createElement<\/code> instead of innerHTML<\/code>:<\/p>\n\n\n
const<\/span> todos = [\n  \"Exercise\"<\/span>,\n  \"Have milk\"<\/span>,\n  \"Buy bread\"<\/span>,\n  \"Walk the dog\"<\/span>,\n  \"Sleep timely :)\"<\/span>\n];\nconst<\/span> todoListPreview = document<\/span>.getElementById(\u201ctdlst-preview\u201d); \/\/ returns an <ol> element<\/span>\ntodos.forEach((todo<\/span>) =><\/span> {\n  todoListPreview.innerHTML += `<li>${todo}<\/span><\/li>`<\/span>;\n  const<\/span> listItemElement = document<\/span>.createElement(\u201cli\u201d);\n  listItemElement.textContent = todo;\n  todoListPreview.appendchild(listItemElement);\n\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This will work for this particular problem, but it’s not a scalable approach. <\/p>\n\n\n\n
You’d be adding a lot of work for yourself and your team if, for example, you wanted to build a Rich Text Editor where you have to write separate logic for each of the new functionalities you might add.<\/p>\n\n\n\n
Using innerHTML with a simple HTML sanitizer is a much more efficient and practical approach.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
In HTML, assigning a string to the innerHTML<\/code> property is okay in some situations. However, if you can’t be sure of what the string contains\u2014for example, if a user provides it and it is possibly malicious\u2014it’s best to use createElement<\/code> or sanitize the input before storing it in a database. <\/p>\n\n\n\n
The open-source “sanitization” libraries strip off specific tags and attributes to make the desired HTML string XSS proof. Sanitization should be done on both the frontend and backend as a best practice to help reduce the risk of XSS attacks. When implementing sanitization on the frontend, it should be done at the time of render when the user provides input. And, on the backend, it should be done before storage in the database. <\/p>\n\n\n\n
This post was written by Keshav Malik. <\/em>Keshav<\/em><\/a> is a full-time developer who loves to build and break stuff. He is constantly looking for new and exciting technologies and enjoys working with diverse technologies in his spare time. He loves music and plays badminton whenever the opportunity presents itself.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Walk through the pros & cons of using the JavaScript innerHTML property and how to use it safely without exposing yourself  to XSS attacks.<\/p>\n","protected":false},"author":12,"featured_media":18989,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[62],"keyword-cluster":[],"class_list":["post-17269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/17269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=17269"}],"version-history":[{"count":60,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/17269\/revisions"}],"predecessor-version":[{"id":18998,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/17269\/revisions\/18998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/18989"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=17269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=17269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=17269"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=17269"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=17269"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=17269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
NOTE: You can try the library out at <\/em>RunKit<\/em><\/a>.<\/em> <\/p>\n\n\n\n
Fortunately, the World Wide Web Consortium (W3C) has since released a standard on dynamic markup insertion in HTML<\/a>that states that script<\/code> elements are not executed when inserted using innerHTML<\/code>. However, hackers have found other ways to carry out XSS attacks. <\/p>\n\n\n\n