Web app security testing with browsers

Introduction

Can you perform web application security testing just using a browser? Think of a scenario where you have to do security testing from a very limited environment where you have no access to run scripts or tools and all you have is a browser. This guide looks at web application security testing from such a locked down scenario. The goal is to cover as many security test cases as possible from a browser. Even though it’s not possible to perform all web application related security test cases from browsers, some good coverage can be guaranteed with the help of the same. A browser alone cannot replace conventional web application security testing methodologies which involve proxies and scanners. Relying completely on security tests that can be done from a browser is never recommended.

One of the other potential use cases for this guide would be while preparing security testing reports. The most important section in any vulnerability finding write-up is ‘reproduction steps’. Most security professionals make use of tools like Burp Suite or ZAP extensively for this step. However, the major audience (including developers) of the security testing won’t be having enough knowledge about setting up the proxy and similar tools – making the vulnerability reproduction tough on their end. As a matter of fact, you might have been in post pen-testing meetings where stakeholders asked you to reduce the likelihood of some vulnerabilities just because exploiting them requires setting up a proxy. After going through this guide, you will be able to re-write most of those write-ups with simple steps that just involves browser – which almost everyone on the target audience of the testing report has access to.

It is to be noted that this research only focuses on what all web application security related tests that can be done just by using native features of the browser. This does not cover what these browsers can do with the help of extensions. Almost all major browsers support installing extensions these days and there are lot more powerful things that can be done with the help of them, which won’t be covered in this paper.

Majority of the article focuses on 'developer tools' provided by the browsers. Even though these tools are aimed at making web development process easy, we would be able to help them in covering test cases as well.

Potential use cases for this guide

1. If you are on day one of a week-long web application penetration testing project, and the support team is still trying to figure out how can they give you a non-locked-up workstation, you can rely on this document to understand the application better.
2. If you want to make your pentest reports more friendly to the audience.
3. If you want to train users or developers of basic web application related security issues
4. For conducting internal company-wide CTFs. You can make CTFs that can be solved just by using the browser and that can help you bring more people onto the wagon since almost everyone must be having access to a browser these days.
5. Just by putting this guide and comparison table out there, we are telling browsers that we appreciate these features offered by them and we expect more.

This guide cannot be used as:

1. A complete web application penetration testing guide.
2. A complete web application penetration testing check-list.

Opening Dev Tools

1. By pressing F12.
2. By pressing Ctrl + Shift + I on Windows.
3. By pressing Cmd + Option + Ion Mac.
4. By right clicking on the web page and then selecting Inspect on Google Chrome.
5. By clicking on the kabob menu and then navigating to More Tools and then Developer Tools on Google Chrome.
6. By right clicking on the web page and then selecting Inspect Element on Mozilla Firefox.
7. By clicking on the hamburger menu and then navigating to Web Developer and then Toggle Tools on Mozilla Firefox.
8. By clicking on the gear icon and then navigating to F12 Developer Tools on Edge/IE.
9. By going to Safari > Preferences > Advanced > Then tick the Show Develop menu in menu bar checkbox. Then press Cmd + Option + Ion Safari
10. By going to Safari > Preferences > Advanced > Then tick the Show Develop menu in menu bar checkbox. Then go to Develop > Show Web Inspector on Safari.

Support Matrix

Switching User Agents

Google Chrome: Switching User Agents

1. Open browser's Developer Tools.
2. Click the menu button to the right of the Console tab at the bottom of the Developer Tools pane and select Network Conditions
3. Uncheck the “Select automatically” radio button.
4. Select the user agent from dropdown or enter a custom user agent

Mozilla Firefox: Switching User Agents

1. Navigate to Firefox’s about:config page and click on I accept the risk!
2. Type useragent into the search field.
3. Look for general.useragent.override, if you can't see this preference, right-click on the about:config page > New > String
4. Name the preference general.useragent.override
5. Right click on the general.useragent.override preference and select Reset to switch back to the default user agent.

Edge/IE: Switching User Agents

1. Open browser's Developer Tools.
2. Click on Emulation tab
3. Select user agents from drop down menu

Edit and Replay Requests

Mozilla Firefox: Edit and Replay Requests

1. Open browser's Developer Tools.
2. Click on Network tab
3. Perform any action on the web application
4. Right click on the HTTP request from the list and select Edit and Resend
5. Make desired modifications and click on Send button
6. Right click on the modified request and click on Open in New Tab

Editing Cookies

Google Chrome: Editing Cookies

1. Open browser's Developer Tools.
2. Click on Application tab
3. Navigate to Cookies and then select the application domain
4. Double click on any cookie value to edit them

Mozilla Firefox: Editing Cookies

1. Open browser's Developer Tools.
2. Click on Storage tab
3. Navigate to Cookies and then select the application domain
4. Double click on any cookie value to edit them

Edge/IE: Editing Cookies

1. Open browser's Developer Tools.
2. Click on Debugger tab
3. Navigate to Cookies and then select the application domain
4. Double click on any cookie value to edit them

Editing Local Storage

Mozilla Firefox: Editing Local Storage

1. Open browser's Developer Tools.
2. Click on Storage tab
3. Navigate to Local Storage and then select the application domain
4. Double click on any entry to edit them

Google Chrome: Editing Local Storage

1. Open browser's Developer Tools.
2. Click on Storage tab
3. Navigate to Local Storage and then select the application domain
4. Double click on any entry to edit them

Edge/IE: Editing Local Storage

1. Open browser's Developer Tools.
2. Click on Console tab
3. Use localStorage, localStoragegetItem and localStorageSetItem

Disable JavaScript

Google Chrome: Disable JavaScript

1. Open browser's Developer Tools.
2. Click on three dots menu on the right side of the web developer toolbar and click on Settings
3. Navigate to Preferences tab
4. Under Debugger, check the Disable JavaScript box

Mozilla Firefox: Disable JavaScript

1. Open browser's Developer Tools.
2. Click on settings on the right side of the web developer toolbar
3. Under Advanced Settings, check the Disable JavaScript * box

Viewing Headers

Google Chrome: Viewing Headers

1. Open browser's Developer Tools.
2. Navigate to Network tab
3. Perform any action on the web application
4. Select the page name from left side

Mozilla Firefox: Viewing Headers

1. Open browser's Developer Tools.
2. Navigate to Network tab
3. Perform any action on the web application
4. Select the page name from left side

Edge/IE: Viewing Headers

1. Open browser's Developer Tools.
2. Navigate to Network tab
3. Click on Play button
4. Perform any action on the web application
5. Click on Stop button
6. Select the page name and click on Details tab

Capture Screen-shots

Google Chrome: Capture Screen-shots

1. Open browser's Developer Tools.
2. Press on Toggle Device Toolbar button or press Ctrl + Shift + M
3. Click on three-vertical-dots menu on the right
4. Click on Capture Screenshot

Mozilla Firefox: Capture Screen-shots

1. Click on three-horizontal-dots on the URL bar
2. Click on Take a Screenshot

Edge/IE: Capture Screen-shots

1. Click on the pencil-and-selection icon on the URL bar
2. Click on save button or select an area with the help of scissor tool

Offline mode

Google Chrome: Offline mode

1. Open browser's Developer Tools.
2. Navigate to Network tab
3. Check the Offline box

Mozilla Firefox: Offline mode

1. Select Work Offline from the menu

Encode and Decode

btoa("string-to-encode")

atob("string-to-decode")

encodeURIComponent("string-to-encode")

decodeURIComponent("string-to-decode")

escape("string-to-encode")

unescape("string-to-decode")

Disable CSS

1. Open browser's Developer Tools.
2. Click on Console tab
3. Copy and paste the following and press enter.

$('style,link[rel="stylesheet"]').remove();

$('style').remove();

Array.prototype.forEach.call(document.querySelectorAll('*'),
function(el){el.removeAttribute('style');});

$('head').remove();