PCI DSS 6.4.3 Manage Inventory Script for any webpage

In today’s digital era, maintaining an accurate inventory of scripts on a web page is crucial for security and compliance with standards like PCI DSS 6.4.3. Below, we'll walk you through a simple JavaScript snippet designed to identify and display all scripts loaded on a web page. This method helps ensure that every script is authorized and accounted for, making it a valuable tool for developers and security professionals alike.

Breaking Down the Code

1. Identify All Scripts
   The code uses document.querySelectorAll('script') to select all <script> tags on the page. This retrieves both external and inline scripts.

2. Build the Script Inventory
   Each script’s details, such as its source (src) and type (type), are extracted and stored in an array. Inline scripts are labeled as "Inline Script", and default script types are labeled "Default (application/javascript)".

3. Log the Inventory
   The inventory is logged to the browser console in a clean tabular format using console.table() for easier inspection.

4. Optional Pop-up Display
   A styled pop-up is created dynamically using the DOM API to display the inventory. It allows you to see script details directly on the web page.

---

How to Use This Script

1. Open your browser’s developer tools (usually by pressing F12 or Ctrl+Shift+I).
2. Navigate to the Console tab.
3. Copy and paste the above script into the console and hit Enter.

The script will:

• Log a detailed inventory of all <script> tags in the console.
• Display an optional pop-up on the web page with the same inventory.

---

Why This Script is Useful

• Compliance: Helps verify that all scripts are authorized and accounted for, aligning with PCI DSS 6.4.3 requirements.
• Debugging: Assists in troubleshooting issues by providing visibility into the loaded scripts.
• Security: Detects unauthorized or unexpected scripts, a critical step in preventing attacks like formjacking or clickjacking.

---

Enhancements for Better Utility

This script can be further enhanced to:

• Export the Inventory: Generate a downloadable file (e.g., CSV) containing the script details.
• Detect Changes: Integrate with file integrity monitoring tools to track unauthorized changes in scripts.
• Real-Time Alerts: Notify developers or administrators of unauthorized or suspicious scripts.

---

Conclusion

Understanding and managing script inventory is vital for both security and compliance. With this simple JavaScript snippet, you can easily audit and analyze the scripts on any web page. Whether you're a developer ensuring functionality or a security professional working on PCI DSS compliance, this tool is an excellent starting point for robust script management.

Stay vigilant and proactive in securing your digital environment!

Do you have questions or need further assistance? Drop them in the comments below!

// JavaScript code to find and display the script inventory of a web page
(function() {
    // Get all script tags on the page
    const scripts = document.querySelectorAll('script');
    
    // Create an array to hold the script inventory details
    const scriptInventory = Array.from(scripts).map((script, index) => {
        return {
            id: index + 1,
            src: script.src || "Inline Script",
            type: script.type || "Default (application/javascript)"
        };
    });
    
    // Log the inventory to the console
    console.log("Script Inventory:");
    console.table(scriptInventory);

    // Optionally, display the results in a styled popup
    const inventoryPopup = document.createElement('div');
    inventoryPopup.style.position = 'fixed';
    inventoryPopup.style.bottom = '10px';
    inventoryPopup.style.right = '10px';
    inventoryPopup.style.width = '300px';
    inventoryPopup.style.height = '400px';
    inventoryPopup.style.overflow = 'auto';
    inventoryPopup.style.border = '1px solid #ccc';
    inventoryPopup.style.backgroundColor = '#fff';
    inventoryPopup.style.padding = '10px';
    inventoryPopup.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    inventoryPopup.style.zIndex = '9999';
    
    const inventoryContent = '<h3>Script Inventory</h3>
        <ul style="list-style: none; padding: 0px;">${scriptInventory.map(script =&gt; `
            <li style="margin-bottom: 10px;">
                <strong>Source:</strong> ${script.src}<br />
                <strong>Type:</strong> ${script.type}
            </li>`).join('')}
        </ul>
        <button onclick="this.parentElement.remove()" style="background-color: #007bff; border: none; color: white; cursor: pointer; margin-top: 10px; padding: 5px 10px;">Close</button>';
    
    inventoryPopup.innerHTML = inventoryContent;
    document.body.appendChild(inventoryPopup);
})();