Get HTTP Headers Tool

 

Overview

The Get HTTP Headers Tool is a web-based utility designed to fetch and display the complete HTTP response headers for any URL. It is useful for SEO audits, performance optimization, and security checks, providing insights into server configurations, caching policies, and security headers for web developers, SEO specialists, and website owners.

Features

• Fetch and display all HTTP response headers for a given URL.
• Show HTTP status code with a color-coded badge.
• Provide tooltips with descriptions for common headers.
• User-friendly interface with loading animations, error handling, and a sample URL option (https://www.bbc.co.uk/).
• Responsive design for desktop and mobile users.

Technologies Used

• HTML5: For semantic structure.
• CSS (Tailwind CSS): For responsive styling.
• JavaScript: For fetching headers and managing UI states.
• Font Awesome: For icons.
• Google Analytics: For tracking (placeholder ID).
• Google Fonts (Poppins): For typography.
• CORS Proxy: Uses https://api.allorigins.win/get?url= for cross-origin requests.

Setup Instructions

1. Clone the Repository (if applicable):
   bash

   git clone <repository-url> cd <repository-directory>
2. Open the HTML File:
   • Save the provided code as index.html.
   • Open it in a web browser.
3. Google Analytics:
   • Replace G-XXXXXXXXXX with your actual Google Analytics ID in the <script> tags to enable tracking.
4. CORS Proxy:
   • The tool uses https://api.allorigins.win/get?url= to bypass CORS restrictions. For production, consider a self-hosted proxy for reliability and performance.

Usage Instructions

1. Enter a URL:
   • Input a URL (e.g., https://www.example.com) in the provided field.
2. Get Headers:
   • Click “Get Headers” to fetch and display the HTTP response headers.
3. View Results:
   • See the URL, HTTP status code, and a table of header names and values, with tooltips for common headers.
4. Try a Sample:
   • Click “Try a sample (bbc.co.uk)” to test with https://www.bbc.co.uk/.
5. Reset:
   • Click “Check Another URL” or “Try Again” (on error) to clear the form and check another URL.

Code Structure

HTML Structure:

• Head Section: Includes SEO meta tags, Tailwind CSS, Font Awesome, Google Fonts, and Google Analytics scripts.
• Body Section:
  • Main container with a form for URL input and a results area.
  • Results include a loading indicator, error display, and success display with a table for headers.
  • Footer with links to related tools (HTTP Status Code Checker, Security Header Checker, Website Analyzer).

CSS Styles:

• Uses Tailwind CSS for responsive design.
• Inlined custom styles for the main container, buttons, input fields, status badges (color-coded by status code range), and loading spinner.
• Hover animations on the main container for visual appeal.

JavaScript Functionality:

• Event Listeners: Handle form submission, sample button, and reset button clicks.
• Fetch API: Uses a CORS proxy to fetch headers.
• State Management: Manages loading, error, and success states.
• Key Functions:
  • fetchHeaders(url): Fetches headers via the proxy.
  • displayResults(statusData): Renders the URL, status code, and header table.
  • getStatusClass(code): Maps status codes to CSS classes for badges.
  • showLoadingState(), showErrorState(message), showSuccessState(): Update UI states.
  • resetUI(): Resets the form and UI.
• Header Descriptions: A HEADER_DESCRIPTIONS object provides tooltips for common headers.

Example

1. Check a Website:
   • Input: https://www.bbc.co.uk/
   • Click “Get Headers”
   • Results:
     • URL: https://www.bbc.co.uk/
     • Status: 200 (green badge)
     • Headers Table (example):
       • Server: nginx
       • Content-Type: text/html; charset=utf-8
       • Cache-Control: public, max-age=300
       • Strict-Transport-Security: max-age=31536000
2. Check a Non-Existent Page:
   • Input: https://www.example.com/nonexistent
   • Results:
     • URL: https://www.example.com/nonexistent
     • Status: 404 (red badge)
     • Headers Table (example):
       • Server: Apache
       • Content-Type: text/html
       • Content-Length: 0
3. Sample Test:
   • Click “Try a sample (bbc.co.uk)”
   • Results: As above for https://www.bbc.co.uk/.

Related Tools

• HTTP Status Code Checker
• Security Header Checker
• Website Analyzer