ブラウザのHTTPヘッダーに外部から認証情報を設定する

サーバ認証するためにブラウザ(WebView)のヘッダー情報を利用することはよくあります。
SwiftからJavascript(Ajax)で利用する認証情報を設定するではWebViewのヘッダー、js空間に外側(iOSネイティブ)から認証情報を渡してあげていました。

同じことをブラウザで行いたいケースがあります。
例えば、WebViewでloadするコンテンツの動作確認やデバッグを行いたい場合などです。

• ブラウザでloadするHTMLを取得するための認証情報をヘッダーにセットする
• load後に非同期通信を行うための認証情報をjsの実行空間に渡す

いちいち、アプリを通して確認するのは面倒だし、使い慣れたChromeのDeveloperToolを使いたいというのもあります。

---

前提

• ブラウザ: Chrome (ver 54.0)
• 開発環境などで認証に利用するtokenの値がわかっている

ブラウザでloadするHTMLを取得するための認証情報をヘッダーにセットする

ModHeaderというChrome拡張を利用してHeader情報を書き換えます。
Request Headersに必要な情報を入力します。こうすることでHTMLロード時にHTTPリクエストのヘッダー情報にAuth-Tokenがセットされた状態になります。

load後に非同期通信を行うための認証情報をjsの実行空間に渡す

UserScriptを利用して、jsの実行空間にオブジェクトをセットすることで実現できます。
今回はTamperMonkeyというChrome拡張を利用して、認証情報を渡します。

TamperMonkeyではUserScriptを管理するためのツールなので、スクリプトは別に用意する必要があります。以下はlocalhost:3000/spa/*のURLの時だけ実行されるスクリプトになります。
任意のオブジェクトを作成して認証情報を渡します。

// ==UserScript==
// @name         AuthToken Injection
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://localhost:3000/spa/*
// @grant        none
// @run-at document-start
// ==/UserScript==

(function() {
    'use strict';
　　　window.AppConfig = window.AppConfig || {};
　　　window.AppConfig.authToken = "xxxxx-11111";
})();

ポイントは@run-atでスクリプトの実行タイミングをdocument-startに指定することです。
DOMの構築が終わって他のコンテンツのロードが始まる前にオブジェクトを注入する必要があります。

最後に

サーバ側で開発時は認証情報を無視するといったこともできるので、今回の方法以外にもいろいろあると思います。