dozoisch / dozoisch/react-async-script
Wrong window context when using an iFrame
- 主要言語
- 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