Why are two files in the same folder treated as cross-resource?

Question

I've added an iframe to an Rmarkdown document. The iframe is an HTML file that is stored in the same folder as my .Rmd file and the HTML file it generates. I would like to determine the appropriate height/width to display the iframe based on the HTML file dimensions. I should be able to use iframe.contentWindow.document.body.scrollWidth/iframe.contentWindow.document.body.scrollHeight to do this.

Here is an example of what I tried in my Rmd file:

<iframe src="./test_file.html" style="display:block; border:none;
width:100%;" id="test"></iframe>

```{js}

var iframe = document.getElementById('test');
iframe.addEventListener('load', function(event) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight;
    iframe.width = iframe.contentWindow.document.body.scrollWidth; });

```

However the contentWindow value is null for the iframe. When I look at the HTML page generated by Rmarkdown with Developer Tools, I see the error:

Uncaught DOMException: Blocked a frame with origin "https://website.host.name" from accessing a cross-origin frame. at HTMLIFrameElement. (https://website.host.name/R/Rmd_test/generate_preview.html:1636:42)

So it seems that the files are being treated as cross-origin resources rather than coming from the same-origin. I'm not sure why that is since they are both located in the same folder and their location.protocol, location.host, & location.port values are the same (port is null for both, which from my reading should be fine).

I did find a workaround to get the height/width using postMessages to have the pages communicate, but I'd like to figure out how to have the iframe content recognized as same-resource. Any ideas what I'm doing wrong/missing?

I don't think this is a duplicate of SecurityError: Blocked a frame with origin from accessing a cross-origin frame. I used that post to figure out my workaround to get the height/width. The accepted answer notes that the origin is considered to be different if the protocol, hostname, or port differs between the two resources. In my case, when I open each HTML file, that information is the same. Why are they being treated as cross resource?

Why are two files in the same folder treated as cross-resource?

0 Answers0