I’m writing a very simple Chrome Extension that aims to check whether an endpoint could
be embedded as an Iframe –
If it is – write “Success” in green in dev console, if not write it in red.
More context –
My goal is here to check whether an iframe could be embedded in my local extension without violating the CSP.
So once the user click on “Check Endpoint” the checking process will go in the background.
Currently i’m using ChatGPT, and my code did append a new iframe with the designated endpoint to the page, but than either it –
Blocked by inline script policy or providing False Positive whether it got embedded or not.
This is the current code the ChatGPT provide me with –
function checkEndpointCommunication(endpoint, button) {
console.log(`Checking communication for endpoint: ${endpoint}`);
let communicationEstablished = false;
// Create an iframe and embed it
const iframe = document.createElement("iframe");
iframe.src = endpoint;
iframe.style.display = "none"; // Hide the iframe from view
document.body.appendChild(iframe);
// Timeout to handle embedding failures
const timeout = setTimeout(() => {
if (!communicationEstablished) {
console.warn(`[TIMEOUT] Iframe communication timeout for: ${endpoint}`);
button.classList.remove("default", "green");
button.classList.add("red"); // Mark as failure
cleanup();
}
}, 5000); // 5-second timeout
// Cleanup function
const cleanup = () => {
if (iframe.parentNode) iframe.remove();
clearTimeout(timeout);
};
// Iframe onload handler
iframe.onload = () => {
clearTimeout(timeout); // Cancel timeout if iframe loads
try {
// Try to access the iframe content
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const iframeBody = iframeDocument.body;
if (iframeBody) {
console.log(`[INFO] Iframe content loaded successfully for: ${endpoint}`);
communicationEstablished = true;
button.classList.remove("default", "red");
button.classList.add("green"); // Mark as success
} else {
console.warn(`[FAILURE] Iframe content is inaccessible for: ${endpoint}`);
button.classList.remove("default", "green");
button.classList.add("red"); // Mark as failure
}
} catch (err) {
console.warn(`[ERROR] Iframe access failed for: ${endpoint}, Error: ${err.message}`);
button.classList.remove("default", "green");
button.classList.add("red"); // Mark as failure
} finally {
cleanup();
}
};
// Iframe onerror handler
iframe.onerror = () => {
console.warn(`[FAILURE] Iframe failed to load for: ${endpoint}`);
button.classList.remove("default", "green");
button.classList.add("red"); // Mark as failure
cleanup();
};
}
