Wrong window context when using an iFrame

[Manuel-Manoury]

Hi ! I am using the react-google-recaptcha lib as well as react-frame-component in my project in order to create a widget, and I found out that react-google-recaptcha is not usable inside the iframe created by react-frame-component. After a bit of investigation and discussion (see here) it seems that the issue comes from react-async-script, which does not enable us to choose the context (window / document) to use in order to load the script.

Here is a lighter version of my code, to get the idea of how do I use the different libs I mentioned :

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import WidgetFrame from 'react-frame-component';
import { ConnectedRouter } from 'react-router-redux';
import { Route } from 'react-router';
import { Provider } from 'react-redux';

const store = createStore(...);

const SetupView extends React.Component {
  constructor (props) {
   super(props);
   this.handleReCaptchaChanged = () => {
       // stuff
   };
  } 

  render () {
    return (
        <div>
          { ... }
          <ReCAPTCHA
            sitekey={secureKey.key}
            onChange={this.handleReCaptchaChanged}
          />
        </div>
    );
}
}

const Layout = ({ children }) => {
// __IFRAME_CONTENT__ is replaced during the browserify build operation to match a one-line version of a HTML template, which embed custom iframe-scoped style
    return (
       <WidgetFrame
           initialContent='__IFRAME_CONTENT__'
           id='app-iframe'
        >
          { ... }
          {children}
    </WidgetFrame>
    );
};

const Router = ({ history }) => {
    return (
        <ConnectedRouter history={history}>
          <Layout>
            <Route exact path='/' component={...} />
            { ... }
            <Route path='/setup' component={SetupView} />
          </Layout>
        </ConnectedRouter>
    );
};

// `app` is the button my sdk creates and mounts into the client's webpage
ReactDOM.render(
  <Provider store={store}>
    <Router history={history} />
  </Provider>,
  app
);

Can you please take a look to confirm that we did identify the issue correctly, and give us more insight on whether or not the required window/document configuration option will be implemented ?

Thanks for your help :)

[dozoisch]

Hey @Manuel-Manoury, I'll try to look at it tonight. But I really think the window/doc config should be implemented. Since window and document are all used in internal function I think it would be easy to make it use one coming from props and default to the global one.

Since the iFrame lib passes it down through context it seems like it would play well with that.