JSのみでページリダイレクト処理を記述したい

ページへの遷移時にリファラを確認して、
決められたドメイン以外からの遷移の場合はページ遷移させたいという要望があります。

対象のページはReactを利用していますので
componentDidMountに下記のような処理を記述しました。

JavaScript
1  componentDidMount() {
2    const referrer = document.referrer;
3    let isAllow = false;
4    //ACCESS_ALLOW_DOMAIN_LISTには許可するドメインの配列を定義している
5    for (let domain of ACCESS_ALLOW_DOMAIN_LIST) {
6      if (referrer.indexOf(domain) != -1) {
7        isAllow = true;
8        break;
9      }
10    }
11    if (!isAllow) {
12      //指定のドメイン以外からの遷移の場合は、強制的にリダイレクト
13      location.href = 'http://hoge.com/top.html';
14    }

ところが、上記の記述だとページ表示時時に一瞬だけ本来のページが見えてしまい
その後に'http://hoge.com/top.html'に遷移するようになってしまいました。

componentDidMountはrenderの後に呼ばれるため、このような現象になると考え
ならばとcomponentWillMountに上記の処理を記述したところ今度は

document is not defined

のエラーが出てしまいました。

Reactはrenderで仮想DOMを作成するので、
DOMが出来ていない状態だとdocument.referrerは使えないのだろうと考えましたが
ここで手詰まりになってしまいました…。

こういった処理は本来サーバ側で実装するべきだと思いますが、今回は諸事情によりクライアント側のみで対応する必要があります。
もし何かアドバイス等ありましたらご教示いただけますと幸いです。
よろしくお願い致します。

HayatoKamono

2018/03/09 07:50

documentはcomponentWillMountでも参照可能だとは思うのですが、server side renderingなどしていますか？

flaumig

2018/03/09 08:47 編集

コメントありがとうございます。いえ、サーバサイドでは何もしておりません。こちらの確認方法が悪かったのかもしれませんので、もう一度見直してみます。

行動規範の内容に同意します

回答2件

ベストアンサー

Reactの中でやらないでください。
よそ者を追い払いたいなら城の中に招き入れる前に、門前で弾くべきでしょう。

これはA/BテストツールのOptimizelyが使っているテクニックです。
この様にhead要素内にscriptタグをねじ込むと、
一旦JavaScriptの実行が完了するまではDOMのレンダリングがせき止められます。

普段SEOでscriptタグが上にあるとせき止められるから、
</body>タグの直前に書けと言われますが、それを逆に利用しています。

HTML
1<head>
2  <script>
3    (function(){
4      const referrer = document.referrer;
5      let isAllow = false;
6      //ACCESS_ALLOW_DOMAIN_LISTには許可するドメインの配列を定義している
7      for (let domain of ACCESS_ALLOW_DOMAIN_LIST) {
8        if (referrer.indexOf(domain) != -1) {
9          isAllow = true;
10          break;
11        }
12      }
13      if (!isAllow) {
14        //指定のドメイン以外からの遷移の場合は、強制的にリダイレクト
15        location.href = 'http://hoge.com/top.html';
16      }
17    })();
18  </script>
19</head>