chromeで、Content-Type の調べ方

『Content-Type』を調べたい事がありましたので、調べ方をメモしておきます。

chromeで、Content-Type の調べ方

Content-Type について

その前に、『Content-Type』について復習です。

たとえば、インターネットでファイルのダウンロードを行う時等、ファイルに拡張子がなかったり、拡張子からファイルの種類が分からない場合がある。
その場合、「これから返すファイルの種類」をContent-Typeによって示すことで、ファイルの種類を受け取る側が知ることができる。またその種類に応じて、Webブラウザがそのまま表示したり、ファイルとして保存したり、他のアプリケーションを起動してそれを用いて出力したり、と処理を変更する。

Content-Typeとは : JavaA2Z

簡単に言うと、windowsでの拡張子に当たる部分です。
例えば、ブラウザでweb上の『.cgi』ファイルにアクセスした場合、拡張子からCGIだとわかっても、帰ってくるデータが、テキストなのか、画像なのか、scriptなのか、ダウンロードファイルなのか、ブラウザは分からは判断できません。したがって、『Content-Type』にファイル形式を明示するのです。

今までコードのお約束事として記述していた下記のような『Content-Type』は、「htmlファイルです」と、ブラウザに伝えていたのです。(HTML5からは記述しなくても、”text/html”として扱われるようです。)

# HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
# php
header("Content-type: text/html; charset=utf-8");

Content-Type を調べてみる。

本題です。実際にheader情報の『Content-Type』をchromeを使って確認してみます。
chormeのアドレスバーに

chrome://net-internals/#events

を、入力します。(chrome://about/ と入力すると、開発者向けの機能が提供されています。その中の1つです。)

chrome_net-internals01

表示されたリストから、確認したい通信をクリックします。
当サイトだと、
Source Type : URL_REQUEST
Description : http://blog.cototoco.net/
です。ウィンドウ右側に詳細が表示されます。

詳細の中、さらに、HTTP_TRANSACTION_READ_RESPONSE_HEADERS、に『Content-Type』が記載されています。

chrome_net-internals02

当サイトの『Content-Type』が
Content-Type: text/html; charset=UTF-8
だとわかります。

実験

html5に『Content-Type』(metaタグ)有り無しで実験してみます。ちなみに、HTML5では省略しても”text/html”と扱われるので、省略しています。

# meta 有り無し
<meta http-equiv="content-type" content="text/html" charset="UTF-8">

html5に『Content-Type』有りの場合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>Content-Typeサンプル</title>
</head>
<body>
<p>HTML5 Content-Type はどうなっているか?</p>
</body>
</html>

html5に『Content-Type』有りの場合の『Content-Type』は
Content-Type: text/html となっていることが確認できました。

# meta 有りのheader情報
HTTP_TRANSACTION_READ_RESPONSE_HEADERS
--> HTTP/1.1 200 OK
  Date: Fri, 11 Jul 2014 05:27:51 GMT
  Server: Apache
  Last-Modified: Fri, 11 Jul 2014 05:27:41 GMT
  ETag: "5e1f2e-e8-53bf75cd"
  Accept-Ranges: bytes
  Content-Length: 232
  Connection: close
  Content-Type: text/html

html5に『Content-Type』無しの場合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Content-Typeサンプル</title>
</head>
<body>
<p>HTML5 Content-Type はどうなっているか?</p>
</body>
</html>

html5に『Content-Type』有りの場合の『Content-Type』は
明記されていないようです。(注:キャッシュが残っている場合はキャッシュが表示されているようです。)

# meta 無しのheader情報
HTTP_TRANSACTION_READ_RESPONSE_HEADERS
--> HTTP/1.1 304 Not Modified
   Date: Fri, 11 Jul 2014 05:38:35 GMT
   Server: Apache
   Connection: close
   ETag: "5e1f2e-a2-53bf782f"

以上、chromeで、Content-Type の調べ方です。
また、この方法で、header情報も同時に確認できることになります。

Content-Typeとは : JavaA2Z

gihyo.jp

concrete5の更新時に403error

c5japanlogo

ブログの記事を書こうと思って、下書きがどんどんたまってます^^;
直ぐに公開できる記事を書いたほうが良いのかもしれませんね。

というわけで、短い記事です。

コンクリート5で構築しているサイトで、今までは問題なく動作していたサイトでしたが、
更新時以下のようなメッセージが表示されました。

403 error Forbidden 指定されたページ(URL)へのアクセスは禁止されています。以下の状況が考えられます。~~~~

エラー

 
原因は、hetemlのWAFが更新を止めていたみたいですね。

heteml管理画面から、WAF検知ログを開くと、ちょうど更新しようとしたタイミングで、ログが書きだされていました。どうも数日前にhetemlのWAFがバージョンアップしたようでそれから使えなくなっていたみたいです。

WAFをオフにして様子見ですね。