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

Posted 追忆丶年华

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了各浏览器对常用或者错误的 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 IE8FirefoxChromeSafariOpera
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被当成纯文本输出了

 

以上是关于各浏览器对常用或者错误的 Content-Type 类型处理方式不一致的主要内容,如果未能解决你的问题,请参考以下文章

content-type的作用

常用对照表的参考_chapter-one(Content-Type)

Content-Type小解

各浏览器下的渐变处理

浏览器对 json ajax 响应的 Content-Type 标头有啥要求?

HTTP 415错误 Unsupported Content-Type