Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

15
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

サーバ認証するためにブラウザ(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がセットされた状態になります。

スクリーンショット 2016-11-15 7.15.18.png

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

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

スクリーンショット 2016-11-15 7.15.48.png

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の構築が終わって他のコンテンツのロードが始まる前にオブジェクトを注入する必要があります。

最後に

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

15
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

15
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?