React.js keamanan lintas domain popup OAuth

Saya tertarik dengan cara menerapkan OAuth di React menggunakan popup ( window.open).

Misalnya saya punya:

1. mysite.com - ini tempat saya membuka popup.
2. passport.mysite.com/oauth/authorize - muncul.

Pertanyaan utamanya adalah bagaimana membuat koneksi antara window.open(popup) dan window.opener(seperti yang diketahui window.opener adalah null karena keamanan lintas domain sehingga kami tidak dapat menggunakannya lagi).

⇑ window.openerdihapus setiap kali Anda menavigasi ke host yang berbeda (untuk alasan keamanan), tidak ada jalan lain. Satu-satunya pilihan adalah melakukan pembayaran dalam bingkai jika memungkinkan. Dokumen teratas harus tetap di host yang sama.

Skema:

Solusi yang memungkinkan:

1. Periksa jendela yang terbuka menggunakan yang setIntervaldijelaskan di sini .
2. Menggunakan penyimpanan silang (tidak layak imho).

Jadi apa pendekatan terbaik yang direkomendasikan di tahun 2019?

Pembungkus untuk React - https://github.com/Ramshackle-Jamathon/react-oauth-popup

Disarankan oleh Khanh TO . Munculan OAuth dengan localStorage. Berdasarkan react-oauth-popup .

Skema:

Kode:

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

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;

Saya pernah mengalami masalah pada alur masuk oauth saya dengan bug window.open/window.opener di ms-edge

Aliran saya sebelum masalah ini

• Pada tombol login klik buka popup
• Setelah berhasil login, aplikasi oauth mengalihkan ke halaman domain saya
• Kemudian saya memanggil fungsi dari jendela induk dari dengan di dalam popup (window.opener.fn) dengan data dari respon oauth dan jendela induk kemudian menutup jendela popup anak

Aliran saya setelah masalah ini

• Pada tombol login klik buka popup
• Buat setinterval dalam kasus (window.opener tidak ditentukan)
• Setelah berhasil login, aplikasi oauth mengalihkan ke halaman domain saya
• Periksa apakah window.opener tersedia kemudian lakukan # 3 dari alur di atas dan hapus Interval
• Jika window.opener tidak tersedia maka karena saya berada di halaman domain saya, saya mencoba mengatur penyimpanan lokal dan mencoba membaca penyimpanan lokal dari dalam fungsi setInterval di jendela induk kemudian menghapus penyimpanan lokal dan setInterval dan melanjutkan.
• (untuk kompatibilitas mundur) Jika penyimpanan lokal juga tidak tersedia, setel cookie sisi klien dengan data dengan waktu kedaluwarsa singkat (5-10 detik) dan coba baca cookie (document.cookie) di dalam fungsi setInterval di jendela induk dan memproses.