Allow overwrite of window.top

[cpojer]

We have a few tests in jest that attempt to simulate a parent-child relationship between a window and the window of an iframe. With recent versions of jsdom it seems like it isn't possible to overwrite window.top any longer. Are you guys interested in supporting this use case? :)

[domenic]

You should be able to do so using Object.defineProperty without any issue...

[domenic]

(Alternately, jsdom's iframe support is pretty solid, so you might be able to use that directly)

[domenic]

Let me know if anything isn't working with defineProperty! Otherwise, closing for now.

[cpojer]

Sorry for taking so long to get back to you, it seems like defineProperty doesn't work in this case, which is why I opened this issue in the first place (although, I did forget whether I tried this before). Unfortunately for now I can't use the iframe support in jsdom – I need my code to run in an iframe-like environment and I'm not ready yet to enable env switching in jest.

I tried this:

      if (!isTop) {
        console.log('top is set before?', !!window.top);
      }
      Object.defineProperty(window, 'top', {
        writable: false,
        value: null,
      });
      if (!isTop) {
        console.log('top is set?', !!window.top);
      }

And window.top is always set and equals window no matter what I use as a value. Using get doesn't work either.

[domenic]

Investigating. This appears to be an io.js bug with the global/global proxy. Object.getOwnPropertyDescriptor(window, "top") is returning a data descriptor, not an accessor descriptor, which is not good news... :-S

[domenic]

Commenting out the line

        this._ownerDocument._defaultView._globalProxy = vm.runInContext("this", this._ownerDocument._global);

in level1/core.js "fixes" it, but I have no idea why...

[cpojer]

woah, no idea what is going on here.

[domenic]

Yeah just kind of giving live updates as I debug... unfortunately this is not as easy as I'd hoped. I'm hoping to find a workaround at the very least though.

[domenic]

OK, I think I see the issue.

Any "contextified" object, whose getters/setters are handled via the V8 named property callbacks, can only have data properties, it seems. That is, when you ask it what properties it has, it will always tell you it has a data property. Even if we've put a getter on the object.

Chrome gets this wrong too. It has data properties only on window, not getters. That work as actually still under way. And presumably Chrome fixing itself in this way will bring along the relevant fixes to V8.

OK, now about that workaround...

[cpojer]

When you say data property, do you mean a regular property using value in defineProperty or a regular assignment if the property is not further specified?

[domenic]

Both are the same?

[cpojer]

yes, sorry, I mean whether "data property" is what this kind of value on an object is called.

[domenic]

By data property I mean any property which reports itself as { value, enumerable, configurable, writable } when queried using Object.getOwnPropertyDescriptor.

[cpojer]

👍 got it.

[domenic]

OK, the following workaround works. Now I need to figure out how to translate it into something that doesn't use private state and preferably doesn't expose this ridiculous global/global proxy mess to the world:

Object.defineProperty(document._global, "top", {
  get() {
    return "foo";
  }
});

console.log("changed?", window.top === "foo");

document._global is supposed to be never seen by anyone and only used for running scripts. Ugh.

[domenic]

Filed a Node bug. But it's not looking easy to fix.

The best bet may be for jsdom to stop using getters for these and go back to data properties. I want a day to think it over, but that seems likely to work.

[domenic]

OKKKKK another awesome factoid: the top property (as well as the window, document, and location properties) are marked [Unforgeable] in the spec. Which means they're supposed to be non-configurable anyway.

So that argues for a jsdom.reconfigureWindow(window, { top, window, document, location }) type API, used only for test-related edge cases like this, which bypasses the Unforgeability from the outside, while still maintaining it while inside the DOM scripts themselves.

There's still the separate problem of top and friends showing up as data descriptors, and not accessor descriptors. But we don't necessarily need to fix that now. Behind the scenes reconfigureWindow can do _global-related hacks for now, and in the future just change the values returned by the getters.

[amelzer]

Sorry for digging this out again. Ist there a similar solution for window.parent?

[domenic]

You can just do window.parent = foo or Object.defineProperty(window, "parent", ...)

[amelzer]

That's what I thought, but it doesn't seem to work that way

        window.parent = 'foo';
        console.log(window.parent);
/** prints:
      Window {
        Buffer: 
         { [Function: Buffer]
           poolSize: 8192,
           from: [Function],
           alloc: [Function],
           allocUnsafe: [Function],
           allocUnsafeSlow: [Function],
           isBuffer: [Function: isBuffer],
           compare: [Function: compare],
           isEncoding: [Function],
           concat: [Function],
           byteLength: [Function: byteLength],
           [Symbol(node.isEncoding)]: [Function] },
        process: 
         { title: '/usr/local/bin/node',
           version: 'v8.1.3',
           moduleLoadList: 
...etc
*/

Might be because I trying to do it in jest, though.

[domenic]

Ah, right, we don't correctly implement [Replaceable]. I'll file another issue for that. In the meantime, Object.defineProperty should work: https://runkit.com/embed/rwmx7ykc0xrq

[Kle0s]

@domenic I actually received TypeError: Cannot redefine property: top when ran your suggestion :/

[ArnaudBuchholz]

Hello, found this thread while troubleshooting window.top in an iframe. I had to go with window.parent instead, any plan to fix this ?

[AlanSl]

I get TypeError: Cannot redefine property: top if I use Object.defineProperty to redefine top as a property, but this works:

      Object.defineProperty(global, 'top', {
        get() {
          return {}
        },
        set() {
          return {}
        }
      })

The setter is necessary else I get this error:

TypeError: Cannot set property top of [object Window] which has only a getter

---

It's also possible to simulate being inside a restricted cross-origin iframe (to avoid nasty surprises in production if someone forgot to do window.top !== window.self inside a try-catch) by throwing an error in the getter, like this:

  describe('in iframe', () => {
    const originalWindowTop = window.top as Window
    beforeAll(() => {
      Object.defineProperty(global, 'top', {
        get() {
          throw new Error('Simulating being inside a cross-domain iframe')
        },
        set() {
          return null
        }
      });
    })
    afterAll(() => {
      // Bypass the getter and setter when restoring the property
      Object.defineProperty(global, 'top', originalWindowTop)
    })
    // do some tests

[tinytinystone]

Hi! I also received TypeError: Cannot redefine property: top error. I tried @AlanSl solution, but it returns same...

[winjeysong]

I have to downgrade to v20 to overwrite some properties...

refer to: https://github.com/jsdom/jsdom/releases/tag/21.0.0

[winjeysong]

TypeError: Cannot redefine property

I have to downgrade to v20 to overwrite some properties...

refer to: https://github.com/jsdom/jsdom/releases/tag/21.0.0

After downgrading to v20, new features are not supported and result in new problems... So I have to fork the lastest version of jsdom and publish a new package.
If anyone wants to overwrite built-in properties with jsdom v24, try this: https://www.npmjs.com/package/@new-bit/jsdom