How to write a secure javascript code to save your website users from Hackers using XSS
Nowadays, JavaScript plays a vital role to make websites more interactive and responsive. That’s why in the past decade many JavaScript Frameworks like Angular, React JS, Vue JS has gained popularity among front-end developers. So without JavaScript, the website is just like a body without a soul. But heavy use of JavaScript will open a wider path for hackers who can hack anyone's account on the website and steal personal information like Account Info, Mobile Number, etc. The most common technique is to use XSS or Cross Site Scripting.
?
Using XSS, Hacker will share a valid website link that is embedded with some extra parameters in the URL. Ex - Hacker will share a Facebook profile with some additional parameters in the URL and upon clicking that link, it opens the profile but also executes some JavaScript, which helps them to steal all the cookie information. In this way, they get access to the user’s banking credentials, social media account credentials, etc. So, it is necessary that the website owners write good code that prevents executing JavaScript code on the user's browser
?
Example of XSS -
?
Let’s say below is a PHP code written by a developer:
?
<?php
$username = $_GET['user'];
echo "<h1>Hello, " . $username . "!</h1>";
?>
?
The above code will just print the username of the user from the GET parameter:
?
In scenario1, if the user opens the below URL
?
It will print “Hello sarathi” on the webpage.
?
In scenario 2, if the user is sent the below link https://www.example.com/index.php?username=<script>alert(1)</script>
?
Then, it will execute the javascript and alert “1”, On the webpage.
?
In scenario 3, if the below link is sent
?
https://www.example.com/index.php?username=<script>alert(document.cookie)</script>
?
Then, it will execute the javascript and alert the cookie value on the browser.
?
In scenario 4, the hacker will send a URL which will write a ajax call to send the cookie to their website.
?
https://www.example.com/index.php?username=<script>function sendData(){send(document.cookie);}sendData();
(Note- send is a dummy function, Hacker can write full ajax function here)
?
In this case, it actually grabs the whole cookie information and sends it to Hacker’s server. Once they have the information, they can login to various accounts.
?
So developers must be aware of these coding loopholes, and should not expose our source to the sinks which might be an XSS issue.
Source is the path from where the hackers can inject JavaScript code. In the above example source is $_GET. And sink is the place where we just execute the source. Here the sink is the “echo” statement.?
?
In JavaScript, there are vast kinds of sources and sinks. Here are a few of them:
?
Sources
Description
Example
Sinks
Description
document.URL
Assigned value
eval
1st Argument
document.documentURI
Assigned value
function
1st argument if only one else last
document.URLUnencoded
Assigned value; IE only
setTimeout
1st If and only IF string
document.baseURI
Assigned value
setInterval
1st If and only IF string
document.cookie
Assigned value
execScript
1st Argument
document.referrer
Assigned value
crypto.generateCRFMRequest
5th Argument
location
Assigned value
ScriptElement.src
Assigned value
location.href
Assigned value
ScriptElement.text
Assigned value
location.search
Assigned value
ScriptElement.textContent
Assigned value
领英推荐
location.hash
Assigned value
ScriptElement.innerText
Assigned value
location.pathname
Assigned value
anyTag.onEventName
Assigned value
localStorage.getItem
1st Argument
localStorage.getItem(literal);
localStorage.getItem(variable);
document.write
Any arugment
sessionStorage.getItem
1st Argument
sessionStorage.getItem(literal);
sessionStorage.getItem(variable);
document.writeln
Any arugment
sessionStorage.key
1st Argument
sessionStorage.key(literal);
sessionStorage.key(variable);
anyElement.innerHTML
Assigned value
responseText
Assigned value
xhr.responseText; readonly
Range.createContextualFragment
1st Argument
data
Assigned value
postMessage; e.data;
HTMLButton.value
Assigned value
value
Assigned value
<textarea>.value; <input>.value
location
Assigned value
name
Assigned value
location.href
Assigned value
Assigned value
location.pathname
Assigned value
websockets.onMessage
??
location.search
Assigned value
location.protocol
Assigned value
location.hostname
Assigned value
location.assign()
1st Argument
location.replace()
1st Argument
element.setAttribute('href', source);
If element is img, iframe, script, anchor and source is not a literal
element.setAttribute('src', source);
If element is img, iframe, script, anchor and source is not a literal
element.setAttribute('text', source);
If element is script and source is not a literal
element.setAttribute('innerText', source);
If element is script and source is not a literal
element.setAttribute('on*', source);
If source is any element
element.setAttribute('value', source);
If source is input element
?
There are few tools in the market (Open Source and free), using which possible XSS on your JavaScript code can be caught. Below is a similar tool called JSPrime developed by our techie Sarathi Sahoo a while back. Check out the demo to know more about XSS and even try it out.
?
Demo link:
?
?
Github Link:
?