2

Initial page is on port 3001 (no server, CRA frontend) there one can open a pop-up window that points to 3000 port (Rails server).

I'm trying to set localStorage value in parent window (opener).

<<-HEREDOC
  window.opener.localStorage.setItem('authorization', 'Bearer #{@jwt_token}');
  window.close();
HEREDOC

But I'm getting

enter image description here

Do you think there's a way I can add storage value from popup to opener?

David
  • 199
  • 1
  • 13
  • 1
    No. the best you can do is send the opener a message. The opener would then set it's own storage. – Randy Casburn Apr 17 '18 at 00:04
  • @RandyCasburn thanks, I'll look into that. – David Apr 17 '18 at 00:05
  • It is the HTML5 Messaging API. Very straightforward – Randy Casburn Apr 17 '18 at 00:05
  • 1
    this is one form, but an implementation can be much easier if you don't want all this infrastructure: https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging – Randy Casburn Apr 17 '18 at 00:08
  • @RandyCasburn thanks again, I'd accept that answer. – David Apr 17 '18 at 00:10
  • I've answered with a direct example from MDN. – Randy Casburn Apr 17 '18 at 00:11
  • @RandyCasburn yes, I just can't upvote (my rep. is too low for upvoting comments) or click on 'accept answer'. Anyways, thank you. – David Apr 17 '18 at 00:13
  • I'll help - I uprooted your question. It was well formed and led me directly to an answer. So thanks for that! – Randy Casburn Apr 17 '18 at 00:15
  • Possible duplicate of [SecurityError: Blocked a frame with origin from accessing a cross-origin frame](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) – Heretic Monkey Apr 17 '18 at 00:16
  • If you just search of the error message (and including the error message as text rather than an image would make that easier to search for), you will likely find an answer. – Heretic Monkey Apr 17 '18 at 00:17

1 Answers1

3

Here is a simple example from MDN that shows how to implement Cross Document Messaging. It is your use case as far as I can tell:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Example

Here is the relevant quote that explains why this alternative is important to consider:

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

Randy Casburn
  • 11,404
  • 1
  • 12
  • 26
  • Please don't answer with a link to somewhere else. Answers should contain enough information to allow people to get the answer without going to another site. See [answer], especially the section titled "Provide context for links". – Heretic Monkey Apr 17 '18 at 00:19
  • @MikeMcCaughan - thanks for the feedback, I've updated the response. The context for the alternative was provided (this is your use case), but I did not quote the page I linked to. So this should satisfy your concern. Please consider removing your downvote. – Randy Casburn Apr 17 '18 at 00:23