basic認証に対応していないアプリ内ブラウザでどうしてもbasic認証ページにアクセスしたいときの最終手段

はじめに

アプリ内ブラウザというものをご存じでしょうか？一般的なChromeやEdgeと違い、スマートフォンで特定のアプリを使用していて、かつそのアプリ内でURLを踏むとアプリの中でWebページを閲覧することができ、これがアプリ内ブラウザです。
外部アプリに遷移しないので、ぱっと中身を確認するだけの場合など便利なこともある半面、basic認証のポップアップに対応していない場合があったりと、開発者には不便なことがあります。
普通使いする分には、基本認証ページをもし開く必要があったとしても、Safariで開くボタンなど外部で開くためのボタンが用意されているので、そちらをおねばOK！！
ただし開発者の場合は、アプリ内ブラウザでのみ再現するバグの確認などでどうしても基本認証付きのページを開きたい瞬間があります、今回はそういう場合の最終手段を綴ります。

方法

※注意：あくまで最終手段のためこの方法にはセキュリティリスクがあります、使用する際は注意してください。
結論から書くと、URLにbasic認証情報を埋め込む方法です。
basic認証情報をURLに組み込む方法に対応しているブラウザにて、

https://userId:password@本来のドメイン.~~~

このように/とドメインの間にbasic認証情報をコロンを挟んで記述すると、basic認証ポップアップを挟まずにアクセスできる機能があり、これを使用することで突破できます。
あくまでアプリ内ブラウザは基本認証のポップアップを表示することに対応していないだけで、逆に言うとポップアップが出ない状態にすればアクセスできるということです。

実際にやってみた

今回はさくらのレンタルサーバー様が公開されているBasic認証のテスト用ページを使用させていただきます。
https://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/
https://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/secret/kaiin_page_top.htm
下のリンクにアクセスすると基本認証が求められます。テストページのためIDとパスワードは上のリンクにて普通に公開されています。

そこで、通常パターン(上)と、IDとパスを埋め込んだパターン(下)の2通りをInstagramのアプリ内ブラウザで開いてみました。
https://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/secret/kaiin_page_top.htm
https://kaiin:[e-mail]/xxxxbasic_auth_testxxxx/secret/kaiin_page_top.htm

このように2つ送信し(OGPは両方とも401となっている)

上のリンクをタップしたところ、このようにbasic認証のポップアップが表示されないまま認証エラーとなってしまいます。

しかし下のリンクをタップすると、無事にアクセスすることができました！！

さいごに

今回は最終手段としてこのような方法を紹介しました、しかし上でも注意書きしている通りあくまでデベロッパー向けの内容であり、ネットワークに関するリテラシーをある程度持っている人向けに書いている内容となります。
極端な例でいうと、外部に漏らしてはいけないお客様の基本認証情報を埋め込んだURLに、フリーWi-fiに接続している状態でアクセスしたりなんかすると簡単に流出してしまうので、テスト環境を用いたうえでネットワークやSSLなど最新の注意を払って行ってください！