Oidc-client-js: Uncaught TypeError: Cannot read property 'postMessage' of null

Created on 26 Oct 2016 · 9Comments · Source: IdentityModel/oidc-client-js

When I run my Aurelia application, I get this error: Uncaught TypeError: Cannot read property 'postMessage' of null. After some examination, I found that this problem originates in the CheckSessionIFrame.prototype.start function, in the _this._frame.contentWindow.postMessage(_this._client_id + " " + _this._session_state, _this._frame_origin); call. When I put a breakpoint on that line, the contentWindow field is null (the this._iframe field is _not_), hence the error.

At first I thought that it was some kind of CORS problem, so I tried to change the src of the iframe (to which the messages are posted) to a local URL (the same host and port the application runs on), but the error was not fixed.

If I look at the network tab, I can see that the iframe's src is correctly loaded, returning the checksession HTML page I expect it to return.

The error occurs on Chrome (Version 54.0.2840.71), Firefox (49.0.2) and IE (11.0.9600.18449). The rest of the OIDC functionality works perfectly in my app, I can login, renew, logout and such.

Any idea what I am doing wrong?

Source

ErikSchierboom

Most helpful comment

Nevermind, it was a pretty silly mistake. Aurelia was replacing the complete body element's contents, hence the disappearing iframe. The fix was to create a child div element where Aurelia puts its contents. Now everything works!

ErikSchierboom on 26 Oct 2016

👍7

All 9 comments

Addendum: I don't get this error if I use a non-Aurelia website. It thus has to do something with Aurelia, any idea where to look?

ErikSchierboom on 26 Oct 2016

👍7

@ErikSchierboom
Thank a lot for your comment. I spent couple hours to figure out why this exceptions is present in my app and when I read your solution then "a-ha!" moment appeared. I added <div> as you suggested and it works!

wcislom on 4 Dec 2016

Good to hear!

ErikSchierboom on 4 Dec 2016

Just ran into the same issue. Thanks!

RichiCoder1 on 1 Feb 2017

Hi, sorry if this is a silly question, but where did you add the div?

Thanks in advance

stuartbloom on 16 Mar 2017

👍2

@stuartbloom So normally you application would look like this:

<body aurelia-app="main">
   <!-- Some placeholder content -->
   <script src="scripts/main.js" data-main="aurelia-bootstrapper"/>
</body>

but what you'd do instead is:

<body>
  <div aurelia-app="main">
    <!-- Some placeholder content -->
    <script src="scripts/main.js" data-main="aurelia-bootstrapper"/>
  </div>
</body>

Because aurelia automatically replaces the innerHtml of whatever [aurelia-app] is on.

RichiCoder1 on 17 Mar 2017

👍3

@RichiCoder1 thats great, thanks a mil; saved me a heap of time :)

stuartbloom on 17 Mar 2017

👍1

Adding the div worked for me. Now I can finally close this user story.