Implementing Element Inspection Within an Iframe Using JavaScript while avoiding CORS

Question

I'm working on a web application that involves previewing websites within iframes. I'm attempting to replicate a simplified version of the element inspection behavior found in browser developer tools, where you can hover over elements and see their paths. Here's what I've attempted:

I have a button to toggle an "Inspect" mode that should enable the element inspection.
I have attached mouseover and mouseout event listeners to the iframe's content to capture the element being hovered and display its path in a designated container.

I was trying to implement a feature that would allow you to inspect and display the path of elements within an iframe when hovering over them.

This is my error:

Uncaught DOMException: Permission denied to access property "document" on cross-origin object

Here's my current JavaScript code:

document.addEventListener("DOMContentLoaded", function () {
    const urlInput = document.getElementById("url-input");
    const previewButton = document.getElementById("preview-button");
    const toggleInspectButton = document.getElementById("toggle-inspect-button");
    const previewContainer = document.getElementById("preview-container");
    const hoverDetailsContainer = document.getElementById("hover-details");

    let iframeWindow = null;
    let isInspecting = false;

    async function loadPreview() {
        const url = urlInput.value.trim();

        if (!url) {
            alert("Please enter a URL!");
            return;
        }

        try {

            const iframe = document.createElement("iframe");
            iframe.src = url;
            iframe.style.width = "100%";
            iframe.style.height = "100%";

            

            // Clean up any previously loaded content
            while (previewContainer.firstChild) {
                previewContainer.removeChild(previewContainer.firstChild);
            }

            // Append the iframe to the preview container
            previewContainer.appendChild(iframe);

            iframe.onload = function () {
                iframeWindow = iframe.contentWindow;
                iframeWindow.document.addEventListener("mouseover", function (event) {
                    if (isInspecting) {
                        const target = event.target;
                        const path = [];

                        let currentNode = target;
                        while (currentNode !== null && currentNode !== iframeWindow.document) {
                            const tagName = currentNode.tagName.toLowerCase();
                            const id = currentNode.id ? `#${currentNode.id}` : '';
                            const classNames = currentNode.className ? `.${currentNode.className.replace(/\s+/g, '.')}` : '';

                            path.unshift(`${tagName}${id}${classNames}`);
                            currentNode = currentNode.parentElement;
                        }

                        hoverDetailsContainer.textContent = path.join(" > ");
                    }
                });

                iframeWindow.document.addEventListener("mouseout", function () {
                    if (isInspecting) {
                        hoverDetailsContainer.textContent = "Hover over elements to inspect.";
                    }
                });
            };
        } catch (error) {
            alert("There was a problem making the request in 'no-cors' mode.");
            console.error(error);
        }
    }

    previewButton.addEventListener("click", loadPreview);

    toggleInspectButton.addEventListener("click", function () {
        isInspecting = !isInspecting;
        if (isInspecting) {
            hoverDetailsContainer.textContent = "Inspecting mode enabled. Hover over elements.";
        } else {
            hoverDetailsContainer.textContent = "Inspecting mode disabled.";
        }
    });
});

Example usage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Preview</title>
    <!-- Add Bootstrap CSS link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- Add custom CSS file -->
    <link href="static/styles.css" rel="stylesheet">
    
</head>
<body>
        <div class="container mt-5">
        <h1>Website Preview</h1>
        <div class="input-container">
            <input placeholder="Enter Website URL" type="text" class="input form-control" id="url-input">
            <button class="button" id="preview-button">Preview</button>
            <button class="button" id="toggle-inspect-button">Toggle Inspect</button>

          </div>

        <div id="preview-container" class = "preview-container">
            <!-- Website preview will be displayed here using an iframe -->
        </div>

        <div id="hover-details">
            <!-- Element details will be displayed here when hovering over elements in the preview -->
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="static/preview.js"></script>
</body>
</html>

Implementing Element Inspection Within an Iframe Using JavaScript while avoiding CORS

0 Answers0