How to resolve "frame blocked ... cross origin .. " error when origin is actually the same?

Question

A pop up window is opened from the TBA file in the sidebar.

An error is caused by trying to point to the json global variable in sidebar opener from the popup, which is where the origin gets confused I guess.

What’s the value of the `src` attribute of the target iframe element? The error message doesn’t show the origin of the target iframe. Instead it just says, *“Blocked a frame with origin "`http://glasier.hk`" from accessing a cross-origin frame.”* Period. The *“at `http://glasier.hk/blazer/model/dore.js:6:19`”* part is indicating to you the location of the place in you code that’s trying to access the cross-origin iframe. — sideshowbarker, Jun 09 '19 at 21:48
Ah I see! it must be: 'https://cors-anywhere.herokuapp.com/http://glasier.hk/cors/tba.html' - see https://stackoverflow.com/questions/56475790/how-to-deal-with-access-control-allow-origin-for-mydrive-files?noredirect=1#comment99544365_56475790. So if I cors enabled my site, I would not need 'anywhere'. If I found out how to do that will it work then? — Chris Glasier, Jun 10 '19 at 03:14
Of course it is not that ... it is Google's iframe that is buried in a table cell deep down the DOM hierarchy ... sorry — Chris Glasier, Jun 12 '19 at 11:51
I would like to provide an answer, even if the question was a bit off. I can now pass objects back and forth between sidebar html and popup window, using window.postMessage(), as can be seen from the snapshot above. An answer would make this experience available to others — Chris Glasier, Jun 14 '19 at 10:43

score 0 · Accepted Answer · answered Jun 14 '19 at 13:19

As you can see from the screenshot I have been able to transfer a json object from the TBA interface in the sidebar to the popup window and vice versa. window.postMessage() did the trick. Not as good as having nset (the hierarchy of named sets) in the parent of iframes but workable I think. Maybe the nset can be split into shared and responsibility packets for greater speed and flexibility.

Not just a picture; here is the code:

In popup

window.addEventListener("message", receiveMessage, false);

function start(){
  $(document).ready(function(){
    root = '1grsin';
    trial = 'msm4r';
    orig = 'ozs29';
    code = orig;
    path = "https://api.myjson.com/bins/"+code;
    $.get(path)
   .done((data, textStatus, jqXHR)=>{
     nset = data;
     opener.postMessage(nset,"https://n-rxnikgfd6bqtnglngjmbaz3j2p7cbcqce3dihry-0lu-script.googleusercontent.com");
   })
  })
}

    function receiveMessage(event) {
      console.log(event.data);
      $("#notice").html("Origin: "+ event.origin)
    }

In TBA in sidebar

window.addEventListener("message", receiveMessage, false);

var popup;

function openMonitor(nset){
   var params = [
      'height=400',
      'width=400'
   ].join(',');
    let file = 'http://glasier.hk/blazer/model/model.html';
    popup = window.open(file,'popup_window', params); 
    popup.moveTo(100,100);
  }

  function receiveMessage(event) {
    console.log("origin: " +event.origin);
    console.log(event.data);
    popup.postMessage(nset, "http://glasier.hk");
  }

How to resolve "frame blocked ... cross origin .. " error when origin is actually the same?

1 Answers1