概要

案件においてBrowserStackを使用してクロスブラウザテストを行う際、詰まった点があったので、備忘録としてまとめておきます。
BrowserStackについての説明は、こちらの記事が参考になりますので割愛させていただきます。

詰まったところ

VPN接続下でのテストであったため、BrowserStackのデスクトップアプリを開きつつ、接続を確認する必要がありました。
そこでBrowserStackのデスクトップアプリを開こうとすると、下記のようなエラーが表示されていました。またそれによって、テストしたいページが開けない問題も発生してしまっていました。

[CONN_FAIL:4004]Looks like you have SSL inspection enabled. You can
 either bypass *.browserstack.com or disable SSL inspection entirely
 for BrowserStack local to connect.

結論

①②を実行することで解決できます。
①Local Binaryをダウンロード
②ダウンロードした階層において、

./Browserstacklocal --key XXXXXXXXX --use-ca-certificate
(ダウンロードしたSSL証明書へのパス)

をCLIから叩く

解決までの手順

⓪まずは一旦エラー文で検索。


この2つの記事が解決につながりそうだと判断し、確認してみます。（公式サイトだし信憑性も高そう）

①Local Testing with SSL Inspection、CONN_FAIL:4004 | BrowserStackDocsを確認。


[CONN_FAIL: 4004]error〜という形で同じエラーコードが書かれているのでどうやらこのページに書かれている解決法を試せばうまくいきそう？と推測しました。
さらに、How to make it workの部分には、どうやら2つの策が書かれているので、解決策は2つありそうだ、と分かります。
Bypass *.browserstack.com or disable SSL inspection entirely for BrowserStack local
Pass root CA certificates to binary (this is not applicable for the Local Desktop App)

それぞれの意味を見ていくことにします。

Bypass *.browserstack.com or disable SSL inspection entirely for BrowserStack local

雰囲気で直訳すると、*.browserstack.com をbypassする、もしくはBrowserStack localへのSSL inspectionを全て無効にするという意味。
talk to your network administrator :ネットワーク管理者に相談という文言があり、若干解決に時間がかかりそうだ（依頼の工数がかかる）と踏んだので、
テスト作業の実施の猶予は1,2日しかなかったこともあり、②を試して無理そうであれば試してみようと判断しました。（ので一旦スキップ）

Pass root CA certificates to binary (this is not applicable for the Local Desktop App)

こちらも雰囲気で直訳すると、ルートCA証明書のパスをバイナリに通す（これはローカルデスクトップアプリでは適用されません）という意味。
これを見た時に、2つの疑問が浮かびました。なのでそれぞれ調査してみます。

  • 「ルートCA証明書とは？」
    →上位の認証局による認証を受けず、自分の正当性を自ら証明する認証局から発行された証明書
    =社会的に信頼されていると認定された機関・企業（ルート認証局）から発行された証明書
  • 「バイナリに渡すとは？」
    そもそもバイナリという用語が分からなかったので調べました。
    こちらを参考にすると、コンピュータが扱うデータが書かれているファイル（エディタで編集することができないファイル）のことを指すことが分かりました。

以上二つの疑問が解けたところで、
ここまで出てきた情報を手掛かりに、BrowserStackの公式サイトに何かヒントが転がっていないか、、と調査を進めます。
するとFAQページにこんな記述がありました。

ローカルテストのための接続をセットアップする方法について、2つ方法が書いてありますが、どうやらLocal Binaryをダウンロード、それをCLIから実行するのがポイントになりそうです。私の端末はMacなのでMac版のものをダウンロードします。
（※ローカルデスクトップアプリのダウンロードは現状試そうとしている方法の注意点【(this is not applicable for the Local Desktop App)】に抵触するようなのでうまくいかないと判断しました。）

②実際にCLIからバイナリファイルを実行
Local Binary をダウンロードし、ダウンロードフォルダに、BrowserStackLocalという名前のバイナリファイルが入っていることを確認します。
ターミナルを開き、

chmod +x BrowserStackLocal

でファイルを実行権限を付与するようファイルパーミッションを変更します。

その後、Flags for Local Binaryを参考にして、コマンド実行時の引数をセットします。

今回は、–keyオプション(BrowserStackのアクセスキー)、 –use-ca-certificateオプションを使用しました。


以下のようなコマンドを叩いて、[SUCCESS] You can now access your local server(s) in our remote browserという表示が出ればOKです。

maeno1:Downloads maeno$ ./Browserstacklocal --key XXXXXXXXX --use-ca-certificate
 /（実際にはここに証明書へのパスを指定する）
Thu Dec 14 2023 18:00:58:417 GMT+0900 (JST) -- BrowserStackLocal v8.9

Thu Dec 14 2023 18:00:59:180 GMT+0900 (JST) -- Starting configuration console on　
http://localhost:45454
Thu Dec 14 2023 18:01:00:803 GMT+0900 (JST) -- [INFO] Started 
the BrowserStack Binary server on 45691, PID: 6991
Thu Dec 14 2023 18:01:01:617 GMT+0900 (JST) -- [SUCCESS] You can now access 
your local server(s) in our remote browser

Thu Dec 14 2023 18:01:01:831 GMT+0900 (JST) -- Press Ctrl-C to exit

実際に確認してみると、エラーが表示されないことを確認し、テストしたいページにアクセスできることが確認できました?

※BrowserStackの設定画面にて、Force local→Local Testingから、Resolve all URLs through my networkにチェックしておく必要があります。
（そうすることですべてのリクエストがデバイス経由でルーティングされるようになるようです）

注意点

1点注意点があります。BrowserStackでのテストの際、
BrowserStackLocalのプロセスが複数起動していると、Force Local :ON にならず、テストページにうまく接続できない状況が発生することがあります。（消したはずなのに意図せず起動している？場合もあるようです）
その際は

ps aux | grep BrowserStackLocal

で実行中のプロセスを確認し、複数起動されているた場合は当該プロセスのPIDを探してkillし、もう一度起動し直すとうまくいくようです。

補足）SSL inspection （SSL検査）とは？？

今回は試行しなかった1つ目（Bypass *.browserstack.com or disable SSL inspection entirely for BrowserStack local）の解決策について、今後解決が必要になった時のために、SSL inspectionについて少し調べてみることにしました。
SSLinspectionは「通信の途中で暗号化されて送られている通信内容を一旦復号化してその内容が安全なものかどうかを検査する」ことのようです。
zscalarのサイトによると、以下のメリットがあるようです。

  • 隠れたマルウェアを発見し、ハッカーが防御をすり抜けるのを阻止することで、データ漏洩を防止する
  • 従業員が意図的または偶然に外部に送信している内容を把握する
  • 規制コンプライアンス要件に準拠し、従業員が機密データを危険にさらさないように徹底する
  • 組織全体のセキュリティを維持できる多層防御戦略をサポートする

これは設定により、しないようにすることもできるようです。（参照）

最後に（今回学んだこと）

  • どういう形でもいいので、自分が詰まった過程を整理して残しておくことが大事。
    • 今回はそうしたことで、解決方法についてロジカルに考えることができたような気がしています。
  • 公式ドキュメントをしっかり読むのが大事。
    • 今回は英語ばかりのドキュメントで読むのは大変ですが、とはいえ実際理解しておかないといけないのは一部分だけというケースもあったりしたので、記述が難しくても、何が書いてあるかをざっくり理解する力は重要だなと思いました。

参考文献

https://e-words.jp/w/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA.html
https://ssl.sakura.ad.jp/column/difference-in-ssl/
https://ja.linux-console.net/?p=14516
https://www.janog.gr.jp/meeting/janog45/application/files/9515/7982/7303/JANOG45_Fortinet_SSL_pub1.pdf
https://licensecounter.jp/engineer-voice/blog/articles/20190924__vol3_ssl.html
https://www.zscaler.jp/resources/security-terms-glossary/what-is-ssl-inspection