What's Behind A Webpage? Use DevTools To Find Out

In this blog post, we are going to explore and understand Browser DevTools and webpage source code, specifically for OSINT. Examining the area 'behind the scenes' of relevant web pages should be part of every internet investigator's process, especially when useful data from an OSINT perspective is not becoming apparent quickly. This side of OSINT can often be left to those that are more technical, however we will break this down to make it a very accessible method of obtaining information.

What we won't be doing is discussing Javascript, nor is there an expectation to know Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) programming languages. However, it is important to understand that each site is built differently, as is each social media platform. So, what may be useful on one webpage, may not be useful on another.

There is some great content out there discussing Developer Tools (DevTools) and how that relates to OSINT and I strongly recommend taking a look this video by our friends at The OSINT Curious Project.

Introduction

DevTools typically allow a developer to create, test and debug software. Current browsers provide integrated DevTools, which enable inspections of a website. For example, a developer can inspect and debug the page's code, look at the network traffic and measure a websites performance. More importantly, lets understand what can we achieve from an OSINT perspective:

• Content can be hidden, and content can be disabled, but remains visible in the DevTools e.g., linked social media accounts

• You can observe how information is being passed around the webpage and where sites pull data from

• It can show invisible subdomains of the site (a good example could be blog.site.com or forum.site.com)

• You can access webpage trackers (where are they selling/giving the the data too)

• Have visibility of what other sites and companies they might be connected to

• You can extract social media user identification numbers

• You can extract full sized videos and images (how often do we see rounded images on sites e.g., LinkedIn)

• It allows you to undertake source code authorship analysis - identifying the author of a particular piece of code by examining its programming style characteristics which act as a digital fingerprint that can link sites to their creators and owners (beyond the scope of this post)

To get to the DevTools (use either):

1. F12

2. Ctrl + Shift + I

3. Right Click >> Inspect

The Dock Side can be changed, by clicking the three dots in the top right of DevTools.

Within the DevTools, there are two tabs in which we'll focus our efforts:

Elements Tab - Shows the HTML used to build the page you're looking at, together with any inline CSS. This can reveal information about sources of information, hidden data points, and linked social media.

Network Tab - Network tab shows information about the requests a webpage is making - dissect the page and see who the site is connected to. This does take trial and error to find things that are relevant. If nothing appears, refresh your browser (because we are looking at the information as it appears in that moment).

The Tabs within DevTools. We'll focus on the Elements Tab and the Network Tab.

Source Code is the HTML as it was delivered by the server, which is static. This includes both content and instructions, written by programmers that ensures the webpage is displayed the way it is supposed to. Your browser processes this and produces what we see when accessing a website. From an OSINT perspective, the key takeaway here is that we can access slightly different data, or simply, it is easier to find information relevant to OSINT. Using Ctrl + F (your find function) will be vital!

To get to the source code (use either):

1. Ctrl + U

2. Right Click >> View Page Source

Not Right Now, Maybe Later

Saving HTML (static) versions of web pages is useful if the OSINT practitioner wishes to examine the web page at a later date. The main reasons for this are that webpages can be deleted, and it is a low attribution approach as you only need to visit the page once, or in some examples not at all.

A few ways to do this:

1. Click the three dots in the top right, click More >> More Tools >> Save page as

2. Use https://archive.org/web/ or https://archive.ph/ to take a 'snapshot' of a webpage

3. Use offline tools such as https://www.httrack.com/ which provides a utility to download the site to you local computer.

A screen capture from archive.ph

Below are some of our favourite methods of obtaining information only available via the DevTools or Source Code.

Developer Comments

A webpage source code may contain comments or plain text strings that investigators can utilise to identify new lines of inquiry. Comments are never displayed in the rendered page and are often written in plain language and can sometimes provide information about who owns or maintains a website.

Comments left by whoever wrote the source code will start with <!--

The comment will end with -->

Practice Examples

Websites - Google Analytics ID

There are many things you can uncover from a page’s DevTools, but one good example is code that helps website administrators monitor the traffic that a website is receiving. One of the most popular services is Google Analytics. Sites that are related often share a Google Analytics ID, and we can use the ID number to identify domains that may be connected. All Google Analytics IDs begin with “UA-”, and are followed by an account number. To obtain this information:

1. Open DevTools (Ctrl + Shift + I) and go to the Elements Tab

2. Ctrl + F (on keyboard)

3. Search for UA-

4. Copy the entire number e.g., UA-123456789 to a site like https://spyonweb.com/ to identify connected domains

There is an important note to make: source code can be copied and replicated without deleting the Google Analytics ID – this could result in misleading findings.

TikTok - Profile Information and Images

TikTok, known in China as Douyin, is a short-form video hosting service. The short-form user videos have durations from 15 seconds to ten minutes. TikTok is a very open platform with the ability to obtain useful profile information from with the DevTools:

1. Click on Network Tab

2. Type in user/detail in the search box (as per below)

3. Click the item, and click the Preview Tab on the right hand side

Strava - High Resolution Images

Strava is used to track physical exercise which incorporates social network features. It is primarily used by the cycling and running communities, and uses GPS data. A simple way to search for Strava users is to apply your site: operator in Google Search followed by the name you wish to search. Using your "quotation marks" will also assist if you are searching for a first and last name.

Once a profile is open, right click the profile image and select Inspect. This will automatically highlight the image URL within the Elements Tab of DevTools. These steps can be repeated across most social media. We can then open that image in a new tab. The source will likely be 'cloudfront' (a content hosting service operated by Amazon) and we can get the high resolution image by:

1. Noting the size indicator at the end of the image URL e.g., large

2. Copy the URL, minus this word

3. Open find function (Ctrl + F) and paste the URL (still within Elements Tab of the DevTools)

4. Find the image URL ending in /full

This is a wider tip on how better information can be found. We can skip steps 2 - 4 and simply replace /large.jpg with /full.jpg at the end of the image URL.

Google Maps Street View - User Uploaded Content

Within Google Maps there is a feature where individuals can upload images. These are represented as the blue dots in most cases. If we look at the example below for Deir ez-Zur in Syria, there are only a couple of spots we can ascertain Street View.

Deir ez-Zur, Syria (note the blue dots in the left image)

Click the blue dot, then open up DevTools. Google loads several .jpg files for the image displayed. Google is still only loading a single image into the browser, but divides the image in several sections behind the scenes. Each section of the image has a basic descriptor about where that image should fit into the image displayed in the browser. To cut a long story short, we can double click one of these sections and edit the URL. Delete the text following the = symbol, and replace with s10000.

The results in most cases are better than a screenshot!

Tip: Changing the number after the = symbol will work with any image associated to Google e.g., a YouTube Profile picture & Gmail

Conclusion

Examining DevTools and the Source Code of relevant web pages should be part of every internet investigator's process, especially when useful data from an OSINT perspective is not becoming apparent quickly. As we become more experienced in understanding what we can find and dig deeper into this information, the better our investigations and research will be!

Note: all techniques detailed in this post are for educational purposes only and should not be used for illegal activity. OSINT Combine does not guarantee any results, and is not responsible for the legality of the use of the techniques shown, or your use of this information. in your jurisdiction. Please use OSINT for good and not illegal activity.