XSS javascript, exploit check

Question

I am currently working on a page where I need the user to input several variables which when submitted are then displayed throughout the page.

Problem is, it needs to be 100% secure code and whilst I'm ok using PDO/mysql etc javascript is not something I'm very fluent in.

At the moment, I have the following:

<script language="JavaScript">
function showInput() {
    document.getElementById('var1').innerText = 
                document.getElementById("user_var1").value;
    document.getElementById('var2').innerText = 
                document.getElementById("user_var2").value;
}
</script>

with the html

<form>
     your variable 1 is = <input type="text" name="message" id="user_var1"><br />
     your variable 2 is = <input type="text" name="message" id="user_var2"><br />
</form>
 <input type="submit" onclick="showInput();">
  <p>var1 = <span id='var1'></span></p>
  <p>var2 = <span id='var2'></span></p>

From what I can tell, using ".innerText" should stop any html etc being used and I have tested with

<script>alert(document.cookie);</script>

which results in the above just being printed as is (not run).

eg

your variable 1 is = <script>alert(document.cookie);</script>

Is there anything else you would recommend doing to make sure it is secure (XSS or otherwise)? Only characters that should need to be entered are / and AZ 0-9

Thanks in advance :)

edit

Just to clarify, the only code is what is above, the page is not pulling data from a database etc (what you see above is virtually the full php page, just missing the html head body tags etc).

Answer 1

Just based on what you're doing above you're not going to have XSS. innerText will do proper escaping.

To have your site be 100% secure is a tall order. Some of the things I'd look at are running your site over HTTPS with HSTS to prevent a network level adversary tampering with the site, parameterizing your SQL queries , adding CSRF tokens as necessary on form submission.

Specifically regarding XSS, one of the most common ways people get XSS'd is because they perform insecure DOM manipulation. If you're concerned about security I'd highly recommend porting your JS to React as you're manipulating a "virtual DOM", which allows React to perform context sensitive escaping. It also takes the burden off of the developer from having to do proper escaping.

One quick security win is adding a CSP policy to your site and setting the script-src directive to self . A CSP policy establishes the context in which certain content can run on your site. So if for example, you have script-src set to self (meaning your JS is loaded in the src attribute of a <script> tag pointing to the same domain as where the HTML is served, and not inline on the page) if someone does XSS it will (most likely*) not run.

These are just some examples of different security solutions available to you and a brief intro to security-in-depth practices. I'm glad you're taking security seriously!

*There are some circumstances (if you're dynamically generating your scripts for example) in which their code could run.

Answer 2

There is no vulnerability here (please read before downvote).

Just to clarify, the only code is what is above, the page is not pulling data from a database etc (what you see above is virtually the full php page, just missing the html head body tags etc).

Therefore the following two fields cannot be populated by anything other than the current user:

<input type="text" name="message" id="user_var1">
<input type="text" name="message" id="user_var2">

because there is no code present that populates these two fields.

The two DOM elements that are populated by code are as follows:

<span id='var1'></span>
<span id='var2'></span>

The code which does this is

document.getElementById('var1').innerText = 
                document.getElementById("user_var1").value;
document.getElementById('var2').innerText = 
                document.getElementById("user_var2").value;

It is using the non-standard innerText rather than textContent , however innerText will set the text content rather than HTML content, preventing the browser from rendering any tags or script.

However, even if it was setting the innerHTML property instead, all the user could do is attack themselves (just the same as they would opening up developer tools within their browser).

However, in the interests of correct functional behaviour and internet standards, I would use textContent rather than innerText or innerHTML .

Note that

<script>alert(document.cookie);</script>

would not work anyway, it would have to be

<svg onload="alert(document.cookie)" />

or similar. HTML5 specifies that a <script> tag inserted via innerHTML should not execute.