javascript : Permission denied to access property on cross-origin object despite having cors enables

Question

I have a website "mydomain.com" including an iframe on from a different subdomain "sub.mydomain.com" containt a wordpress page. Some js in the page hooks some buttons of the iframe :

        var target_height = parseInt(obj.contentWindow.document.body.scrollHeight);
    obj.style.height = target_height + 'px'; 
    var iframeOffset = $(obj).offset();

I have configured nginx on "sub.mydomain.com" to include CORS headers this way :

    location ^~ /wordpress {
            add_header 'Access-Control-Allow-Origin' "*" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT, HEAD';
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization,Origin,X-Requested-With,Accept,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;


            index index.php;
            alias /usr/share/webapps/wordpress/;

            if (!-e $request_filename) { rewrite ^ /wordpress/index.php last; }

            location ~ \.php$ {
                    if (!-f $request_filename) { return 404; }
                    include fastcgi.conf;
                    include fastcgi_params;
                    #fastcgi_intercept_errors on;
                    #fastcgi_buffers 16 16k;
                    #fastcgi_buffer_size 32k;
                    fastcgi_index index.php;

                    fastcgi_param SCRIPT_FILENAME $request_filename;
                    fastcgi_pass php;

            }

            location ~ \.(js|css|png|jpg|jpeg|gif|ico)$ {
                    expires max;
            }
    }

And with curl I can see the CORS header is included :

curl https://sub.mydomain.com/wordpress/ -svo.

{ [5 bytes data]
< HTTP/1.1 200 OK
< Server: nginx/1.14.0
< Date: Wed, 22 May 2019 14:51:55 GMT
< Content-Type: text/html; charset=UTF-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< X-Powered-By: PHP/7.2.9
< Link: <https://sub.mydomain.com/wordpress/wp-json/>; rel="https://api.w.org/"
< Link: <https://sub.mydomain.com/wordpress/>; rel=shortlink
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT, HEAD
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Headers: User-Agent,Keep-Alive,Content-Type,Authorization,Origin,X-Requested-With,Accept,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
< 
{ [15703 bytes data]
* Failed writing body (0 != 7952)
* Failed writing data
* Closing connection 0
} [5 bytes data]
* TLSv1.2 (OUT), TLS alert, close notify (256):
} [2 bytes data]

Despite all this i still have a javascript error concerning the JS code :

SecurityError: Permission denied to access property "document" on cross-origin object line:84

which corresponds to

var target_height = parseInt(obj.contentWindow.document.body.scrollHeight);

EDIT : here is the output of curl -i -X OPTIONS https://sub.mydomain.com/wordpress/ :

HTTP/1.1 200 Connection established
Set-Cookie: IPOCDSERVERID=id_srv-01; path=/

HTTP/1.1 405 Not Allowed
Server: nginx/1.14.0
Date: Wed, 22 May 2019 15:43:49 GMT
Content-Type: text/html
Content-Length: 173
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: User-Agent,Keep-Alive,Content-Type,Authorization,Origin,X-Requested-With,Accept,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range

<html>
<head><title>405 Not Allowed</title></head>
<body bgcolor="white">
<center><h1>405 Not Allowed</h1></center>
<hr><center>nginx/1.14.0</center>
</body>
</html>

have you tried `curl -i -X OPTIONS https://sub.mydomain.com/wordpress/` — Shawn C., May 22 '19 at 15:34
I added the output of that command in the edit at the end of my post, what is it I should be looking for in this? — aze, May 22 '19 at 15:45
So when you do a pre-flight check it returns a 405 which means it failed. — Shawn C., May 22 '19 at 15:46
CORS has no effect on cross-domain communication between iframes. — Quentin, May 22 '19 at 15:50
@Quentin so there is no way I can do what I wanted to achieve ? Except changing the domain of the iframe's domain — aze, May 24 '19 at 09:32
@aze — There is a way. It is explained in the duplicate question. — Quentin, May 24 '19 at 09:33
@DimitriosVerveridis — Linked from the massive blue box at the top of the page. — Quentin, Aug 08 '22 at 14:25
Oh, you said *my* answer. I didn't write one. There was a good answer on the duplicate question already. — Quentin, Aug 08 '22 at 14:28
The answers regard the transfer of data, whereas here we want to change the style of the framed website from the parent website. I am stuck for two hours. My website is at 127.0.0.1:80 and the framed is at 127.0.0.1:5832. "document.getElementsByTagName("iframe")[0].contentWindow" -> Restricted http://127.0.0.1:5832/index_2983.html document.getElementsByTagName("iframe")[0].contentWindow.style -> Uncaught DOMException: Permission denied to access property "style" on cross-origin object debugger eval code:1:10 " — Dimitrios Ververidis, Aug 08 '22 at 14:33
I give up, window.postMessage is the only way to go. It adds more code to the pages but nothing else was found. Duplicate also here: https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame — Dimitrios Ververidis, Aug 08 '22 at 14:47

score -2 · Answer 1 · answered May 22 '19 at 15:49

Via https://enable-cors.org/server_nginx.html

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
 }

if you put this in your location it will see that it is a pre-flight request and return instantly with a 204. You will have to play with all of the different headers to get it to what you want.

This won't help. The browser isn't making a preflight request in the first place. — Quentin, May 22 '19 at 15:51

javascript : Permission denied to access property on cross-origin object despite having cors enables

1 Answers1