Editing Disabled Buttons:
When you are on a web page that has a button that is disabled and only enables when certain criteria are met, such as filling out all the fields in a form, it may be possible to enable it. I've included instructions on how to do this in my blog post on testing buttons.
A user of your application might use this flaw to get around submitting a form where there are required fields that she doesn't want to fill in. Or a user might enable an Edit button and submit edits to data that he shouldn't be able to edit.
Viewing Hidden Data:
Recently someone showed me a security flaw in an application that was listing contact details for various members of the site. Depending on the user's access rules, there were certain fields for the members, such as their personal address, that were not displayed on the page. But when the developer tools were opened, all of the hidden fields were displayed in the Elements section!
Any user of this application could open up the developer tools and search through them to find personal data for any of the members of the site.
Finding Hidden Pages:
It's possible to find links that are not displayed on a web page by looking in the Elements section of the developer tools. Let's try this out using the OWASP Juice Shop. I'll be providing instructions using Chrome, but you can also do this with Firefox and Internet Explorer. Navigate to the Juice Shop, then click on the three dots in the top right corner of the browser. Select "More Tools" and then "Developer Tools". This will open the Dev Tools section. Click on the Elements tab if it is not already selected by default. We're going to take a look through the HTML of the page to see if we can find links that are not displayed in the browser. Let's get our bearings by clicking on a displayed element in the page. On the Juice Shop main page, there is a nav bar on the top of the page, with links such as "About Us" and "Contact Us". Right-click on one of the elements in the nav bar, and choose "Inspect". Notice that this highlights the corresponding section of the HTML in Dev Tools. You'll see a number of items all tagged with the <li> tag; these are the items in the nav bar. Open up each one by clicking on the carat on the left side, and you'll find one that looks like this:
The status of this list item is hidden, as you can see by the "ng-hide" attribute. The 'ng-show="isLoggedIn"' attribute tells us that this nav bar item should only display when the user is logged in. Finally, we see the link that the nav bar item would take us to if we were to click on it when it was displayed: "#/recycle". Let's try navigating to this link by changing the page's URL from https://juice-shop.herokuapp.com/#/search to https://juice-shop.herokuapp.com/#/recycle. Click Enter, and you will be taken to the recycle page. You have successfully navigated to a page that you should only have access to if you have logged in!
This is why it is important to do authorization checks when a user navigates to a page. It's not enough to simply hide a link, because it's so easy to find hidden links by looking in Dev Tools. Any user could find hidden links in your application and navigate to them, which could give them access to an admin page or a page with data on other users.
As you can see, testing for these types of security flaws is quick and easy! I recommend checking for these flaws whenever you test a web page. And here's a bonus vulnerability; if you create an account and log into the Juice Shop, and look in the Network section of Dev Tools, you will see your username and password in plain text! We'll talk more about this next week, when we take on Session Hijacking.