记录最近遇到的坑
ssi 未被解析
今天接入 ssi 配置，本以为只需要 include 地址正确就行了。结果执行 gulp 命令后，竟然生成的 dist 里显示不出来 ssi 地址。我以为是我 virtual 绝对地址错误了。后来换成了 file,还是不正确。
最终发现我在压缩 HTML 的时候，用的 gulp-minify-html 竟然把我的 ssi 当成注释给去掉了。解决方法是 把这个插件换成 gulp-htmlmin,这个解析机制会稍微好一些，会保留我的 ssi 的内容。
1 | <!--#include virtual="h5/test.js"--> |
Mixed Content
今天在公司加班，突然同事让我帮他看个问题， 页面点击没反应。我猜测是 JS 未被正常加载，一看果然是： 页面显示
1 | Mixed Content: The page at was loaded over HTTPS, but requested an insecure script This request has been blocked; the content must be served over HTTPS. |
错误就直白的显示页面是以 https 加载的， 但是却请求了一个不安全的 script, 这个 script 不是 https 的，而是 https 的。因此请求被浏览器拦截了。
这个问题我以前是知道的，但是这次才知道这个现象只出现在 ios 的机器上， 某些 android 对应的浏览器 上是没问题的。因此仔细了解了下这个问题，记录如下。
什么是混合内容？
混合内容在以下情况下出现：初始 HTML 内容通过安全的 HTTPS 连接加载，但其他资源（例如，图像、视频、样式表、脚本）则通过不安全的 HTTP 连接加载。之所以称为混合内容，是因为同时加载了 HTTP 和 HTTPS 内容以显示同一个页面，且通过 HTTPS 加载的初始请求是安全的。现代浏览器会针对此类型的内容显示警告，以向用户表明此页面包含不安全的资源。
之所以用 https 很清楚， https 可以帮助我们：
- 身份验证， 不被重定向
- 数据完整性，不会有人篡改正在发送和接收的内容
- 保密性，会使用 TLS 提供加密
但是并不是每个网站的每个访问者都会使用最新的浏览器，并且不同的浏览器商的不同版本的浏览器处理混合内容的方式也不是完全一样的。
注意混合内容不仅仅在 https 引入 http 文件中，在 https 页面里通过 ajax 的形式请求 http 资源，也是会被 block 掉的。
如果你的项目很大，一下子没办法全部转换完成，就可以使用：
1 | <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> |
可以在相应的页面的
里加上这句代码，upgrade-insecure-requests 意思是自动将http的不安全请求升级为https。
微信开发工具
微信开发工具自从更新了新版本后，我真的觉得好难用啊。。。这里记录一个刚开始使用 微信开发工具发现无法使用的情况。是因为他们工具有个 bug, 自动没有转成 https。那个错误是可以在微信开发工具的请求中看到的，是个 debug 请求。要用 fiddler 或者 whistle 重定向下：
1 | # 微信开发者工具https whistle |
顺便提下：whistle 是个很好的代替 fiddler 的工具，因为配置更加灵活，比如正则通配啥的，而且直接在浏览器中，跨平台使用，完全没有隔阂。