"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

WebApiのレスポンスヘッダーをChromeの開発者ツールでチェックする

f:id:arakan_no_boku:20190607195913j:plain

目次

レスポンスヘダー

レスポンスヘッダーは、 HTTP レスポンスで使用できる HTTP ヘッダーです。

HTTPレスポンスに関連する詳細説明情報が記録されています。

通常の処理では気にする必要がないかもしれませんが、ブラックボックスのままなのは、気持ちが悪いので、確認しておこうと思ってます。

Chromeでの確認方法

動作確認のため、localhostでNuxtとDjangoの各サーバーを動かして、以下のような画面を表示させました。

郵便番号を入力して「住所情報取得」ボタンを押すと、裏で「郵便番号から住所情報を取得する」Web Apiが動いて、結果を返してくるような画面です。

f:id:arakan_no_boku:20190619001842p:plain

その画面上で右クリックして、メニューで「検証」を選択します。

f:id:arakan_no_boku:20190619002108p:plain

デベロッパーツールが表示されたら「network」を選びます。

f:id:arakan_no_boku:20190619002247p:plain

初期状態はこんな感じです。

ここで、画面で郵便番号を入力して、住所情報取得ボタンを押します。

すると。

f:id:arakan_no_boku:20190619002554p:plain

みたいに、WebApiのレスポンスが表示されます。

ここでNameのところをクリックすると、レスポンスヘッダーの情報やレスポンスの内容が表示されます。

f:id:arakan_no_boku:20190619002835p:plain

 

上記の例だと、レスポンスヘッダーはこんな内容です。

Access-Control-Allow-Origin: http://localhost:3000
Allow: GET, HEAD, OPTIONS
Content-Length: 238
Content-Type: application/json
Date: Tue, 18 Jun 2019 15:25:28 GMT
Server: WSGIServer/0.2 CPython/3.7.3
Vary: Accept, Origin, Cookie
X-Frame-Options: SAMEORIGIN

個人的なチェックポイントとしては。

  • Access-Control-Allow-Origin
  • Content-Type: application/json

のあたりを意識しています。

Access-Control-Allow-Origin

同一オリジンポリシーという、例えば、インターネット上の悪意のあるウェブサイトがブラウザー内で JS を実行して、ウェブメールサービスや  企業のイントラネットからデータを読み取り、そのデータを攻撃者に中継することを防ぐための重要な仕組みに関するものです。

これを厳密に適用すると、例えば、Web Apiからデータを取得する処理などがエラーになって使えないため、信頼するサイトをリスト(ホワイトリスト)するなどして、それを許すものを指定するものです。

これが、まず意図通りになっていないと、セキュリティ上問題があります。

Content-Type: application

これも意図通りの値になっているかがポイントです。

セキュリティ関係の書籍とか読んでいると、よく「MIMEタイプが間違ってtext/htmlなどになっているAPIは良く見かけます」なんて書いてあります。

JSONの直接表示によるXSS攻撃など、この間違いをつく攻撃もあるようです。

ja.wikipedia.org

その他セキュリティ強化につながるヘッダー

レスポンスヘッダーに常に出力しておくと、セキュリティ強化に役立つ仕組があるということは、よく聞きます。

代表的なものが

  • X-Frame-Options
  • X-Content-Type-Options
  • X-XSS-Protection
  • Content-Security-Policy

などです。

今回、これらは出力していませんが、対策をとった場合はちゃんと出力されているかの確認を、こんな感じで行うといいでしょうね。

参考:汎用WebApiのレスポンスヘッダーも参考までに

インターネット上にあるAPI-KEYなどを取得しなくても使える汎用の市区町村APIを、JavaScriptから利用した場合のレスポンスヘッダーも確認してみます。

access-control-allow-credentials: false
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
access-control-allow-methods: OPTIONS,GET
access-control-allow-origin: *
content-length: 0
content-type: application/json
date: Thu, 20 Jun 2019 13:31:46 GMT
status: 200
via: 1.1 6fc9bea777dbb883661b140062657912.cloudfront.net (CloudFront)
x-amz-apigw-id: blKeVHhYNjMFl5A=
x-amz-cf-id: YEDPGfAGsD1-sLPbJa2w5gsUVLzYicM2FCeIlWIZv82KWpL5X9aoFQ==
x-amz-cf-pop: NRT20-C3
x-amzn-requestid: bfde3e49-935f-11e9-aedb-7b650bee618d
x-cache: Miss from cloudfront

こちらは「access-control-allow-origin: *」になってますね。

汎用WebApiですから、基本すべて許す感じです。

もし、セキュリティが必要なはずの処理で、こんなヘッダーが出力されていたら問題だったりするということです。

ということで。

レスポンスヘダーの確認方法という話を簡単にまとめてみました。

ではでは。