Let's say I have a <textarea> and <div> element, and when the user puts html, CSS, or whatever they want), into the textarea, then their input is set as the innerHTML of the <div> element, using javascript.
What are the vulnerabilities of letting the user define the content of a <div> element?
The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies. You can read the MDN documentation on innerHTML .
Can break the document: There is no proper validation provided by innerHTML, so any valid HTML code can be used. This may break the document of JavaScript. Even broken HTML can be used, which may lead to unexpected problems.
Security considerations HTML specifies that a <script> tag inserted with innerHTML should not execute. For that reason, it is recommended that instead of innerHTML you use: Element. SetHTML() to sanitize the text before it is inserted into the DOM.
Definition and Usage The innerHTML property sets or returns the HTML content (inner HTML) of an element.
If the content they enter does not leave the page, there is no more risk than them editing the DOM through firebug or the chrome inspector. If you take their input and then display it as is, that is a huge security risk especially when other users are on your website.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With