スマホネイティブアプリからリダイレクト用のWebページを挟み、リファラー認証ありの外部Webサービスへ接続したい

Question

実現したいこと

スマホネイティブアプリから、外部Webサービスに接続する時（Webブラウザを立ち上げる）、
特定のドメインからの遷移で認証して外部Webサービスに接続させるという要件があります。

ネイティブアプリからの遷移だと、Refererがつかないので、
外部Webサービスに遷移する前に自前に用意したWebページ（認証用のドメインのページ）に遷移してからリダイレクトさせることで、Referer認証させ外部サービスへ接続させるように実装しようと考えてます。

そのリダイレクト用のWebページの実装する際の質問となります。

発生している問題・分からないこと

外部WebサービスへのURLが動的に変化する（クエリパラメータが動的に変化する）ため、
リダイレクト用のWebページへどのようにパラメータを渡して、javascriptでリダレクトさせるかを
実装方法をご教示頂けますと幸いです。

リダイレクト用のWebページのURL: https://dev.xxxx.yyyy.zzzz/index.html?redirect_url=<動的に変化するURL>

index.htmlはAWS APIGW → S3 のどこかに配置しています。

また、セキュリティ的にまずいとか、それよりこの方法がbetterなどあればアドバイスして頂きますと幸いです。何卒宜しくお願い致します。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

cf.) https://www-creators.com/archives/4463 など

補足

随時、補足いたします。

Answer 1

ネイティブアプリ側でエンコード処理が必要
たとえば飛ばすページが「http://localhost/mypage.html?a=123&b=x+y」だとすると
エンコード後は「http%3A%2F%2Flocalhost%2Fmypage.html%3Fa%3D123%26b%3Dx%2By」になる
これを受けるページ「https://dev.xxxx.yyyy.zzzz/index.html」に以下記載

<script>
const usp= new URLSearchParams(location.search);
const href=usp.get("redirect_url");
if(href){
  Object.assign(document.createElement('a'),{href}).click();
}
</script>

そのうえで

https://dev.xxxx.yyyy.zzzz/index.html?redirect_url=http%3A%2F%2Flocalhost%2Fmypage.html%3Fa%3D123%26b%3Dx%2By

にアクセスすればよいでしょう

セキュリティについては「リファラがあればいい」というんのはなんだかなぁという処理ですが受け側がそういう仕様ならまぁ仕方ないでしょう。ただ姑息な手段で回避するということは不正アクセスと判断されても仕方ないということなので微妙です

Comments

[mucho7]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

[yambejp]

的はずれな回答かなと思っていたのですが、あっていたようでなによりです。

[juner]

ベストアンサーに選択できていないのでは……？