In web development, there are a few tools that developers can use to troubleshoot, optimize, and debug sites. One of those is an HTTP Archive (HAR) File, a file that provides a snapshot of the interactions or calls made between a web browser and a web server. Here’s a closer look at what data they contain, why they’re useful, and how to use them.
What Is a HAR File?
Websites are hosted on web servers, which contain all the data for that website: data such as images, scripts, and code. When a user accesses a site via a browser, a series of calls are made with each command, and the server responds to each by returning the requested data, which is then displayed in the browser.
This “conversation” between the web browser and web server can contain valuable information about how a site is functioning. HTTP Archive Files, or HAR files, are files that provide a log of browser activities, or network requests, that occur while accessing a website—whether it’s Firefox, Chrome, Safari, etc.
What Are the Contents of a HAR File?
A HAR file uses a nested data structure that includes all of the elements of activity:
- Network traffic
- Cookies and cached data
- Metadata
- Request and response data, and any status codes
- Request and response times, such as the duration of a request, DNS and SSL times, time to initiate, and time to receive
- Site headers
- Content called up and its payload, such as images, text, web scripts, and video
- Any errors that occur, such as server errors
HTTP Archive (HAR) Files Are JSON Logs
In web development, different programming languages and syntaxes are used for different functions. JSON, or JavaScript Object Notation, is a data-interchange format used in front-end programming. JSON is the standard format for HTTP Archive Files, which makes it easy to open and view in any text editor application. It’s not just easy for computers to parse and read—it’s human-readable, too, although there are tools, mentioned below, that can simplify these files.
Why Do HAR Files Exist?
HAR files exist to analyze network traffic and site communications between a browser and web server. They exist because browsers allow users to record site activity, then export them for analysis. Once the “record” option is toggled on in the browser, all traffic and interactions will be saved in the file.
Why Are HAR Files Useful?
HAR files are useful for web developers, site analysts, security teams, and compliance audits. HTTP Archive files are beneficial because they enable fast, easy analysis of a site for a variety of functions and outputs.
Benefits of HAR Files in Development and Debugging
A few examples of the benefits of HAR files include:
- Analysis and optimization of a site’s performance. Being able to review and analyze an entire HTTP conversation with a website helps developers identify bottlenecks, diagnose errors, and improve page loading times.
- Security analysis, compliance, and auditing. The report makes it easy for web teams to provide evidence of security and compliance.
- Debugging and issue diagnosis
- Locating broken links, such as 404s; 4xx or 5xx status codes; and errors caused by misconfigurations
- Identifying large files that may be slowing load times that could be compressed to make the site more efficient
- Enabling collaboration or support teams to jump in and help on a site. Page structure and load order give developers new to a project a better sense of how a page is built, including any embedded stylesheets (CSS) or scripts.
Examples of Use
- Compliance. Say a healthcare organization has a patient portal which is subject to regulatory standards. HAR files can be used to record network activity to report out adherence to compliance standards.
- Penetration testing or white hat hacking. A web development agency may use a HAR file to examine network traffic for security analysis, identifying any suspicious activity or potential site vulnerabilities.
Who Accesses or Uses HAR Files?
How Web Developers Use HAR Files
Web developers may use HAR files when they want a fast, behind-the-scenes snapshot of how a site is performing, or to quickly identify where something may be off or need fine-tuning for better performance.
HAR Files Help Quality Assurance Engineers
QA engineers can use HAR files to uplevel many aspects of their roles, such as performance testing, debugging, and narrowing down the causes of issues that may affect user experience or the integrity of a site. The file then helps them communicate those issues with developers for faster fixes.
How Cybersecurity Teams Use HAR Files
Whether it’s proactive, by identifying potential issues in anomalies, or reactive, like investigating malicious activity, HAR files are incredibly useful to cybersecurity teams. By thoroughly examining site requests and responses, cybersecurity professionals can spot unexpected activity or anomalies in them.
Generating and Accessing HAR Files in Different Browsers
In general, the steps for recording and generating a HAR file are consistent across browsers. It may vary depending on the browser, but typically it involves accessing developer tools through a right-click action.
How to View the Contents of a HAR File
Steps for Analyzing HAR Files in Chrome
- In Chrome, right-click on a page and select Inspect to access Developer Tools.
- Select Network and check the Preserve log box, and click Record. Interact with the site as needed.
- Right-click again and select Save all as HAR to save the file.
Steps for Analyzing in Safari
- In Safari, select Preferences, then Advanced, then Show Develop to access Developer Tools.
- Select the Network or Performance tab, turn on record, or the network capture feature, and interact with the site as needed.
- Stop the recording and save the HAR file.
Steps for Analyzing in Firefox
- In Firefox, right-click on a page and select Inspect Element to access Developer Tools.
- Select the Network tab, enable Persist Logs, and interact with the site.
- Right-click again and select Save All as HAR to save the file.
Tips and Tricks
Despite being human-readable and easy for computers to parse, the reality is that HAR files contain a lot of data. They can be complex, so having the right tools to visualize them can make faster work of analysis. You’re better off using a tool that provides a user interface, such as a browser extension or dedicated HAR tool.
Best Practices
A couple of best practices to make working with HAR files easy, collaborative, and secure include:
- Obfuscating sensitive data such as logins and passwords for security purposes
- Automating HAR file parsing and analysis. Speed up insights from these files with various tools or scripts to more easily incorporate HAR file analysis into web development workflows.
Free and Open Source HAR File Tools
HAR file tools can make a big difference in how quickly and easily you can analyze them. Tools can offer search, sorting, filtering, navigation, and other functions. Here are a few options:
- HAR Viewer: A free web-based tool
- HAR Extractor: A free tool with an API that allows you to extract key data
- HAR Analyzer: Another free tool with its own CLI and ability to generate reports
Conclusion
HAR files are an excellent addition to the toolbox and workflow of developers, QA analysts, and cybersecurity professionals. Knowing what you can glean from these files, how to access them, and the best tools to streamline analysis will help you incorporate these valuable resources into any web workflow, resulting in better performance, user experience, and security.
