各浏览器对常用或者错误的 Content-Type 类型处理方式不一致

标准参考

content-type 用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据，此属性的值可以查看 MIME 类型。

MIME (Multipurpose Internet Mail Extensions，多用途互联网邮件扩展) 是描述消息内容类型的因特网标准。MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

content-type 一般以下面的形式出现：

Content-Type: [type]/[subtype]; parameter

type 有下面的形式：

Text：用于标准化地表示的文本信息，文本消息可以是多种字符集和或者多种格式的；
Multipart：用于连接消息体的多个部分构成一个消息，这些部分可以是不同类型的数据；
Application：用于传输应用程序数据或者二进制数据；
Message：用于包装一个E-mail消息；
Image：用于传输静态图片数据；
Audio：用于传输音频或者音声数据；
Video：用于传输动态影像数据，可以是与音频编辑在一起的视频数据格式。

subtype 用于指定 type 的详细形式。“type/subtype”配对的集合和与此相关的参数。下面是最经常用到的一些 MIME 类型：

text/html（HTML 文档）；
text/plain（纯文本）；
text/css（CSS 样式表）；
image/gif（GIF 图像）；
image/jpeg（JPG 图像）；
application/x-javascript（JavaScript 脚本）；
application/x-shockwave-flash（Flash）；
application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）；
multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）。

关于 content-type 的详细信息，请参考 HTML4.01 规范 6.7 Content types (MIME types) 中的内容。

关于 MIME 的相信信息，请参考 IETF 的 [RFC2045] 及 [RFC2046] 规范。

更多的 MIME 类型参见：

问题描述

Content-Type 报头字符串代表着服务器端发送给客户端浏览器的具体数据类型，浏览器将根据这个信息决定如何处理得到的数据内容。比如：'Content- Type:text/html' 表示着这是个 HTML 文件，需要渲染引擎解释内容后输出；'Content-Type: application/octet-stream' 表示这是个二进制流，需要下载到本地后由用户端环境决定如何使用。

每个浏览器内置支持的 Content-Type 类型表各不相同，这导致了某些类型字符串在某些浏览器下不被识别；另外，如果出现错误的 Content-Type 类型，各个浏览器又会以不同的方式处理。

造成的影响

未知的或者是错误的 Content-Type 类型，在各个浏览器中处理方式不一致，草率对待将有可能使得同一文件在各种浏览器中展现方式完全不同。

受影响的浏览器

所有浏览器

问题分析

创建一个 Web 服务器，如 Apache。在服务器上编写一段动态代码，如：ct_test.php

<?php   $contentTypeList = array(     '0'=>'Content-Type: text/plain',     '1'=>'Content-Type: application/octet-stream',     '2'=>'Content-Type: application/x-rar-compressed',     '3'=>'Content-Type: application/zip',     '4'=>'Content-Type: application/x-shockwave-flash',     '5'=>'Content-Type: video/quicktime',     '6'=>'Content-Type: video/mp4',     '7'=>'Content-Type: audio/mpeg',     '8'=>'Content-Type: image/jpeg',     '9'=>'Content-Type: image/gif',     '10'=>'Content-Type: image/png',     '11'=>'Content-Type: application',     '12'=>'Content-Type: audio',     '13'=>'Content-Type: video',     '14'=>'Content-Type: image',     '15'=>'Content-Type: helloworld'     );   header($contentTypeList[$_GET["type"]]."; charset=UTF-8"); ?>

PHP 的文件中建立了 16 种 Content-Type 类型，根据 URL 中 GET 参数值选取其中一种文件类型 HTTP 报头发向客户端浏览器。其中 11 种常用类型，4 种故意写错的类型，1 种完全自定义类型：

	文件类型	Content-Type 类型
常见类型	文本	text/plain
	二进制流	application/octet-stream
	RAR 压缩包	application/x-rar-compressed
	Zip 压缩包	application/zip
	Flash 文件	application/x-shockwave-flash
	QuickTime 视频	video/quicktime
	MP4 视频	video/mp4
	MP3 音频	audio/mpeg
	JPEG 图片	image/jpeg
	GIF 图片	image/gif
	PNG 图片	image/png
书写有误类型	数据	application
	音频	audio
	视频	video
	图像	image
浏览器不可识别类型	自定义类型	helloworld

分别以不同 HTTP Content-Type 报头类型运行此段代码，在不同的浏览器环境中的表现如下：

	IE6 IE7 IE8	Firefox	Chrome	Safari	Opera
text/plain	显示文件内容	显示文件内容	显示文件内容	显示文件内容	显示文件内容
application/octet-stream	显示文件内容	下载文件	下载文件	下载文件	显示文件内容
application/x-rar-compressed	下载文件1	下载文件	下载文件	下载文件	下载文件
application/zip	下载文件1	下载文件	下载文件	下载文件	下载文件
application/x-shockwave-flash	试图显示 Flash	试图显示 Flash	试图显示 Flash	试图显示 Flash	试图显示 Flash
video/quicktime	下载文件	下载文件	下载文件	下载文件	下载文件
video/mp4	下载文件	下载文件	试图播放视频3	下载文件	下载文件
audio/mpeg	下载文件	下载文件	试图播放视频3	下载文件	下载文件
image/jpeg	显示文件内容	试图显示图片2	试图显示图片	试图显示图片	试图显示图片
image/gif	显示文件内容	试图显示图片2	试图显示图片	试图显示图片	试图显示图片
image/png	显示文件内容	试图显示图片2	试图显示图片	试图显示图片	试图显示图片
application	下载文件1	显示文件内容	显示文件内容	下载文件	显示文件内容
audio	下载文件1	显示文件内容	显示文件内容	下载文件	显示文件内容
video	下载文件1	显示文件内容	显示文件内容	下载文件	显示文件内容
image	下载文件1	显示文件内容	显示文件内容	下载文件	显示文件内容
helloworld	下载文件1	显示文件内容	显示文件内容	下载文件	显示文件内容

【注1】：这几种 Content-Type 类型在测试环境中的 IE6 IE7 IE8 浏览器弹出的下载对话框提示中，均显示“不可识别类型”。

【注2】：Firefox 会将 URL 和一些错误信息输出在图片格式中显示。

【注3】：Chrome 试图使用 VIDEO 标记直接显示这两种格式的视频。

由表可见：

IE6 IE7 IE8 对于可以识别的非视频、音频流内容均会嗅探其内容，并且根据内容是否正常再决定如何输出显示；
（关于嗅探的扩展阅读：CH9002: IE6 IE7 IE8 未按预期方式处理 content-type 为 text/plain 的内容）
Firefox Chrome 对于未知 Content-Type 的内容均直接显示其内容，其他类型则以直接以最合适的方式处理；
Opera 对于可以识别的视频、音频流内容会直接提示下载，图片类型和 Flash 类型会试图显示他们，未知 Content-Type 的内容均直接显示其内容则直接显示其内容，但在显示内容前不会嗅探其中的 HTML 标记。

解决方案

这个问题比较复杂，如需避免出现显示异常，建议不要使用非法的 Content-Type 头字符串；并且文件实际内容和数据格式应与 Content-Type 头字符串内类型声明一致

ps: 今天碰到一个问题，firefox 输出shtml 文本输出，找半天发现apache 没设置 AddType text/html .shtml 默认的.shtml被当成纯文本输出了