Become a cyber pro by building your skills in the National Cyber League!
Normally when you hear someone asking about what tools they should use to get started doing web app penetration testing there is almost an overwhelming concise opinion that burp is the king of all kings for web app tooling. However burp requires installing yet another program and it used to require you to configure your current browser to use its proxy. (No burp has a built in browser). Burp suite's free edition also doesn't let you save you work which is annoying at its best. However I think there is an easier way: Good Old Reliable Dev Tools
Getting Started with Dev Tools
The easiest way to open up dev tools is to left click and hit inspect element. That should instantly present you with a window like this
I however highly recommend clicking on the three dots in the upper right hand corner of the dev tools windows and selecting the option to undock dev tools into a separate window. This will give dev tools much more screen space and is useful for debugging and looking through network traffic. Afterwords you will be able to see the full window which looks like this.
Dev tools has multiple tabs, here is a quick overview
- Elements shows the current html - Useful for perusing though the html on the current page
- Console - Useful for running any JavaScript on the page or finding juicy console.log statements left in apps
- Sources - Tells you every file (HTML, CSS, JavaScript, you name it) that the page is currently using
- Network - Record, Save, and Analyze traffic from the current page
- Performance - Profiling statistics
- Memory - More profiling
- Application - Contains things like cookies and local storage of the web app. Can be very useful
- Security - Oddly not all that useful. Mostly just tells you SSL information
- Lighthouse - Generate a score on how good your web app is (performance and responsive ness)
Network capture
Network captures is were you will spend the majority of your time when doing web application assessments so lets start with it.
Looking at the screenshot we can see the red circle (That means we are running a capture). Here is a picture after I refreshed the page and got some traffic captured.
This is a lot of traffic, most the time we are looking for application traffic so if you want to look at just XHR traffic click the Fetch/XHR button to show only fetch data.
When you click on one of the requests you can see the request data and headers. You can also copy the request as a curl command. This allows you to edit and replay it from your terminal.
To do this left click a request and click copy request > copy as cURL command
You can also export the data you captured during the session. To do this hit the button that looks like a download symbol. (You can import it later using the upload symbol button by it)
Application
Under the application tab we have access to cookies, local storage, and the cache. You can double click the values to modify and tamper with their values.
Useful Extensions
If you find that you want some other functionality available to dev tools there are multiple extensions that you can download to enhance the ability of dev tools. Here is a list of some of my favorite dev tools extensions
React Dev Tools
React is a JavaScript framework that builds a lot of modern web applications (for example Facebook). It is incredibly popular but the dev tools that ship with chrome make taking apart and debugging applications written in react a bear. React Dev Tools drastically improves your life when working with react. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Tamper Dev
Tamper Dev is a hoped up version of the network capture that lets you edit and resend requests all from with in chrome (No need for copying curl requests) https://chrome.google.com/webstore/detail/tamper-dev/mdemppnhjflbejfbnlddahjbpdbeejnn?hl=en
Built With
Built With is an extension that automates the discovery of what technologies make up a certain web app https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=en
Hopefully after this you are familiar enough with dev tools to do some web hacking. Now go have some fun :)
This post was not affiliated, associated, authorized, endorsed by, or in any way officially connected with Google. The Google Chrome name and marks are registered trademarks of Google and are only used for informational purposes.
Published by wolfshirtz