dozoisch / dozoisch/react-async-script

Wrong window context when using an iFrame

オープン
#24 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
177
フォーク
29
PR マージ指標
30日以内にマージされた PR はありません

説明

Hi !
I am using the [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha) lib as well as [react-frame-component](https://github.com/ryanseddon/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](https://github.com/dozoisch/react-google-recaptcha/issues/65)) 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 :

```js
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 (


{ ... }


);
}
}

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 (

{ ... }
{children}

);
};

const Router = ({ history }) => {
return (



{ ... }



);
};

// `app` is the button my sdk creates and mounts into the client's webpage
ReactDOM.render(


,
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 :)

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

リポジトリのファイルもテストも指定されていません。まず react-async-script の非同期スクリプト読み込みパスを追跡し、react-frame-component 内で react-google-recaptcha のケースを再現します。呼び出し元が iframe の window/document コンテキストを選択でき、報告されたユースケースがそこで動作すれば作業完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
frontend, web-dev
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
28/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。