Passing web3.ethereum to a cross-origin iframe

[fwx5618177]

Topic: Passing web3.ethereum to a cross-origin iframe

Description:

• I want to try to unify the external parent window.ethereum with the window.ethereum inside the iframe to avoid triggering authorization.

Questions:

1. Is this method currently supported?
2. Can postMessage be used to solve this issue?
3. Can a proxy server be used to set allow-origin in the response to solve this problem?

Detail: Post message error.

1. If I directly convert window.ethereum to a json, it mentioned this error.

2. Just changed some values, but it displayed the fault.

Parent:

    const ethereum = (window as any)?.ethereum
    const data = {
      selectedAddress: ethereum.selectedAddress,
      chainId: ethereum.chainId,
      networkVersion: ethereum.networkVersion,
      _state: {
        ...ethereum._state,
      },
    }
    ide.current.contentWindow.postMessage(
      {
        kind: 'parent-ethereum-provider',
        // provider: parentEthereum,
        provider: JSON.stringify(data),
      },
      '*'
    );

child:

if (e.source && e.data.kind === "parent-ethereum-provider") {
          windowAny.parentEthereum = {
            ...windowAny.ethereum,
            ...parsed,
          };
}

3. I write a function to handle item 1 error.

Parent:

  function serialize(obj: any, cache = new WeakSet()): any {
    if (typeof obj !== 'object' || obj === null) {
      return obj;
    }

    if (cache.has(obj)) {
      return '[Circular]';
    }

    if (Array.isArray(obj)) {
      cache.add(obj);
      return obj.map((item: any) => serialize(item, cache));
    }

    const result: any = {};

    cache.add(obj);

    for (const [key, value] of Object.entries(obj)) {
      result[key] = serialize(value, cache);
    }

    return JSON.stringify(result);
  }

child:

const parsed = parse(JSON.parse(e.data.provider), (key, value) => {
            if (typeof value === 'object' && value !== null) {
              return new Proxy(value, {
                get(target, prop, receiver) {
                  if (prop in windowAny.ethereum) {
                    return windowAny.ethereum[prop];
                  }
                  return Reflect.get(target, prop, receiver);
                }
              });
            }
            return value;
          });

result: