iframe embedding – CSP check – Blancer.com Tutorials and projects

the aim of this very simple code is requesting an endpoint from the user, create an iframe tag and embedding the endpoint. Later, it will try and check whether the endpoint got blocked due to CSP.

I’m currently having issue identifying the bad/good embedding of the endpoint, I think i’m missing something since the messages that are being printed out are wrong (when CSP exists, it still print out the iframe was embedded successfully).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<style>
----REMOVED---
</style>
</head>
<body>

<div class="container">
    <div class="input-container">
        <input type="text" id="endpoint" placeholder="Enter Endpoint URL...">
        <button id="embedButton">Embed</button>
    </div>
    <div id="iframeContainer"></div>
    <div id="message" class="message"></div>
</div>

<script>
document.getElementById('embedButton').addEventListener('click', embedIframe);
document.getElementById('endpoint').addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
        embedIframe();
    }
});

function embedIframe() {
    console.clear();
    var endpoint = document.getElementById('endpoint').value;
    var iframe = document.createElement('iframe');
    iframe.src = endpoint;
    iframe.setAttribute('width', '100%');
    iframe.setAttribute('height', '600');
    var container = document.getElementById('iframeContainer');
    container.innerHTML = '';
    container.appendChild(iframe);

    var timeout = setTimeout(function() {
        displayMessage('Iframe took too long to load or was blocked by CSP.', 'error');
        iframe.src = ''; 
    }, 5000);

    iframe.onload = function() {
        clearTimeout(timeout); 
        displayMessage('Iframe loaded successfully', 'success');
    };

    iframe.onerror = function() {
        clearTimeout(timeout); 
        displayMessage('Error loading iframe. Possible CSP issue.', 'error');
    };

    window.addEventListener('error', function(event) {
        if (event.message && event.message.includes('Content Security Policy')) {
            clearTimeout(timeout);
            displayMessage('CSP error: ' + event.message, 'error');
        }
    }, true);
}

function displayMessage(message, type) {
    var messageDiv = document.getElementById('message');
    messageDiv.className = 'message ' + type;
    messageDiv.textContent = message;
    messageDiv.style.display = 'block';
}
</script>

</body>
</html>