CH9001: 各浏览器对常用或者错误的 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 头字符串内类型声明一致。

 

转载自: http://www.w3help.org/zh-cn/causes/CH9001

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Content-Security-Policy: frame-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com; img-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org data: mozilla.org www.googletagmanager.com www.google-analytics.com adservice.google.com adservice.google.de adservice.google.dk creativecommons.org cdn-3.convertexperiments.com logs.convertexperiments.com images.ctfassets.net; child-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org www.googletagmanager.com www.google-analytics.com www.youtube-nocookie.com trackertest.org www.surveygizmo.com accounts.firefox.com accounts.firefox.com.cn www.youtube.com; style-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org 'unsafe-inline' app.convert.com; script-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com www.google-analytics.com tagmanager.google.com www.youtube.com s.ytimg.com cdn-3.convertexperiments.com app.convert.com data.track.convertexperiments.com 1003350.track.convertexperiments.com 1003343.track.convertexperiments.com; connect-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org www.googletagmanager.com www.google-analytics.com region1.google-analytics.com logs.convertexperiments.com 1003350.metrics.convertexperiments.com 1003343.metrics.convertexperiments.com sentry.prod.mozaws.net o1069899.sentry.io o1069899.ingest.sentry.io https://accounts.firefox.com/ stage.cjms.nonprod.cloudops.mozgcp.net cjms.services.mozilla.com; font-src 'self'; default-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com *.mozilla.org X-Clacks-Overhead: GNU Terry Pratchett Etag: "f2d65cb9e0a72b2e713c5f4e624ec2c1" X-Backend-Server: bedrock-75f4585775-g8pf7.gcp-us-west1 Strict-Transport-Security: max-age=31536000 X-Content-Type-Options: nosniff X-Xss-Protection: 1; mode=block Referrer-Policy: strict-origin-when-cross-origin Via: 1.1 google, 1.1 5d4ed4df24dee2cc4c8f561e8c090690.cloudfront.net (CloudFront) X-Cache: Miss from cloudfront X-Amz-Cf-Pop: SFO5-C1 X-Amz-Cf-Id: Yz8DuOFyPa9l63XgCBJwQlo9VYl2Ch9qG9ccVATJcR6ci3doX7QbHA==表示什么意思
06-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值