;

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

作者:钱宝坤

标准参考

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

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

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

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

type 有下面的形式:

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

关于 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 显示文件内容 显示文件内容 下载文件 显示文件内容

由表可见:

解决方案

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.9
Chrome 7.0.517.0 dev
Safari 5.0.1
Opera 10.51
测试页面: ct_test.php
本文更新时间: 2010-09-09

关键字

content-type 文档类型 html text/plain application/octet-stream application/x-rar-compressed application/zip application/x-shockwave-flash video/quicktime video/mp4 audio/mpeg image/jpeg image/gif image/png application audio video image