目次
レスポンスヘダー
レスポンスヘッダーは、 HTTP レスポンスで使用できる HTTP ヘッダーです。
HTTPレスポンスに関連する詳細説明情報が記録されています。
通常の処理では気にする必要がないかもしれませんが、ブラックボックスのままなのは、気持ちが悪いので、確認しておこうと思ってます。
Chromeでの確認方法
動作確認のため、localhostでNuxtとDjangoの各サーバーを動かして、以下のような画面を表示させました。
郵便番号を入力して「住所情報取得」ボタンを押すと、裏で「郵便番号から住所情報を取得する」Web Apiが動いて、結果を返してくるような画面です。
その画面上で右クリックして、メニューで「検証」を選択します。
デベロッパーツールが表示されたら「network」を選びます。
初期状態はこんな感じです。
ここで、画面で郵便番号を入力して、住所情報取得ボタンを押します。
すると。
みたいに、WebApiのレスポンスが表示されます。
ここでNameのところをクリックすると、レスポンスヘッダーの情報やレスポンスの内容が表示されます。
上記の例だと、レスポンスヘッダーはこんな内容です。
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
同一オリジンポリシーという、例えば、インターネット上の悪意のあるウェブサイトがブラウザー内で JS を実行して、ウェブメールサービスや 企業のイントラネットからデータを読み取り、そのデータを攻撃者に中継することを防ぐための重要な仕組みに関するものです。
これを厳密に適用すると、例えば、Web Apiからデータを取得する処理などがエラーになって使えないため、信頼するサイトをリスト（ホワイトリスト）するなどして、それを許すものを指定するものです。
これが、まず意図通りになっていないと、セキュリティ上問題があります。
Content-Type: application
これも意図通りの値になっているかがポイントです。
セキュリティ関係の書籍とか読んでいると、よく「MIMEタイプが間違ってtext/htmlなどになっているAPIは良く見かけます」なんて書いてあります。
JSONの直接表示によるXSS攻撃など、この間違いをつく攻撃もあるようです。
その他セキュリティ強化につながるヘッダー
レスポンスヘッダーに常に出力しておくと、セキュリティ強化に役立つ仕組があるということは、よく聞きます。
代表的なものが
- 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ですから、基本すべて許す感じです。
もし、セキュリティが必要なはずの処理で、こんなヘッダーが出力されていたら問題だったりするということです。
ということで。
レスポンスヘダーの確認方法という話を簡単にまとめてみました。
ではでは。
