OAuth弹出式跨网域安全React.js

The main question is how to create connection between window.open (popup) and window.opener (as it's known the window.opener is null due to cross-domain security therefore we can't use it anymore). 每当导航到其他主机时(出于安全原因)，⇑window.opener都会被删除，无法绕开它.如果可能的话，唯一的选择应该是在框架内付款.最重要的文档需要保留在同一主机上. ⇑ window.opener is removed whenever you navigate to a different host (for security reasons), there is no way around it. The only option should be doing the payment in a frame if it is possible. The top document needs to stay on the same host. 方案: 可能的解决方案:使用setInterval在此处中所述，检查打开的窗口. 使用交叉存储(不值得恕我直言).Check an opened window using setInterval described here.Using cross-storage (not worth it imho ).那么，2019年最好的推荐方法是什么?So what's the best recommended approach in 2019? React的包装- https://github.com/Ramshackle-Jamathon/react- oauth-popup推荐答案由 Khanh TO 建议.带有localStorage的OAuth弹出窗口.基于反应-oauth-popup .Suggested by Khanh TO. OAuth popup with localStorage. Based on react-oauth-popup. 方案: 代码: oauth-popup.tsx:oauth-popup.tsx:import React, {PureComponent, ReactChild} from 'react'type Props = { width: number, height: number, url: string, title: string, onClose: () => any, onCode: (params: any) => any, children?: ReactChild,}export default class OauthPopup extends PureComponent<Props> { static defaultProps = { onClose: () => {}, width: 500, height: 500, url: "", title: "" }; externalWindow: any; codeCheck: any; componentWillUnmount() { if (this.externalWindow) { this.externalWindow.close(); } } createPopup = () => { const {url, title, width, height, onCode} = this.props; const left = window.screenX + (window.outerWidth - width) / 2; const top = window.screenY + (window.outerHeight - height) / 2.5; const windowFeatures = `toolbar=0,scrollbars=1,status=1,resizable=0,location=1,menuBar=0,width=${width},height=${height},top=${top},left=${left}`; this.externalWindow = window.open( url, title, windowFeatures ); const storageListener = () => { try { if (localStorage.getItem('code')) { onCode(localStorage.getItem('code')); this.externalWindow.close(); window.removeEventListener('storage', storageListener); } } catch (e) { window.removeEventListener('storage', storageListener); } } window.addEventListener('storage', storageListener); this.externalWindow.addEventListener('beforeunload', () => { this.props.onClose() }, false); }; render() { return ( <div onClick={this.createPopup)}> {this.props.children} </div> ); }} app.tsxapp.tsximport React, {FC} from 'react'const onCode = async (): Promise<undefined> => { try { const res = await <your_fetch> } catch (e) { console.error(e); } finally { window.localStorage.removeItem('code'); //remove code from localStorage }}const App: FC = () => ( <OAuthPopup url={<your_url>} onCode={onCode} onClose={() => console.log('closed')} title="<your_title>"> <button type="button">Enter</button> </OAuthPopup>);export default App; 这篇关于OAuth弹出式跨网域安全React.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！