OAuth弹出式跨网域安全React.js [英] OAuth popup cross-domain security React.js
问题描述
我对如何使用弹出窗口(window.open
)在React中实现OAuth感兴趣.
I'm interested in how to implement OAuth in React using popup (window.open
).
例如,我有:
-
mysite.com
-这是我打开弹出窗口的地方. -
passport.mysite.com/oauth/authorize
—弹出窗口.
mysite.com
— this is where I open the popup.passport.mysite.com/oauth/authorize
— popup.
主要问题是如何在window.open
(弹出窗口)和window.opener
之间建立连接(众所周知,由于跨域安全性,window.opener为null,因此我们不能再使用它了.)>
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.
方案:
可能的解决方案:
- 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.tsx
app.tsx
import 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!