Question 71952 in CSS Question posted in
Some basic documentation can be found here.

Iframe origin error in Safari due to CSS rule

I have replicated an error as shown below in Safari:

Blocked a frame with origin "thepagedomain" from accessing a frame with origin "theiframesourcedomain". Protocols, domains, and ports must match.

With the following very simple page:

<html><head>
<style>
#iframe{
    
    width: 100%;
    height: calc(100% - 49px);

    
}
</style>        
</head>
<body>
    <iframe src="https://test.com/" id="iframe"></iframe>   
</body>
</html>

Where the content of the iframe is in this case empty, usually it has a full page.

The weird thing this error goes away if the width or height percentages are set below 90%.

I assume this is some kind of bug and nothing to worry about but is there anything I can do to suppress the error as it is confusing things with other genuine errors of this kind.

Tags:

2

Answers


  1. 0

    you can try adding a sandbox like this:

    <html>
<head>
<style>
#iframe{
    width: 100%;
    height: calc(100% - 49px);
}
</style>
</head>
<body>
    <iframe src="https://test.com/" id="iframe" sandbox="allow-same-origin"></iframe>   
</body>
</html>
    Login or Signup to reply.
  2. 0

    Safari’s handling of iframe sizing and cross-origin content may be causing the issue. If an iframe is set to 100% width and height, Safari may not accurately calculate its content’s size, resulting in the cross-origin error.

    Is that possible to write styles in px? like that for example

    will you be seeing an error?

    <iframe src="https://test.com/" id="iframe" style="width: 100%; height: 500px;"></iframe>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search