I'm currently working on a web application that can display URLs in an iframe. However, I also want to be able to test the URL before showing it in the iframe. The goal is to wait for a response and only display the iframe if there are no errors or if the response header includes 'x-frame-options: DENY'. In cases where there is an error or the header denies displaying in an iframe, I'd like to show an error message instead.
For instance:
const request = new XMLHttpRequest();
request.open("GET", urlToTest, true);
request.send();
When testing this, CORS issues are always encountered as expected. This doesn't replicate our actual intention, which involves:
<iframe id="webiframe" "src"="urlToTest></iframe>
I then attempted the following:
this.webiframe acts as a reference of the <iframe>
this.webiframe.onload = function () {
console.log('iframe ONLOAD');
}.bind(this);
this.webiframe.onerror = function () {
console.log('iframe ONERROR');
}.bind(this);
this.webiframe.contentDocument.onreadystatechange = function () {
this.iFrameEvent();
}.bind(this);
this.webiframe.contentDocument.addEventListener('DOMContentLoaded', this.iFrameEvent);
this.webiframe.contentDocument.addEventListener('load', this.iFrameEvent);
this.webiframe.contentDocument.addEventListener('onreadystatechange ', this.iFrameEvent);
The contentDocument's event listeners are not triggered. Only the onload event of the iframe reference is fired.
My main question is:
Is there a way to gather information or perform testing on an iframe when setting its 'src' attribute? Specifically, I would like to know if the URL is functioning correctly and, if not, what the issue might be through response headers?