在各个浏览器的安全策略中，HTTPS协议页面，不能包含HTTP的资源请求，否则会进行不安全的提示，这篇文章将介绍Https页面包含Http资源相关的一些问题。

各个浏览器的表现

IE6、IE7、IE8

https contains http resource in ie

Firefox

https contains http resource in firefox

Safari

https contains http resource in safari

chrome

https contains http resource in chrome

Opera

有点诡异，再研究下。

激活Fiddler的HTTPS通信解密

因为HTTPS证书的问题（假证书无法通过浏览器的安全验证），很多前端问题我们必须在线上真实环境进行测试，这时候Fiddler的AutoResponder功能就可以大展拳脚了，但Fiddler默认是关闭对于HTTPS资源请求的监测的，需要手动开启。开启步骤：tools > fiddler > https > decrypt https traffic。更详细的请看官方的帮助文档。

enable fiddler's https

将所有HTTP资源转化为HTTPS

因为https页面不能包含http资源，所有我们要做的就是将所有http的资源改成https。包括以下内容：

  • 图片 image
  • 样式表 stylesheet
  • 脚本文件 Js
  • Iframe
  • …

修改Minify的路径

很多大型网站会使用Minify或者类似的方案来合并资源请求，那么我们就需要修改这个Minify之后的资源的路径。以口碑网为例，Minify路径定义在某个CMS文件中，需要对它进行改写：


//原来的
String result="<link  href=\"http://k.kbcdn.com";


//修改后的
//这里的https的路径仅仅做了一个跳转的功能，实际访问的仍然是"http://k.kbcdn.com"上的资源
String result="<link  href=\"https://login.koubei.com/kbcdn";

CSS背景图片

除了样式表的资源要改成HTTPS，它里面的css背景也需要改成HTTPS的，那么难道我们要把所有的背景修改成background:url(https://login.koubei.com/xxx);吗？当然不是，因为我们已经把css文件修改成了HTTPS的路径，那么我们只要确保我们的background规则中的图片路径是一个相对路径就可以了，浏览器会将它们解析成一个HTTPS的资源请求。

这里需要说明的是Minfy会自动将相对路径改成相对于根目录的绝对路径，比如../img/login.png经过转化后可能是/product/login/v2/img/login.png，浏览器经过解析，得到https://login.koubei.com/product/login/v2/img/login.png，然后再进行一次跳转到http://k.kbcdn.com/product/login/v2/img/login.png。当然这种2层跳转的做法实在是太恶心了。


Selector{
    background:url(../img/login.png) no-repeat 0 0;
}

修改JS Loader的config

以YUI Combo为例，当我们使用use方法异步加载各种资源文件的时候，YUI会根据YUI_config中的资源路径，来生成一个Combo后的资源路径。一般网站都会有一个整站的配置，例如口碑的配置放在seed.js中，为此我们需要在自己的项目中重新配置一个YUI_config来覆盖整站的配置，方法如下：


YUI_config.base = "https://login.koubei.com/kbcdn/yui/3.2.0/";
YUI_config.comboBase = "https://login.koubei.com/kbcdn/min/f=";
//口碑k2框架的资源路径
YUI_config.groups.K2.base = "https://login.koubei.com/kbcdn/k2/";

Data URI

Data URI是一个减少http请求，降低前端工作量的好东西，口碑早已通过自动化的方式在整站使用。但是很可惜，在HTTPS的环境下，IE6、IE7无法使用Data URI。不光mhtml的资源会导致IE6/7报安全提示（即使你已经把它转化成了HTTPS的路径）– This page contains both secure and nonsecure items. Do you want to display the nonsecure items?，甚至用于其它浏览器的base64编码也将导致IE6/7报安全提示。


/*两者都将导致IE6、7报安全提示*/
Selector{
    background:url(data:image/png;base64,iVBORw0…) no-repeat 0 0;
   *background:url(mhtml:https://login.koubei.com/kbcdn/product/login/v2/css/login-1-0-0-mhtml.css!tab.png) no-repeat 0 0;
}


/*改成图片就ok了*/
Selector{
    background:url(../img/login.png) no-repeat 0 0;
}