IT瘾浏览器推荐

是时候重新思考浏览器了

Tue, 01 Nov 2022 23:10:05 CST

Darin Fisher 参与构建了多种浏览器，在职业生涯的早期他在网景从事软件工程师的工作，开发了 Navigator，帮助它变成开源的 Firefox。随后他去 Google 工作了 16 年，帮助构建了 Chrome 和 ChromeOS。去年他离开 Google 去了 Neeva，今年他又离开 Neeva 加盟了 The Browser Company，开发一种炙手可热的新浏览器 Arc。Arc 目前处于邀请制的封测阶段，它尝试重新思考整个浏览器的 UI，用侧边栏取代了标签栏，提供了大量个性化选项。Fisher 担任了一段时间的 The Browser Company 顾问，本周一正式担任它的软件工程师。他谈论了为什么重新发明轮子：今天的浏览器要打开无数的标签，曾经整洁的界面变得凌乱不堪，让人难以忍受，因此浏览器需要更好的系统帮助用户管理标签。Arc 包含了大量浏览器如何工作的新想法：它结合了书签和标签，更容易搜索打开的标签，内置了笔记和可共享迷你网站的工具。

局域网内搭建浏览器可信任的SSL证书 – 唐玥璨 | 博客

Fri, 02 Sep 2022 14:55:15 CST

首先是为什么要干这个事情，你可能会说随便搞个自签名证书难道不能用吗？答案是还真的不能用，的确对于开发来说搞个自签名的证书就行了。但是一旦放到生产环境浏览器对证书有效性进行验证的时候便是不可信状态，这时就必须要用户点击一下继续访问，但是对于我们即将实施项目的自动化要求来说没法这样干。你可能又会说了现在这个环境在阿里云、华为云这些平台上随便申请一个免费的证书难道不行吗？答案是真的不行，因为项目的特殊要求最终我们部署的环境是完全没有外网访问的，就只能在局域网环境下运行及意味着不光是 SSL证书的问题我们连DNS服务器都要自己建。这时候你可能又要说了那么直接用 http访问就可以了，干嘛要用 ssl证书呀？答案是这个项目需要使用 WebRTC进行音视频多人会议，而WebRTC只能在 https下运行。

其实上面的说法有一个点需要更正一下，自签名证书其实也可以但是一旦对超过100个客户端进行分发简直是要命的事情，所以我们通过Windows域控的方式统一对下属计算机进行证书分发保证可用性。

1.原理

SSL证书的信任机制其实是非常简单的，第一需要一个机构证书，第二是需要服务端证书，一般来说机构证书被称为CA证书，而服务端证书就称为服务器证书吧。那么为啥 https非常安全呢？答案其实不复杂，下面就是一段逻辑性描述来说明为啥 https是安全的。

通常情况下我们在给Nginx、Tomcat、IIS上配置的证书便是服务器证书，那么它是怎么保证客户端访问的地址绝对没有被拦截修改的呢？其实也不复杂，当我们的浏览器发起一个请求的时候到服务端上时，对应web服务器会通过证书的秘钥将http响应值进行一次加密，然后将密文与明文同时返回出来，客户端浏览器接收到响应之后会将密文对称解码然后和明文进行对比，这样一来便可以保证响应值没有被串改。

这个时候逻辑上稍微厉害一点都会发现一个问题，客户端是怎么解码的？这里的答案就是服务端在响应的时候同时会将证书的公钥也返回，这个公钥只能解码对应私钥加密的信息，同时这个公钥无法加密只能解密，这样一来如果如果某人想要拦截http请求便必须知道对应的私钥才行，否则浏览器一旦发现解密信息对不上便知道了响应数据已经被拦截修改过了。

如果你反应过来了你会发现一个新的问题，那么假设拦截这自己搞了一对有效的私钥和公钥然后伪装为服务器不就行了，恭喜你盲生发现了华点。这里就需要CA证书来处理了。其实服务器证书的公钥是由CA证书的秘钥配对加密来的，这样一来当请求返回的服务器公钥和通过CA证书进行验证时便会发现这个公钥是不是由机构签发的公钥，一旦对应不上则说明服务器不是原来CA证书签发服务器证书，这就证明你的请求被第三方拦截了。同时CA证书对于浏览器而言只有公钥，也就是说安装证书时本质上就是将CA证书的公钥导入到你的电脑上了，至此除开CA机构的证书发放者没有知道CA证书的秘钥是什么这样一来便可以保证下面几个非常关键的安全性：

你请求的服务绝对是官方的服务器，绝对不是黑客自建的服务器。
服务器响应给你的数据绝对是正确的，期间黑客绝对无法对其进行修改。

证书的结构如下：

这里还有一个问题便是这些CA证书是哪来的，自己的电脑上又重来没有导入过什么证书。这里便是一个非常无耻躺着赚钱的商业模式了，微软、谷歌、苹果等公司提供了操作系统和浏览器，他们便是第一方的CA机构，他们的系统自己肯定信任自己对吧？所以系统安装的时候他们的CA公钥已经安装到你们的系统里面了，然后这几家巨头合伙说那么这些CA公钥在每种系统都有，然后就是一写第三方公司和这些巨头打成了合作，这些公司的机构证书也被巨头们信任所以理所当然的入库了，这些三方机构便是大名鼎鼎的 Symantec、 GeoTrust、 Let's Encrypt几个巨头，这些机构一个单域名的签名证书都敢直接拿出来卖，一年好几千，对他们而言无法就是给下发的证书进行一次签名而已，真正的躺着赚钱。

2.开始制作证书

这里我使用的证书工具是 openssl，经典工具，坦白的说非常难用。

2.1创建CA证书

首先第一步肯定是制作一个机构证书也就是CA证书出来，这里有两种方案，第一是直接用 openssl创建CA证书，另一种是windows域控生成域组织的CA证书，我们分开说。

2.1.1通过 `openssl`创建CA证书

第一步是创建一个秘钥，这个便是CA证书的根本，之后所有的东西都来自这个秘钥：

# 通过rsa算法生成2048位长度的秘钥
openssl genrsa -out myCA.key 2048

第二步是通过秘钥加密机构信息形成公钥：

# 公钥包含了机构信息，在输入下面的指令之后会有一系列的信息输入，这些信息便是机构信息，公司名称地址什么的
# 这里还有一个过期信息，CA证书也会过期，openssl默认是一个月，我们直接搞到100年
openssl req -new -x509 -key myCA.key -out myCA.cer -days 36500

这一步需要输入的机构信息有点，分别说一下：

参数名称	参数值
Country Name	国家代码，比如中国就是CN
State or Province Name	省名称
Locality Name	城市名称
Organization Name	机构名称
Organizational Unit Name	机构单位名称
Common Name	重点参数：授权给什么，因为机构是根节点所以是授权给自己
Email Address	邮件地址

2.1.2通过windows域控创建CA证书

这种便是我采用的方案，执行上比直接用 openssl创建证书复杂多了，但是好处也非常多，一方面域控下级的所有计算机天然对域控服务就是信任状态，第二是域控制器能够通过组策略域内同步CA证书，本质上来讲相对于多了一个CA证书同步与分发的机制。我这边使用的Windows Server 2016，其他版本区别也不大。

第一步是在域控上启用证书服务

第二步是安装完毕之后配置证书

这里非常简单，我都不想说了，直接根据提示输入相关信息就行了，在过期时间那一步最好将时间拉长，我还是使用的100年。

第三步是通过组策略进行分发

策略路径是： 计算机策略/Windows设置/安全设置/公钥策略/受信任的根证书颁发机构和 计算机策略/Windows设置/安全设置/公钥策略/受信任的发布者证书。将上面创建的证书导出之后，在这里导入即可。

2.2创建服务器证书

在得到CA证书之后，需要通过 openssl工具对证书进行转换得到公钥（ .crt文件）和密钥（ .key文件），无论CA证书是怎么来的到这里之后就没有任何区别了，服务器证书的制作流程相较CA证书要复杂一点点。

第一步通过 openssl工具创建服务器的秘钥：

# 通过RSA算法生成长度2048位的秘钥
openssl genrsa -out server.key 2048

第二步这里是创建一个签名请求

需要将服务器信息写入到请求文件之中，然后通过CA机构证书对请求签名形成服务器证书公钥，这一步要复杂一些，很多网上的教程在这里都GG了主要原因没有把原理搞清楚。

首先 https证书的公钥不同于自定义情况下的加密证书，这里需要安装浏览器标准进行配置，首先 openssl默认的证书版本是V1，V1在支持 https时部分浏览器依旧会认为不安全，所以需要使用V3版本；同时 openssl即便是使用V3版本依旧没有附带V3的 subjectAltName字段数据（这里是证书对应的IP地址或者域名，可以用通配符）。但是这些东西命令行没法指定所以需要配置文件，我这里准备了一个：

tsa_policy2 = 1.2.3.4.5.6
tsa_policy3 = 1.2.3.4.5.7

[ ca ]
default_ca = CA_default  # The default ca section

[ CA_default ]
dir  = ./demoCA  # Where everything is kept
certs  = $dir/certs  # Where the issued certs are kept
crl_dir  = $dir/crl  # Where the issued crl are kept
database = $dir/index.txt # database index file.
new_certs_dir = $dir/newcerts  # default place for new certs.
certificate = $dir/cacert.pem  # The CA certificate
serial  = $dir/serial   # The current serial number
crlnumber = $dir/crlnumber # the current crl number
crl  = $dir/crl.pem   # The current CRL
private_key = $dir/private/cakey.pem# The private key
RANDFILE = $dir/private/.rand # private random number file
x509_extensions = usr_cert  # The extentions to add to the cert
name_opt  = ca_default  # Subject Name options
cert_opt  = ca_default  # Certificate field options
default_days = 365   # how long to certify for
default_crl_days= 30   # how long before next CRL
default_md = default  # use public key default MD
preserve = no   # keep passed DN ordering
policy  = policy_match

[ policy_match ]
countryName  = match
stateOrProvinceName = match
organizationName = match
organizationalUnitName = optional
commonName  = supplied
emailAddress  = optional

[ policy_anything ]
countryName  = optional
stateOrProvinceName = optional
localityName  = optional
organizationName = optional
organizationalUnitName = optional
commonName  = supplied
emailAddress  = optional

[ req ]
default_bits  = 1024
default_keyfile  = privkey.pem
distinguished_name = req_distinguished_name
attributes  = req_attributes
x509_extensions = v3_ca # The extentions to add to the self signed cert
string_mask = utf8only
req_extensions = v3_req # The extensions to add to a certificate request

[ req_distinguished_name ]
countryName   = Country Name (2 letter code)
countryName_default  = CN
countryName_min   = 2
countryName_max   = 2

stateOrProvinceName  = State or Province Name (full name)
stateOrProvinceName_default = BeiJing

localityName   = Locality Name (eg, city)

0.organizationName  = Organization Name (eg, company)
0.organizationName_default = myca
organizationalUnitName  = Organizational Unit Name (eg, section)
commonName   = Common Name (e.g. server FQDN or YOUR name)
commonName_max   = 64
emailAddress   = Email Address
emailAddress_max  = 64

[ req_attributes ]
challengePassword  = A challenge password
challengePassword_min  = 4
challengePassword_max  = 20
unstructuredName  = An optional company name

[ usr_cert ]
basicConstraints=CA:FALSE
nsCertType = client, email, objsign
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
nsComment   = "OpenSSL Generated Certificate"
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer

[ svr_cert ]
basicConstraints=CA:FALSE
nsCertType   = server
keyUsage = nonRepudiation, digitalSignature, keyEncipherment, dataEncipherment, keyAgreement
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer
extendedKeyUsage = serverAuth,clientAuth

[ v3_req ]
subjectAltName = @alt_names

# 这里是重点，需要将里面配置为最终服务端需要的域名或者IP
# 这里可以写多个，能够自行添加DNS.X = XXXXXX
[ alt_names ]
DNS.1 = xunshi.com
DNS.2 = *.xunshi.com

[ v3_ca ]
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid:always,issuer
basicConstraints = CA:true

[ crl_ext ]
authorityKeyIdentifier=keyid:always

[ proxy_cert_ext ]
basicConstraints=CA:FALSE
nsComment   = "OpenSSL Generated Certificate"
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer
proxyCertInfo=critical,language:id-ppl-anyLanguage,pathlen:3,policy:foo

[ tsa ]
default_tsa = tsa_config1 # the default TSA section

[ tsa_config1 ]
dir  = ./demoCA  # TSA root directory
serial  = $dir/tsaserial # The current serial number (mandatory)
crypto_device = builtin  # OpenSSL engine to use for signing
signer_cert = $dir/tsacert.pem  # The TSA signing certificate
     # (optional)
certs  = $dir/cacert.pem # Certificate chain to include in reply
     # (optional)
signer_key = $dir/private/tsakey.pem # The TSA private key (optional)

default_policy = tsa_policy1  # Policy if request did not specify it
     # (optional)
other_policies = tsa_policy2, tsa_policy3 # acceptable policies (optional)
digests  = md5, sha1  # Acceptable message digests (mandatory)
accuracy = secs:1, millisecs:500, microsecs:100 # (optional)
clock_precision_digits  = 0 # number of digits after dot. (optional)
ordering  = yes # Is ordering defined for timestamps?
    # (optional, default: no)
tsa_name  = yes # Must the TSA name be included in the reply?
    # (optional, default: no)
ess_cert_id_chain = no # Must the ESS cert id chain be included?
    # (optional, default: no)

将上面的配置内容保存为 openssl.cnf放到生成的服务器证书文件的目录下（注意：修改alt_names里面的域名或者IP为最终部署需要的地址，支持通配符），然后执行创建签名申请文件即可，执行运行：

# 和创建CA时一样这里需要输入一堆服务器信息，输入项也是相同的。
# 不过在输入Common Name（CN）最好直接输入服务器的IP地址或者域名。
openssl req -config openssl.cnf -new -out server.req -key server.key

第三步通过CA机构证书对服务器证书进行签名认证

# 这里没有什么需要说的，本质上就是将签名请求文件进行签名最终得到服务器的公钥
openssl x509 -req  -extfile openssl.cnf -extensions v3_req -in server.req -out server.cer -CAkey myCA.key -CA myCA.cer -days 36500 -CAcreateserial -CAserial serial

第四步部署证书

这里应该没有什么需要说的了，我们通过Nginx部署，最终得到 server.key就是秘钥， server.cer文件就是公钥只需要配置给Nginx就行了。

3.信任CA机构证书

如果通过Windows域控创建的CA证书，其证书本身通过组策略便可以给每一个域下计算机添加机构信任。如果你没有域控只是通过 openssl创建的CA证书也没有关系，只需要将CA证书的公钥（ myCA.cer文件）导入到系统信任的根证书颁发机构里面就行了：

这个界面在windows的 internet选型->内容->证书可以打开，导入即可，也可以直接双击 cer文件进行证书安装，最终不光是windows系统，任何操作系统都可以安装证书来进行对CA机构的进行信任操作。

在对证书进行信任之后通过https打开浏览器进入内网 DNS或者 host配置的域名便可以得到没有任何警告的内容的安全连接：

如果是Mac系统访问逻辑也是一样的通过安装CA证书并且在钥匙串内添加信任之后依然可以正常访问：

在Android手机上也是一样，安装并且信任证书之后可以正常访问：

4.总结

本来对我对 https的认证逻辑其实理解没有多深入，以前也只是用过SSL证书进行TCP传输加密而已，经过对 openssl的学习现在至少在理解上达到了及格水平，不过这次学习论证与探索的过程我个人极其不愉快，本来这东西在有了理解之后大家都看得出来不是什么很难的东西，事实上我也只用了一天半就搞定了。但是网上充斥大量垃圾内容，不光没有什么正向内容甚至不少内容还TM起了误导的作用，整个中文互联网检索体系下就没有找到一篇文章稍微详细描述整个搭建逻辑与流程，简直了，最终我只能从 https原理和 openssl的官方文档开始看起，过于离谱了。基本上可以得到一个结论现在天天写一些所谓干货的博主简直就是滥竽充数，其内容千篇一律大多数也是抄袭来的基本上什么都没有说清楚简直浪费时间。

最后说一下 https的原理，在解释清楚之后其实不是绝对上的安全，结合本文各位可以想一下怎样去伪造一个页面出来？假设我是黑客来搞入侵其实只需要一个小小的脚本就可以了，我们自行制作CA和服务证书之后，通过修改HOST文件对域名解析进行劫持将其引导到我们自己的服务器，然后将我们自己制作CA证书注入目标电脑的受信任证书组，这样一来对于被入侵者已经看到是安全连接但是其请求已经被我们拦截了。所以各位不要看到https就以为安全了，一旦你的电脑本身就被入侵了那么 https也是形同虚设的，所以在执行高风险操作的时候最好还是点开站点的证书看看对应的CA机构是不是被修改过。

微软Edge浏览器内置VPN功能

Mon, 02 May 2022 15:07:34 CST

DoNews 5月2日消息（刘文轩）苹果在 macOS Monterey 与 iOS/iPadOS 15 开始推出名为“Private Relay”的 VPN 服务，与之相对的，作为 Windows 系统的开发商，微软也在自家的浏览器中推出类似服务，确保用户上网安全。

这项服务由微软与 Cloudflare 合作完成，名为“Microsoft Edge Secure Network”，宣称可确保经由Edge送出的数据通过加密通道传送，即使用户访问的是使用HTTP、较不安全的网站也是如此。

启用这项服务后，上网活动与网页数据都能获得保护，可防止运营商或骇客得知用户访问了哪些网站、用户所在地点或IP地址，或是在公共Wi-Fi网络窃听通过网页传送的信息，像是帐号密码等。用户以微软帐号登陆Edge后，每月可免费使用1GB的数据传输量。

这项服务结合Cloudflare基础架构，为提供这项服务，后者扮演微软的数据委外处理者（subprocessor）搜集一小部份关于HTTP/HTTPS呼叫的诊断和支持信息，以观察来源、目的地IP、传输埠、时间戳以及Edge提供的存取令牌。Cloudflare会在每25小时后永久删除这些数据。

在与微软的合作下，Cloudflare不会将Edge用户数据转给、授权或销售给任何人或组织，也不会以用户上网记录数据，或整合Cloudflare及其他单位数据来建立用户档案。

要使用Microsoft Edge Secure Network，用户必须具备微软帐号并登陆，微软会搜集每月Edge Secure Network服务频宽用量，并在限额用罄前发出提醒。

除了微软 Edge，其他浏览器也提供了类似功能，包括Chrome已经内置支持使用L2TP over IPsec 的VPN服务。 Mozilla也和ProtonVPN合作，为Firefox浏览器用户提供付费VPN服务，每月4.99美元支撑5台设备。

为什么不应将密码保存在浏览器中

Thu, 30 Dec 2021 19:40:18 CST

恶意软件 RedLine 瞄准了 Chrome、Edge 和 Opera 等流行浏览器，表明为什么将密码存储在浏览器中是个糟糕的主意。这种恶意软件是一种商品化的信息窃取程序，可在网络犯罪论坛上以大约 200 美元买到，不需要太多知识即可轻松部署。AhnLab ASEC 的新报告警告称，贪图方便使用浏览器的自动登录功能正成为影响组织和个人的重大安全隐患。使用浏览器存储登录凭据的做法既诱人又方便，但是即使没有感染恶意软件，此举也有风险。因为这将允许在本地或者远程访问计算机的人在几分钟内窃取所有的密码。最好使用专用的密码管理器将一切存储在加密的保险库并要求使用主密码解锁，以及使用多因素认证。RedLine 针对的是基于 Chromium 浏览器的 Login Data 文件以及用于保存用户名和密码的 SQLite 数据库。

尝试解析下 Epub.js：一个在浏览器上渲染 Epub 图书的工具

Sat, 20 Nov 2021 00:00:00 CST

一直在看 Epub 类型的图书，很好奇一个 Epub 解析器是如果工作的。碰巧看到了 Epub.js，体验了一下还可以。就尝试分析一下它的实现。本文会先介绍下 EPUB 格式,再来分析 Epubjs 的实现. 我前端经验仅限于了解常见标签含义，可能会有各种错误恳请斧正。

Epub

EPub是一个自由的开放标准，属于一种可以“自动重新排版”的内容；也就是文字内容可以根据阅读设备的特性，以最适于阅读的方式显示。EPub档案内部使用了XHTML或DTBook（一种由DAISY Consortium提出的XML标准）来展现文字、并以zip压缩格式来包裹档案内容。EPub格式中包含了数位版权管理（DRM）相关功能可供选用

以上来自维基百科: https://zh.wikipedia.org/wiki/EPUB

本文参考的规范为: Epub 3.2该规范发布于 2019-05-08, 定义了 EPUB 图书格式和 EPUB 图书的浏览器应实现的功能. Epub格式由以下规范组成:

EPUB Packages — 定义内容的每个Rendition的要求。
EPUB Content Documents — 定义了在 EPUB 出版物上下文中使用的 XHTML、SVG 和 CSS 的配置文件。
EPUB Media Overlays — 定义了文本和音频同步的格式和处理模型。
EPUB Open Container Format — 定义了一种文件格式和处理模型，用于将一组相关资源封装到单个文件 (ZIP) EPUB 容器中。
EPUB Accessibility — 定义 EPUB 出版物的可访问性一致性和发现要求。

如下图: EPUB图书的内容是由一个或多个Rendition组成，每个Rendition都由所谓的EPUB Package 表示。 EPUB Package包含呈现内容所需的所有资源。其中的关键文件是Package Document，它包括阅读系统用于向用户呈现EPUB图书的所有元数据（例如标题和作者等）。它还提供了一个完整的资源清单，并包括一个 SPINE(用来表是文档出现的顺序)。 EPUB Package还包括另一个称为EPUB Navigation Document的文件。本文档提供了导航功能，例如目录，允许用户快速轻松地导航内容。 EPUB 图书的资源捆绑在一个基于 ZIP 的文件中，文件扩展名为.epub. 作为符合 ZIP 格式的文件，EPUB 出版物可以被许多软件程序解压缩，从而简化了它们的使用。

参考规范来制作一个简单Epub 图书

按照下图的方式来组织目录和文件

mimetype 文件名固定, 内容也固定位: `application/epub+zip`

META-INF/container.xml 为入口文件,文件名固定.

内容如下: 其中rootfile指定了package file

    <?xml version='1.0' encoding='utf-8'?><containerxmlns="urn:oasis:names:tc:opendocument:xmlns:container"version="1.0"><rootfiles><rootfilefull-path="OPS/package.opf"media-type="application/oebps-package+xml"/></rootfiles></container

OPS/package.opf

Package 文件, 定义了书籍的 meta 信息, 资源列表和阅读顺序(Spine) 内容如下:

metadata: 标签定义的作者等信息
manifest: 定义了资源列表,如正文页面, 目录, 封面图片, CSS, JS 等等
spine: 定义了书籍连续阅读的顺序.
- Liner 代表顺序是否为必要顺序. 如目录和封面不一定强制按照这个顺序来阅读. 或者说是在做阅读器是可以把 Liner=no页面弹窗
- 和目录/书签最显著的区别, Spine 是按照资源文件来组织循序. 目录/书签等是可以指定到资源内的标签.

    <?xml version='1.0' encoding='utf-8'?><packagexmlns="http://www.idpf.org/2007/opf"unique-identifier="uuid_id"version="3.2"prefix="calibre: https://calibre-ebook.com"><metadataxmlns:dc="http://purl.org/dc/elements/1.1/"><dc:titleid="id">Calvin用来演示 EPUBJS 的书</dc:title><dc:creatorid="Creator">Calvin Wang</dc:creator><dc:identifierid="uuid_id">urn:uuid:5F1E4C07-2A52-48BC-BBA5-E98564559794</dc:identifier><dc:language>zh-CN</dc:language><metaproperty="dcterms:modified">2021-11-14T08:32:29Z</meta></metadata><manifest><itemid="cover"href="cover.xhtml"media-type="application/xhtml+xml"/><itemid="toc"properties="nav"href="toc.xhtml"media-type="application/xhtml+xml"/><itemid="firstpage"href="first_page.xhtml"media-type="application/xhtml+xml"/><itemid="secondpage"href="second_page.xhtml"media-type="application/xhtml+xml"/><itemid="ncxtoc"href="toc.ncx"media-type="application/x-dtbncx+xml"/><itemid="cover-image"properties="cover-image"href="images/cover.png"media-type="image/png"/></manifest><spinetoc="ncxtoc"><itemrefidref="cover"linear="no"/><itemrefidref="toc"linear="no"/>ß<itemrefidref="firstpage"linear="yes"/><itemrefidref="secondpage"linear="yes"/></spine></package>

其他页面

    <--!CoverPage--><?xml version="1.0" encoding="UTF-8"?><htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"><head><title>Cover Page</title><metacharset="utf-8"/></head><body><div><imgsrc="images/cover.png"alt="Cover Image"title="Cover Image"/></div></body></html><--!firstpage--><?xml version="1.0" encoding="UTF-8"?><htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"><head><title>First Page</title><metacharset="utf-8"/></head><body><sectionepub:type="bodymatter chapter"><header><h1><spanid="c002p0000">First Page</span></h1></header><p><spanid="c002p0001">First Page: aaaaaaaaaaaa</span></p><p><spanid="c002p0002">First Page: bbbbbbbbbbbbb</span></p></section></body></html><--!TOCPage--><?xml version='1.0' encoding='utf-8'?><htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://purl.org/dc/elements/1.1/"><head><title>Cover</title></head><body><navxmlns:ns0="http://www.idpf.org/2007/ops"ns0:type="toc"><ol><li><ahref="cover.xhtml">Cover Page</a></li><li><ahref="toc.xhtml">Nav Page</a></li><li><ahref="first_page.xhtml">First Page</a></li><li><ahref="second_page.xhtml">Second Page</a></li></ol></nav></body></html>

把目录打包成 EPUB 文件

如下图: 用 ZIP 压缩文件至 first-epub.epub

    zip-r../first-epub.epub*

把做好的图书用自带的 Book 打开来看看

Epub.js

Epub.js 是一个 JavaScript 库，用于在浏览器中跨多种设备呈现 ePub 文档。 Epub.js 为常见的电子书功能（如渲染、持久化和分页）提供了一个接口，而无需开发专用的应用程序或插件。重要的是，它是 BSD 许可证。

翻译自项目 README

来看看官方的DEMO

高亮备注分页等等常用功能是均支持的

来实现一个”Hello Word”

    <!DOCTYPE html><html><head><metacharset="utf-8"><title>Demo for Epub.js</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script><scriptsrc="https://futurepress.github.io/epub.js/dist/epub.js"></script></head><body><divid="nav"><selectid="toc"></select></div><divid="viewer"></div><script>var$viewer=document.getElementById("viewer");// Load the opfvarbook=ePub("https://blog.calvin.wang/assets/first-epub.epub",{store:"epubjs-test"});varrendition=book.renderTo("viewer",{width:"100%"});vardisplayed=rendition.display();book.loaded.navigation.then(function(toc){var$select=document.getElementById("toc"),docfrag=document.createDocumentFragment();toc.forEach(function(chapter){varoption=document.createElement("option");option.textContent=chapter.label;option.ref=chapter.href;docfrag.appendChild(option);});$select.appendChild(docfrag);$select.onchange=function(){varindex=$select.selectedIndex,url=$select.options[index].ref;rendition.display(url);returnfalse;};});</script></body></html>

来看看它有哪些 Model

Book: 用来代表一个 Epub 图书,用来加载和解析其内容
- Container: 用来解析 Container, 主要用来从 “META-INF/container.xml”获取 PackagePath
- Packaging: 用来解析 Package, 主要用来获取manifest cover spine metadata nav ncx
Rendition: 负责将 Book 的内容渲染在网页上,并进行控制.
- Manager: 用来控制网页上的呈现方式(default: DefaultViewManager)
- View: 展现在页面上的样式(default: IframeView)
EpubCFI: 是一个规范,定义了一种标准化方法，用于通过使用片段标识符来引用 EPUB® 出版物中的任意内容. 可以参考: http://idpf.org/epub/linking/cfi/epub-cfi.html
辅助类:
- Theme: 样式主题
- Annotations: 注解

流程怎么控制的

Rendition:
- 支持HOOK的阶段:
  - content: Pages/View内容被解析和加载,现有的 HOOK
    - handleLinks: 处理内容中的连接
    - passEvents: 内容中产生的事件同步
    - adjustImages: 调整图片
  - unloaded: Pages/View内容从屏幕中卸载
  - render: Pages/View被渲染到屏幕
Spin:
- 支持HOOK的阶段:
  - Serialize: Pages/View 被转换为 text
  - Content: Pages/View 被加载和解析. 现有的 HOOK
    - injectStylesheet: 注入样式表
    - injectScript: 注入脚本

还没有完全看懂的内容, 感觉是语言特性:

Promise 的用处?
Event的传递方式?

Flex 布局在各家浏览器下的一些bug，尤其是IE - kiera - 博客园

Thu, 11 Jul 2019 10:29:42 CST

Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.

IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.

Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.

IE 11 does not vertically align items correctly when min-height is used see bug

Flexbugs: community-curated list of flexbox issues and cross-browser workarounds for them

In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

In Safari 10.1 and below, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. Fixed in all versions > 10.1 ( See bug) The bug also appeared in Chrome but was fixed in Chrome 51

1. Safari 10 及以下用 min/max width/height 这些声明来渲染弹性伸缩项目的尺寸，但是如果容器包含多行项目，它不会计算有多少项目在同一行上。相反它只简单计算 flex-basis 的值，如果flex-basis 值未设置，默认为auto的话，则使用弹性项目设定的宽度。原文提供了该bug链接 - Safari (WebKit) doesn't wrap element within flex when width comes below min-width，给弹性伸缩项目宽度设定min-width后，在Safari浏览器中不会换行，这个bug在10以上的版本已修复。

2. （该被扫进历史垃圾堆的IE8,9不支持flex。IE10以后支持了，要加-ms-前缀。就算是IE11，也不省心。来自本喵団団的吐槽）

在IE11下，flex: 0 1 auto; 第三个参数要加一个单位。（第三个参数就是flex-basis属性的值。这个值可以是数字，比如长度单位或者百分比，也可以是auto，长度根据内容决定。）

看这里提供的链接， see MSFT documentation。

这里提到，微软发布的新浏览器，Microsoft Edge对于flex-baisis的兼容情况：

不再支持 -ms-前缀，

支持flex-basis的值为auto，既长度等于项目的长度，如果未指定长度，根据内容决定。

Windows Phone 8.1 的IE 和微软Edge，可支持 -webkit-flex-basis 别名。

3. IE10、11-preview：flex容器如果设定了属性flex-direction: column, 以及min-height，但是未设定高度，在计算子项目的尺寸时将出现偏差...这个bug已经在Edge解决。

（微软的意思是，该进垃圾堆的老旧浏览器就赶紧扔掉，鼓励用户更新新的浏览器版本。又不是安全问题，反正宝宝就是不修复IE10的这个跟安全问题无关的bug。）

4. Firefox 51及以下版本不支持按钮元素作为弹性容器，版本52已修复。 Flexbox in button elements. （按钮元素比较特别，它不仅仅不支持flex，还不支持overflow:scroll, display:table等等。）

5. IE 11： Flex容器如果设定了min-height，那么 align-items: center; 不起作用。 see bug

(看bug链接里描述的，设定height:auto; 并设定min-height, align-items: center不能让容器下的项目垂直居中。)

6. Flexbugs: 这是个gitub地址，精选了一些flex容器问题以及跨浏览器的解决办法。目的是提供flex布局下出现bug的解决方案。

7. IE 10：felx的默认值是 0 0 auto。而最新规范的默认值是 0 1 auto。（第二个参数是flex-shrink，规范默认为1，如果空间不足，该子项目将缩小。而IE默认为0，则默认项目不缩小。）

Declaration	What it should mean	What it means in IE 10
(no flex declaration)	`flex: 0 1 auto`	`flex: 0 0 auto`
`flex: 1`	`flex: 1 1 0%`	`flex: 1 0 0px`
`flex: auto`	`flex: 1 1 auto`	`flex: 1 0 auto`
`flex: initial`	`flex: 0 1 auto`	`flex: 0 0 auto`

8. Safari 10.1 及以下版本：弹性伸缩项目的高度如果设置为百分比，无法被识别。10.1以后的版本，以及在Chrome51版本，这个bug得到修复。

下一篇将重点介绍IE浏览器，毕竟IE不奇葩谁奇葩

链接：

https://github.com/philipwalton/flexbugs

vue iview-admin 如何兼容IE浏览器（通用） - Gas_station的博客 - CSDN博客

Wed, 10 Jul 2019 12:35:24 CST

iview作者说：

对于ie我们没有做过多的兼容处理，如果使用者需要兼容ie，可以install babel-polyfill，然后在main.js上面加载这个包即可

      1. 安装babel-polyfill
  `npm install babel-polyfill --save`

2. src/main.js 引入babel-polyfill
  `import '@babel/polyfill`

3. 在根目录增加babel.config.js文件
  ```
  module.exports = {
    presets: [
      ['@vue/app', {
        useBuiltIns: 'entry' // src全局es5编译
      }]
    ]
  }
  ```

4. vue.config.js引用babel-polyfill并且加入配置
  ```
  require('babel-polyfill')
  module.exports = {
    ...{ /* 一些别的配置 */ },
    
    // 关键配置：node_modules里面需要用babel-loader进行编译的包（node_modules的包如果没做 es6 => es5 转码则需要自己用babel-polyfill进行手动处理）
    // 如果IE下还跑不起来，控制台发现有其他es6语法的，尝试调试去找到底是哪个包
    transpileDependencies: [
      'iview',
      'axios'
    ],
  }
  ```

另一种写法如图：

OK，收工！如果可以实现记得点赞分享，谢谢老铁～

谷歌浏览器Chrome离线包下载

Sat, 13 Apr 2019 12:31:55 CST

由于谷歌浏览器Chrome无法在中国大陆下载，因此提供文件来源于谷歌官方网站的谷歌浏览器Chrome离线包（Windows 10/8.1/8/7 64 位）下载。

下载谷歌浏览器Chrome离线包

Google Chrome是由 Google开发的免费网页浏览器 ^[9]。Chrome是化学元素“ 铬”的英文名称，过去也用Chrome称呼浏览器的外框 ^[10] ^[11] ^[12] ^[13]。Chrome相应的开放源代码计划名为 Chromium ^[14] ^[15]，而Google Chrome本身是非自由软件，未开放全部源代码 ^[9] ^[16]。

Chrome代码是基于其他开放源代码软件所编写，包括 Apple WebKit和 Mozilla Firefox，并开发出称为“ V8”的高性能 JavaScript引擎 ^[17]。Google Chrome的整体发展目标是提升稳定性、速度和安全性，并创造出简单且有效率的用户界面 ^[18]。 CNET旗下的 Download.com网站评出的2008年6月最佳Windows应用程序，其中Google Chrome排名首位 ^[19]。

据 StatCounter统计，截至2018年第一季度，Google Chrome在全球桌面浏览器的网页浏览器的使用分布为66% ^[20]。

Chrome 50结束了对 Windows XP与 Windows Vista系统的支持 ^[21]，这两个系统上的最后版本为49.0.2623.112 ^[22]

UC浏览器被曝中间人攻击漏洞，全球多达十几亿设备均受影响

Wed, 27 Mar 2019 16:56:27 CST

自从 Symbian 时代开始，UC浏览器就已经成为移动端用户量最大的浏览器之一，此后逐渐发展之Android、iOS及Windows平台。目前在Google Play上UC浏览器安装量超过5亿、而在国内某安卓应用市场下载量也超过12亿。

Android端UC浏览器中间人攻击 Demo

而近期，Dr.Web恶意软件分析师发现UC浏览器存在中间人攻击漏洞，允许远程攻击者将恶意模块推送到目标设备。而根据 BleepingComputer 的测试结果，桌面端UC浏览器可能同样容易遭受中间人攻击，导致攻击者可以在用户电脑上下载恶意拓展。

根据Google Play的政策，应用程序禁止从Google Play意外的其他来源下载可执行代码。不过，虽然UC浏览器在Google Play上架，但其本身却存在违反上述规定的行为。

根据Dr.Web的分析，UC浏览器可以从远程服务器下载可执行的Linux组件，其本身并不存在恶意行为，只是为了方便打开office、PDF文档。下载之后，该组件会保存到其目录下以供执行。这也意味着，UC浏览器存在直接绕过 Google Play 服务器直接接受和执行代码，这也为中间人攻击提供了可能。

为了下载新的插件，UC浏览器会向远程服务器发送请求，并接收响应文件的链接。关键在于，应用程序是通过不安全的通道（HTTP协议而不是加密的HTTPS）与服务器实现通信。攻击者可以hook来自应用的请求并替换命令，使得浏览器在无意识中从恶意服务器下载某个插件。而UC浏览器由于使用未签名的插件，启动恶意插件无需经过任何安全验证。

鉴于UC浏览器在全球范围内的装机量，该漏洞所带来的威胁不容小觑。通过这种中间人攻击的模式，犯罪分子可以传播并执行各种恶意差插件，例如可以显示钓鱼邮件以窃取用户名、密码、银行卡信息等多种个人数据，才外，还可木马插件还能够访问受保护的浏览器文件并窃取存储在程序目录中的密码信息。

除了UC浏览器之外，Google Play还上架了一款“UC 浏览器 Mini版”，显示安装次数已经超过1亿。在UC 浏览器 Mini版本中，同样存在绕过Google Play下载未经测试插件的行为，这表明同样存在中间人攻击的风险。不过，上述视频所展示的中间人攻击方式并不适用于Mini版本的UC浏览器。

桌面端UC浏览器，通过HTTP下载插件

不止在Android版本，BleepingComputer对桌面端UC浏览器进行了类似的测试。桌面端UC浏览器在查看PDF文档时会要求下载额外的插件，通过不安全的HTTP通信从远程服务器下载插件。这意味着攻击者可能通过中间人攻击的方式在用户计算机上下载恶意插件。

在发现该漏洞之后，Dr.Web专家联系了两个浏览器的开发人员，但均拒绝发表评论。于是，Dr.Web方面转而直接将此情况报告给Google，但截止FreeBuf发稿之时，两款UC浏览器在Google Play商店依然可供下载，且该漏洞仍然可被利用。

参考链接

1. https://vms.drweb.com/search/?q=UC%20Browser

2. https://news.drweb.com/show/?i=13176

3. https://www.bleepingcomputer.com/news/security/uc-browser-for-android-desktop-exposes-500-million-users-to-mitm-attacks/

*本文作者：shidongqi，转载请注明来自FreeBuf.COM

微软正式宣布！桌面版Edge浏览器将采用Chromium内核

Fri, 07 Dec 2018 01:52:50 CST

IT之家12月7日消息当地时间12月6日上午9点，微软在其官方博客发表了一篇题为《Microsoft Edge: Making the web better through more open source collaboration》的博文。在文章中，微软宣布，他们打算采用Chromium开源项目开发桌面版的Microsoft Edge浏览器。

经过过去几年的积极参与，微软已经成为世界上最大的开源软件支持者之一，微软决定基于Chromium项目来开发Microsoft Edge浏览器，旨在为用户提供更好的Web兼容性，并减轻Web碎片化。

基于开源内核来开发Microsoft Edge浏览器对微软来说并不新鲜，其面向Android平台的Edge浏览器从一开始就采用了开源的Chromium内核，此外，桌面版Edge浏览器中的很多功能都是基于开源代码实现的，例如Angle、Web Audio、Brotli。目前，微软已经开始为Chromium项目提交贡献，以推动基于Windows 10 ARM64的新设备的浏览体验。

微软的新重点

在接下来一年左右的时间里，微软将对Microsoft Edge浏览器进行技术变革，此变革的关键方面有：

1、微软将在桌面上迁移到适用于Microsoft Edge的兼容Chromium的Web平台。微软的目的是将Microsoft Edge的Web平台与Web标准同其他基于Chromium的浏览器保持一致。这将为每个人提供更好的兼容性体验，并为Web开发人员创建更简单的测试矩阵。

2、Microsoft Edge将会实现更高频率的更新交付，同时，微软还希望这项工作能够使他们将Microsoft Edge浏览器带到其他平台，例如苹果的macOS。

3、微软将在采用Chromium开源项目开发的Microsoft Edge浏览器上提供增强功能，以便为用户提供更好的体验。

接下来会发生什么

如果你是Microsoft Edge浏览器的普通用户，你无需执行任何操作，今天，你所使用的Microsoft Edge浏览器不会发生任何变化。

如果你是一名Web开发人员，那么微软诚邀你体验采用Chromium开源项目开发的Microsoft Edge的预览版本并向微软提交反馈。微软表示，希望在2019年初准备好采用Chromium开源项目开发的Microsoft Edge的预览版本。

如果你是开发浏览器的开源社区中的一员，微软诚邀您与之合作，共同塑造Microsoft Edge浏览器的未来，并为Chromium项目做出贡献，例如帮助微软开展Chromium对Windows 10 ARM64的支持工作等。

若要了解更多详细信息，请点击这里阅读微软官方博客的博文（英文）。

浏览器输入url到发起http请求所经历的过程

Sun, 18 Nov 2018 16:33:45 CST

用户输入url

当用户输入url，操作系统会将输入事件传递到浏览器中，在这过程中，浏览器可能会做一些预处理，比如 Chrome 会根据历史统计来预估所输入字符对应的网站，例如输入goog，根据之前的历史发现 90% 的概率会访问「www.google.com 」，因此就会在输入回车前就马上开始建立 TCP 链接甚至渲染了。

接着是输入url之后，点击回车，这时浏览器会对 URL 进行检查，首先判断协议，如果是 http 就按照 Web 来处理，另外还会对这个 URL 进行安全检查

安全检查完成之后，在浏览器内核中会先查看缓存，然后设置 UA 等 HTTP 信息，接着调用不同平台下网络请求的方法。

注意：
浏览器和浏览器内核是不同的概念，浏览器指的是 Chrome、Firefox，而浏览器内核则是 Blink、Gecko，浏览器内核只负责渲染，GUI 及网络连接等跨平台工作则是浏览器实现的

http网络请求

通过 DNS 查询 IP；
通过 Socket 发送数据

dns查询ip

DNS，英文是Domain Name System，中文叫域名系统，是Internet的一项服务，他将域名和IP地址相互映射的一个分布式数据库

假设用户在浏览器中输入的是www.google.com，大概过程：

如果输入的是域名，则需要进行dns查询，将域名解析成ip；

进行DNS查询的主机或软件叫做DNS解析器，用户使用的工作站或电脑都属于解析器。域名解析就是利用DNS解析器得到对应IP过程，解析器会向域名服务器进行查询处理。

主要过程如下：

从浏览器缓存中查找域名www.google.com的IP地址
在浏览器缓存中没找到，就在操作系统缓存中查找，这一步中也会查找本机的hosts看看有没有对应的域名映射（当然已经缓存在系统DNS缓存中了）
在系统中也没有的话，就到你的路由器来查找，因为路由器一般也会有自己的DNS缓存

如果以上都没有找到，则继续往下向dns域名服务器查询

用户电脑的解析器向LDNS（也就是Local DNS，互联网服务提供商ISP），发起域名解析请求，查询www.google.com的IP地址，这是一个递归查找过程
在缓存没有命中的情况下，LDNS向根域名服务器.查询www.google.com的IP地址，LDNS的查询过程是一个迭代查询的过程
根告诉LDNS，我不知道www.google.com对应的IP，但是我知道你可以问com域的授权服务器，这个域归他管
LDNS向com的授权服务器问www.google.com对应的IP地址
com告诉LDNS，我不知道www.google.com对应的IP，但是我知道你可以问google.com域的授权服务器，这个域归他管
LDNS向google.com的授权服务器问www.google.com对应的IP地址
google.com查询自己的ZONE文件（也称区域文件记录），找到了www.google.com对应的IP地址，返回给LDNS
LDNS本地缓存一份记录，把结果返回给用户电脑的解析器
在这之后，用户电脑的解析器拿到结果后，缓存在自己操作系统DNS缓存中，同时返回给浏览器，浏览器依旧会缓存一段时间。

注意，
域名查询时有可能是经过了CDN调度器的（如果有cdn存储功能的话）

而且，需要知道dns解析是很耗时的，因此如果解析域名过多，会让首屏加载变得过慢，可以考虑dns-prefetch优化

tcp/ip请求

有了 IP 地址，就可以通过 Socket API 来发送数据了，这时可以选择 TCP 或 UDP 协议。

http本质是tcp协议。

TCP是一种面向有连接的传输层协议。他可以保证两端（发送端和接收端）通信主机之间的通信可达。他能够处理在传输过程中丢包、传输顺序乱掉等异常情况；此外他还能有效利用宽带，缓解网络拥堵。

建立TCP连接一开始都要经过三次握手：

第一次握手，请求建立连接，发送端发送连接请求报文
第二次握手，接收端收到发送端发过来的报文，可知发送端现在要建立联机。然后接收端会向发送端发送一个报文

第三次握手，发送端收到了发送过来的报文，需要检查一下返回的内容是否是正确的；若正确的话，发送端再次发送确认包

在TCP连接建立完成之后就可以发送HTTP请求了。

注意
浏览器对同一个域名有连接数限制，大部分是 6，http1.0中往往一个资源下载就需要对应一个tcp/ip请求，而像 HTTP 2.0 协议尽管只使用一个 TCP 连接来传输数据，但性能反而更好，而且还能实现请求优先级。

参考文章：
http://fex.baidu.com/blog/201...
https://blog.csdn.net/dojiang...
https://segmentfault.com/a/11...

黑客是如何利用你的浏览器进行挖矿的？

Wed, 30 May 2018 09:00:31 CST

0×1 概述

近期，千里目安全实验室监测到了一大批网站系统被恶意植入了网页挖矿木马，只要访问者通过浏览器浏览被恶意植入了网页挖矿木马站点，浏览器会即刻执行挖矿指令，从而沦为僵尸矿机，无偿的为网页挖矿木马植入者提供算力，间接为其生产虚拟货币，这是一种资源盗用攻击。由于网页挖矿木马存在很广的传播面和很不错的经济效益，因此、广受黑产团体的追捧，让我们对它防不胜防！

0×2 千里百科

区块：在区块链网络上承载交易数据的数据包。它会被标记上时间戳和之前一个区块的独特标记。区块头经过哈希运算后会生成一份工作量证明，从而验证区块中的交易。有效的区块经过全网络的共识后会被追加到主区块链中。

区块链：狭义来讲，是一种按照时间序列将数据区块以顺序相连的方式组合成的一种链式数据结构，并以密码学方式保证的不可篡改和不可伪造的分布式账本。

矿机：矿机是挖矿机器的简称，就是用于赚取数字货币的计算机，这类计算机一般有专业的挖矿芯片，多采用烧显卡的方式工作，耗电量较大。个人计算机可以通过挖矿软件来运行特定的算法产生算力(俗称挖矿)来获得相应数字货币。

矿池：由于单一矿机想挖到一个块的几率是非常小的，通过矿机联合挖矿以提高几率。一个矿池的算力是很多矿机算力的集合，矿池每挖到一个块，便会根据你矿机的算力占矿池总算力的百分比，发相应的奖励给到个体，也不会存在不公平的情况。

挖矿：挖矿是反复尝试不同的随机数对未打包交易进行哈希，直到找到一个随机数可以符合工作证明的条件的随机数，以构建区块。如果一个矿工走运并产生一个有效的区块的话，会被授予的一定数量的币作为奖励。

钱包：钱包指保存数字货币地址和私钥的软件，可以用它来接受、发送、储存你的数字货币。

0×3 家族样本分析

千里目安全实验室通过持续对全网进行安全监测，发现近期有如下十种家族的网页挖矿木马的传播比较活跃。详情分析如下所示：

1 、 C oinhive家族网页挖矿木马介绍：

Coinhive是一个专门提供挖矿代码的JS引擎，在被攻击网站的网页内嵌一段JS挖矿代码，只要有人访问被攻击的网站，JS挖矿代码就会通过浏览器上执行挖矿请求，占用大量的系统资源，导致CPU资源利用率突然大幅度提升，甚至100％。在这过程中网站只是第一个受害目标，而网站的访问者才是最终的受害目标。

1.1、Coinhive家族网页挖矿木马代码，如下所示：

1.2、执行JS挖矿代码前后的效果，如下图所示：

1.3、通过快捷键（Shift+ESC)来查看浏览器的任务管理器，发现正是刚打开的“XMR Mining Page”网站页面占用了98.4%的CPU资源，正在疯狂的挖矿。如下图所示：

2、JSEcoin家族网页挖矿木马介绍：

JSEcoin是与Coinhive类似的JS挖矿引擎，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。但是与后者不同的是，JSECoin会将CPU使用率限制在15％至25％之间，并且始终显示隐私声明，为用户提供退出选项(可选择不提供运算服务)。

2.1、JSEcoin家族网页挖矿脚本代码，如下所示：

2.2、通过对JSEcoin挖矿代码进行调试，发现执行完挖矿代码后会持续接收到需要运算的任务，如下图所示：

2.3、通过进一步跟踪运算过程，发现其通过WSS协议来获取区块的计算任务，然后将结果进行回传效验，校验通过的会显示OK标记。如下图所示：

3、CryptoLoot家族网页挖矿木马介绍：

CryptoLoot是与Coinhive类似的JS挖矿引擎，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。不过CryptoLoot平台的佣金比Coinhive平台的佣金低很多，这可以大大降低以挖矿为盈利目标的黑色产业链成本。

3.1、CryptoLoot网页挖矿脚本代码，如下所示：

3.2、CryptoLoot网页挖矿脚本代码参数介绍，如下所示：

miner.min.js：为JS挖矿脚本。

85e693dfe57edbdf8f53640b4c0b0d257513a504c503：为SiteKey,可以理解为JS挖矿引擎识别站点的唯一标识。

threads(value)：指挖矿运算所启用的线程数量。这里的值为3，即表示启用3个线程进行挖矿运算。

autoThreads(value)：这里的Value可以设置为true和false，当设置为true时，表示自动检测用户计算机上可用的CPU内核数量。

throttle(value)：这里的value是设置线程闲置时间比例的。如果值为0，即表示不进行节流(即进行CPU满载运算)。这里的值为0.2即表示将在20%的时间内保持空闲状态。

4、DeepMiner家族网页挖矿木马介绍：

DeepMiner是一个开源的JS挖矿项目，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。

4.1、DeepMiner网页挖矿脚本代码，如下所示：

4.2、DeepMiner网页挖矿脚本同源分析：

DeepMiner是一个已经被开源了的项目，通过分析，发现上面的挖矿脚本代码为此开源项目修改而来（开源项目地址为： https://github.com/deepwn/deepMiner）。

5、Webmine家族网页挖矿木马介绍：

Webmine也是一个与Coinhive类似的JS挖矿引擎，在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。

5.1、Webmine网页挖矿脚本代码，如下所示：

5.2、访问JS挖矿站点时，发现CPU使用率剧增，随后退出对JS挖矿站点的访问，发现CPU的使用率一下子就降下来了。如下图所示：

6、AuthedMine家族网页挖矿木马介绍：

AuthedMine也是一个与Coinhive类似的JS挖矿引擎，在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。

6.1、AuthedMine网页挖矿脚本代码，如下所示：

6.2、 AuthedMine网页挖矿脚本与之前的几种相比有比较大的改进，大致如下3点：

设置了线程闲置时间比例，这样不容易被矿机受害者发现和察觉。

设置了挖矿设备类型，只对非移动设备进行挖矿运算，防止手持终端设备被卡死。

设置了挖矿运算时间，只挖矿4小时，避免长时间CPU过高而遭暴露。

7、BrowserMine家族网页挖矿木马介绍：

BrowserMine是一个与DeepMiner类似的JS挖矿引擎，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。

7.1、BrowserMine网页挖矿脚本代码，如下所示：

7.2、执行JS挖矿代码前后的效果，如下图所示：

8 、 Coinimp 家族网页挖矿木马介绍：

Coinimp是与Coinhive类似的JS挖矿引擎，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。稍有不同的是Coinimp的平台费用基本免费，而且JS挖矿脚本可以重置为任意名字存放在本地，伪装性更高。

8.1、Coinimp网页挖矿脚本代码，如下所示：

8.2、Coinimp网页挖矿脚本代码与之前的几个有一个明显的区别就是SiteKey值变成了64位，同时，JS挖矿代码可以保存到本地存储了，访问参数与JS脚本名称可以自行定义。

9、CryptoWebMiner家族网页挖矿木马介绍：

CryptoWebMiner是与Coinhive类似的JS挖矿引擎，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。不过CryptoWebMiner平台的佣金比Coinhive平台的佣金低很多，这可以大大降低以挖矿为盈利目标的黑色产业链成本。

9.1、CryptoWebMiner网页挖矿脚本代码，如下所示：

9.2、CryptoWebMiner网页挖矿脚本代码结构与Coinhive很类似，但支持的币种比较多，主要有BTC、ETH、ZEC、ETN、XMR。另外，它支持的平台也很多，分别为手机端挖矿、PC端挖矿、WEB端挖矿，可见传播面很广。

10、PPoi家族网页挖矿木马介绍：

PPoi是与Coinhive类似的JS挖矿引擎，也是在有访问量的网站中嵌入一段网页挖矿代码，利用访客的计算机CPU资源来挖掘数字货币进行牟利。

10.1、PPoi网页挖矿脚本代码，如下所示：

10.2、通过访问PPoi平台官方地址，发现已经被Google GSB加入黑名单了。如下所示：

0×4 趋势分析与统计

1、我们通过对分析过的网页挖矿木马代码特征，使用FOFA对全球所有在线Web应用系统进行统计，发现有60742892个Web应用被恶意挂载了网页挖矿木马。如下为全球TOP10地域的网页挖矿木马感染量和分布情况。详情如下所示：

统计数据来自于FOFA平台

2、进一步通过这些网页挖矿木马的代码特征来对中国境内所有在线Web应用系统进行分析和统计，发现有4557546个Web应用被恶意挂载了网页挖矿木马。如下为中国境内TOP N地域的网页挖矿木马感染量和分布情况。详情如下所示：

统计数据来自于FOFA平台

0×5 安全建议

ü 定期对服务器中的数据做备份，看到类似以上10种形态的可疑脚本代码，需提高警惕(这很可能意味着我们的站点和服务被入侵了 )，找专业的安全人员来做分析和处理。

ü 如在服务器中发现存在可疑的后门或恶意代码，需做全局的排查和清理，然后再做安全加固工作。

ü 定期主动对服务器及服务器中的应用进行安全评估，及时发现潜在的风险，并及时处置和修复。

0×6 IOCs

C 2 ：

https://coinhive.com

https://coin-hive.com

https://webmine.cz

https://webmine.pro

https://munero.me

https://load.jsecoin.com

https://browsermine.com

https://authedmine.com

https://crypto-loot.com

https://cryptaloot.pro

https://ppoi.org

U RL ：

https://coinhive.com/lib/coinhive.min.js

https://coin-hive.com/lib/coinhive.min.js

https://crypto-loot.com/lib/miner.min.js

https://cryptaloot.pro/lib/miner.min.js

https://authedmine.com/lib/authedmine.min.js

https://ppoi.org/lib/projectpoi.min.js

*本文作者：千里目安全实验室，转载请注明来自 FreeBuf.COM

[Python爬虫]使用Selenium操作浏览器订购火车票

Tue, 20 Mar 2018 20:39:07 CST

作者:宅必备
一个会写Python的Oracle DBA
个人公众号:宅必备

前文传送门：

[Python程序]利用微信企业号发送报警信息

[Python爬虫]使用Python爬取静态网页-斗鱼直播

[Python爬虫]使用Python爬取动态网页-豆瓣电影(JSON)

[Python爬虫]使用Python爬取动态网页-腾讯动漫(Selenium)

上节我们说了如何使用selenium打开网页做些简单操作

这节内容为操作浏览器自动订购12306火车票

开发环境

操作系统:windows 10

Python版本 :3.6

爬取网页模块:selenium

分析网页工具:xpath

关于Selenium

selenium 是一个Web自动测试的工具，可以用来操作一些浏览器Driver，例如Chrome，Firefox等，也可以使用一些headless的driver，例如Phantomjs

具体请参加官网:

http://selenium-python.readthedocs.io/

关于xpath

XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。

XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 都构建于 XPath 表达之上。

因此，对 XPath 的理解是很多高级 XML 应用的基础。

selenium可以使用xpath的形式来定位网页元素，我们可以通过开发者模式的来获取xpath路径，但是不推荐直接引用

详细教程查看如下网站

http://www.w3school.com.cn/xpath/index.asp

模块安装

pip3 install selenium

Chrome Driver 下载

这里我们下载Chrome driver

其他的driver见官网

http://selenium-python.readthedocs.io/installation.html#drivers

下载完成后可以放到系统环境变量中，如:

C:\Windows\System32

https://sites.google.com/a/chromium.org/chromedriver/downloads

程序原理

代码介绍

1. import相关的模块

import selenium.webdriver

from selenium.webdriver.common.keys import Keys

from selenium.webdriver.common.by import By

from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.support import expected_conditions as EC

2. 调用Chrome

driver = selenium.webdriver.Chrome()

3. 定位用户名密码

find_element_by_id表示使用id属性进行查找input标签

username= driver.find_element_by_id('username')

password= driver.find_element_by_id('password')

4. 清除用户名密码输入框内容

username.clear()

password.clear()

5. 自动输入用户名密码

username.send_keys("username")

password.send_keys("password")

6. 判断是否登陆成功

7. 选择出发地，目的地，时间后点击查询

8. 填写需要订购的火车车次

多个车次使用列表形式，冒号后面位表格的ID属性值,不包括ticket_

tickets=['D3094:5l000D309460','G7024:51000d702454']

9.获取预定，二等座，无座的xpath

yd_path='//*[@id="ticket_'+path+'"]/td[13]/a'

edz_path='//*[@id="ticket_'+path+'"]/td[4]'

wz_path = '//*[@id="ticket_' + path + '"]/td[11]'

10. 判断是否可订购

该语句表示判断是否可点击，超时时间为10s

以及是否有票

11. 确认选座

执行结果

注意事项:

打开新的页面请使用selenium wait功能以使页面完全加载
最后提交的时候可能会需要再次输入用户名密码，输入即可
本脚本仅用于学习用途

源码位置:

源码请访问我的github主页:

https://github.com/bsbforever/spider/blob/master/selenium_12306.py

现代浏览器性能优化-CSS篇

Fri, 29 Dec 2017 19:00:56 CST

我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以在这里观看。

众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到 <head>中，防止在CSS还没加载完，DOM就已经绘制出来了，造成CSS加载完成后的重绘。那在现代浏览器中我们有没有办法提高首屏渲染速度那？

你是不是经常在第一次打开某个网站的时候看到这种情况，本来的页面是这样的

实际上刚加载出来的是这样的

字体文件没加载出来，或者加载的太慢了

理解CSS解析过程

以下面这段HTML为例，解释一遍CSS加载解析的过程。

  <html>
<head>
  <!-- headStyle.css中存在字体文件webfont.woff2 -->
  <link rel="stylesheet" type="text/css" href="/headStyle.css">
</head>
<body>
  <p>Text</p>
  <link rel="stylesheet" type="text/css" href="/bodyEndStyle.css">
</body>
</html>

浏览器自上而下读取HTML文档，当发现headStyle.css的时候，停止Parser HTML，开始下载headStyle.css，解析headStyle.css的过程中发现字体文件webfont.woff2，开始下载webfont.woff2，并继续解析css生成CSSStyleSheet。解析完毕后，继续Parser HTML，当发现p标签时，会将p标签结合当前的CSSStyleSheet展示出来，此时用户屏幕中已经有p标签的内容了。当浏览器发现bodyEndStyle.css时，就会下载headStyle.css，解析CSS，然后更新CSSStyleSheet，这时会引起一次重绘。当字体下载完毕的时候也会引起一次重绘。

这个过程中，有两个非常严重的问题。一、如果headStyle.css文件很大，浏览器需要解析很多行CSS后才能还有个字体文件需要下载，其实此时已经很晚了，字体下载时间稍长一点，就会出现我前面截图提到的问题。二、bodyEndStyle.css中如果存在p标签对应的样式，那p标签的样式会在bodyEndStyle.css解析完成后，改变一次样式，很影响体验。

如何解决这些问题那？其中也会用到一些JS篇中提到的点，如果没看过，建议先看看。

优化核心依旧是减少下载时间

JS篇中的预先解析DNS（dns-prefetch）依旧适用，提前解析CSS文件所在域名的DNS。

Preload

因为CSS已经在head中，我们不需要为css加preload属性了，但是css中用到的字体文件，一定要在所有css之前proload上。

  <link rel="preload" href="/webfont.woff2" as="font">

首页CSS内联，非必要CSS异步加载

首页用到的CSS内联写在 <head>中，其余CSS均采用异步加载，可以采用这种自己实现的加载CSS的方法，在合适的需要时加载需要的css

  function LoadStyle(url) {
  try {
    document.createStyleSheet(url)
  } catch(e) {
    var cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.type = 'text/css';
    cssLink.href = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(cssLink)
  }
}

如果你使用webpack，那就更轻松了，使用import函数，大致如下

  // 在a.js模块中直接引入css
import 'style.css'

  // 在需要a.js模块的地方
improt('path-of-a.js').then(module => {})

webpack打包后，其实是把style.css打包进了a.js，在异步加载a.js的时候，会将style.css中的代码插入 haed标签中。

终极完美结构

  <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Faster</title>
  <link rel="dns-prefetch" href="//cdn.cn/">

  <link rel="preload" href="//cdn.cn/webfont.woff2" as="font">
  <link rel="preload" href="//cdn.cn/Page1-A.js" as="script">
  <link rel="preload" href="//cdn.cn/Page1-B.js" as="script">
  
  <link rel="prefetch" href="//cdn.cn/Page2.js">
  <link rel="prefetch" href="//cdn.cn/Page3.js">
  <link rel="prefetch" href="//cdn.cn/Page4.js">

  <style type="text/css">
    /* 首页用到的CSS内联 */
  </style>
</head>
<body>

<script type="text/javascript" src="//cdn.cn/Page1-A.js" defer></script>
<script type="text/javascript" src="//cdn.cn/Page1-B.js" defer></script>
</body>
</html>

在 JS篇)中，我已经解释过这套结构中JS的执行顺序了，本篇只是加入了CSS和字体。至此，我心中终极完美的页面HTML结构就是这样了。

如果你对异步加载CSS的方案感兴趣，欢迎留言与我讨论！

扩展阅读

用上了全新的火狐浏览器，这 10 款优秀的 Firefox 扩展不应错过

Fri, 22 Dec 2017 14:37:43 CST

壮士断腕，Firefox Quantum 的扩展怎么了？

如果你是 Firefox 的新用户，或者无意了解 Firefox 扩展的历史变化，也可以跳过阅读这一部分，直接阅读下面 Firefox 的扩展推荐。

距离 Firefox 57.0 版本正式发布已经有一段时间了，相信大家已经看过了许多的对比评测，自己也亲身上手试过。这可以说是 Firefox 近几年最为巨大的一次革新，不管是焕然一新更加简洁的软件界面，还是更加高效的 css 和引擎和更加优化的内存占用，Firefox 的全新版本的众多特性都只为简洁与速度让步。

新的 Firefox 扩展也不例外。

从 Firefox 57.0（Firefox Quantum）开始，Firefox 将只支持使用 WebExtensions API 开发的扩展。从 Firefox 官方的支持文档中我们可以看到它的介绍：「该系统与 Google Chrome、Opera 和 W3C 草案社区组织所支持的扩展 API 在很大程度上兼容。大多数情况下为这些浏览器编写的扩展只需少许修改即可在 Firefox 或 Microsoft Edge 中运行。这种 API 与也完全兼容多进程 Firefox」。

很显然，为了速度与兼容性，Firefox 已经下定决心完全改进扩展的使用体验。Firefox 以往有使用 Add-on SDK 来开发的扩展，功能强大但在安装和卸载时都需要重启浏览器，这些扩展也常常会带来浏览器的兼容性问题。而 Firefox 现在所推荐的 WebExtensions 扩展保留了简洁与高效的特点，下载即安装，卸载时也不需要重启浏览器，不会对用户的浏览造成中断。

但 Firefox 已经有很大一部分为人喜欢的扩展并没有使用 WebExtensions API 进行开发，这意味着许多扩展带来的功能在 Firefox 57.0 之后将会带有一段时间的窗口期。这对于 Firefox 来说不可说不是「壮士断腕」。

我从测试版就开始体验 Firefox Quantum，当时许多扩展都没有开始转为使用 WebExtension API，可以使用的扩展非常有限。特别是有一些我们熟知并喜爱的 Add-on SDK 开发的扩展，比如 Beyond Australis 这类甚至可以完全改变浏览器界面的扩展，已经完全无法使用。可以说是这样的「壮士断腕」让人阵痛了很长一段时间。

但让人高兴的是，随着 Firefox 57.0 的正式发布，也有 Firefox 的积极引导的作用，许多 Firefox 扩展的作者已经开始将旧式扩展转移到 WebExtensions 扩展，并且也诞生了许多新的优秀扩展。

VivaldiFox：让 Firefox 像 Vivaldi 一样随网页改变颜色

你也许和我一样对软件的界面有一些自己的小要求。不仅想要简洁，但同时还想要一点个性化。商店里无聊的主题真的不好看，而且不管怎样变化，也只是变化一下标题栏而已。我很喜欢 Vivaldi 跟随所浏览的网页更改浏览器窗体颜色特性，但没想到我在 Firefox 里也能用上这样的特性。

VivaldiFox 就是这样一个简单的插件，它能够改变 Firefox 窗体和标签页的颜色，在默认的主题下，浏览器可以跟随你所浏览的网页变换色彩，比如少数派的红色、豆瓣的绿色、Behance 的蓝色。让浏览器随网页改变蓝色不仅可以让你的浏览器更漂亮，也可以让你快速区分你正在浏览的网页属于哪一个网站。

窗体颜色可以随网站配色变化

除了自动跟随网站改变色彩的功能，你还可以在 VivaldiFox 的首选项中自定义主题，随意设定窗体和标签栏的颜色，搭配你自己个性化的浏览器颜色。、

点击这里下载 VivaldiFox。

Multi-Account Containers：Firefox 官方开发的多账号助手

很多时候你肯定不可能只使用一个账号，比如你需要使用不同的个人邮箱和工作邮箱来应付不同的事务。如果你同时使用多个账号，登陆和切换是一个麻烦的问题。

Multi-Account Containers 是 Firefox 官方开发的一个插件，它能够让你新建不同的 Containers，你可以在不同的 Containers 之间登陆不同的账号，它们互相独立不打扰。对应的 Containers 在标签和地址栏中将会有颜色和文字进行区分，让你清楚知道自己所处的 Container。你还可以新建更多的 Container，以便于适应你自己更多的多账号需求。

总之，简单讲这个功能就像是「开小号」，相信这会是很多人需要的功能。

点击这里下载 Multi-Account Containers。

Tab Center Redux：在侧边栏管理标签页

Firefox 现在仍然保留了侧边栏的功能，除了可以在侧边栏查看历史和书签等功能，一些扩展程序也依然可以通过 Firefox 的侧边栏来完成一些创意。

现在，几乎所有的现代浏览器都将标签栏横向固定在顶部，但当你打开的标签过多的时候，管理标签页的时候就没有那么方便了。Tab Center Redux 可以让你在侧边栏中打开一个纵向的标签页列表，如果你打开的标签页非常多，你可以方便地在侧边栏中纵向滚动标签页进行浏览，当然更加宽阔的面板也可以让你一眼看到标签页的网页缩略图。你还可以在折叠视图与完整视图中进行切换，以容纳更多的标签页。

点击这里下载 Tab Center Redux。

Gesturefy：丰富自定义的手势扩展

我非常喜欢使用手势来浏览网页，因为懒。有时候在吃东西或者是喝水，我甚至懒得用左手去按 cmd+w，更别提恢复最近的标签页 cmd+shift+T 这种非常难按的快捷键了。如果你学会使用鼠标手势，这些操作都将变得非常便捷。

Firefox 上的手势扩展 FireGestures 已经不能使用。Gesturefy 成了新的替代品。你可以自定义多种鼠标手势，这样你只需要按住鼠标右键进行简单的拖动就可以完成许多操作了。

点击这里下载 Gesturefy。

Twitter as a Sidebar：在侧边栏中刷推

在 Vivaldi 浏览器中，用侧边栏刷推并不是难事，只需要在侧边栏中直接添加网页就可以了。但 Firefox 的侧边栏还没有办法进行这样的自定义网页。Twitter as a Sidebar 扩展的功能就是让你可以在侧边栏中打开 Twitter。一边浏览网页，一边在侧边栏中刷推真的是很方便。

点击这里下载 Twitter as a Sidebar。

Min Vid：视频弹出播放，Firefox 的画中画功能

相信许多人都有在一边看视频，一边做其他事的需求。苹果也有注意到这样的需求，macOS 的画中画功能就让你可以将视频变成弹出窗口浮动在任何窗口之上，然而遗憾的是，macOS 的画中画功能只支持 macOS High Sierra 和 Safari 浏览器。

Firefox 的 Min Vid 扩展也让你可以将视频弹出到一个新的窗口中，这个窗口可以随意移动，让你可以在做其他事的同时继续观看视频。它还有一个简单的播放列表功能，你可以继续找到想看的视频添加到这个窗口的播放列表中。

在视频左上角点击弹出播放的按钮就能让视频在小窗口里播放了

然而美中不足的是，Min Vid 支持的网站非常有限，大部分国内的视频网站都还不能使用它。如果你是 Youtube 的用户，倒是可以很愉快地使用这个扩展。

Min Vid 是 Firefox Test Pilot 中的一项测试扩展，Firefox Test Pilot 是什么稍后再为大家介绍。

Tabliss：大概是目前 Firefox 上最美观的新标签页

实际上我现在已经不大推荐用户去更改 Firefox 的新标签页，因为事实上 Firefox 57.0 的新标签已经足够简洁和好用（我竟然还是选择了功能为先）。当然，仍然有许多的用户会需要有一些美化需求。如果你有对新标签页的美化需求，那么在 Firefox 上我的推荐只有这一款扩展。

Tabliss 与你在 Chrome 上见过的许多新标签页美化扩展一样，用一张好看的壁纸替换了单调的新标签页。Tabliss 的图片来源有 Unsplash、GIPHY 和 Dribbble，当然你也可以使用纯色或上传自己喜欢的图片。良心保证，Unsplash 的图片美丽，而 GIPHY 的动图也非常有趣，Dribbble 上的设计也很酷炫。设计师还可以在隐藏 Tabliss 的界面元素之后，把 Tabliss 当成一个真正的 Dribbble 浏览器来浏览 Dribbble 上的内容。

可以在新标签中直接浏览 Dribbble 上的内容

除了壁纸，Tabliss 让你可以自定义在新标签上显示一些小组件，比如时间、搜索、链接。可定制的程度还不错。

点击这里下载 Tabliss。

（另一个可爱的新标签页扩展 Tabby Cat，让你的新标签页每次打开时都显示一只不一样的可爱小猫。）

Simple Translate：最简单快捷的翻译扩展

翻译类的扩展有很多，但我想在 Firefox 上推荐的是这一款，它的简单功能已经可以满足了大部分用户的需求。

Simple Translate 只有一个最简单的输入框、下拉框和翻译整个页面的按钮。如果你有想要翻译的词语，直接输入输入框中就会自动识别输入的语言翻译微为浏览器语言，不需要进行任何设置。

查词和翻译都简单迅速

当然我更喜欢的是「Translate This Page」，对于一些想要快速浏览大概了解整篇文章的场景，这个按钮让你可以用谷歌翻译直接将整个网页进行翻译，同时也不影响网页中的链接功能，非常方便。

点击这里下载 Simple Translate。

Stylish：已经支持 Firefox 57.0

Stylish 可以改变不同网页的外观，相信大家已经很清楚它的功能，少数派在介绍 Chrome 扩展的时候也常常提到这个功能强大的扩展。现在 Stylish 已经支持了 Firefox 57.0，你可以在 Firefox 中愉快地使用它了。

点击这里下载 Firefox 的 Stylish。

Bonus：Firefox Test Pilot（试飞员计划）是什么？

Firefox Test Pilot 是一个 Firefox 官方对新功能进行实验的计划。上面提到的 Min Vid 和 Multi-Account Containers 就都是在这个计划中进行测试的一个扩展。Firefox Test Pilot 曾经也测试过许多有趣的新功能，在进行测试后，官方会发表一个测试报告，优秀的扩展也将进入 Firefox 扩展商店开放给所有用户下载。

目前 Firefox Test Pilot 中除了上面提到的 Min Vid，还有其他几个功能也正在进行测试。比如发送加密链接的「Send」、把标签页稍后再看的「Snooze Tabs」。你可以点击这里加入 Firefox Test Pilot 试用里面的新功能。

结语

这篇文章实际上是一个「新世代的 Firefox 扩展介绍」，所选择的插件大部分是 Firefox 57.0 的特有扩展，与 Chrome 或 Safari 都有所不同。Firefox 的扩展正处在一个窗口期，但能看到这么多开发者仍然愿意继续支持新版本的 Firefox 是非常让人开心的。

Firefox 这番大规模的改版带来了非常多体验上的优化，当然这样的大动作也必定造成很大的震动。内心上，我仍然希望 Firefox 这样一个老牌的浏览器在焕发新生机之后能够继续走下去。

如果你仍然没有试过新版本的 Firefox，请一定要下载试试。如果你在使用 Firefox 时找不到某个 Chrome 扩展的替代品，也可以在这里留言与大家一起讨论。

利用Java打开浏览器访问特定网址

Tue, 07 Feb 2017 08:59:56 CST

public static void openURL(String url) {

		String os = System.getProperty("os.name");
		// Linux
		if (os.indexOf("Linux") != -1) {
			try {
				String[] browsers = { "firefox", "opera", "konqueror", "epiphany", "mozilla", "netscape" };
				String browser = null;
				for (int count = 0; count < browsers.length && browser == null; count++) {
					if (Runtime.getRuntime().exec(new String[] { "which", browsers[count] }).waitFor() == 0) {
						browser = browsers[count];
					}
				}
				if (browser != null) {
					Runtime.getRuntime().exec(new String[] { browser, url });
				}
			} catch (IOException e1) {
				e1.printStackTrace();
			} catch (InterruptedException e2) {
				e2.printStackTrace();
			}
		// Windows
		} else {
			String cmd = "rundll32 url.dll,FileProtocolHandler http://" + url;
			try {
				Runtime.getRuntime().exec(cmd);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}

	}

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

常见浏览器内核

Mon, 21 Nov 2016 08:53:58 CST

一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

谈谈浏览器的缓存过期时间

Tue, 08 Mar 2016 23:40:17 CST

一.浏览器为什么要缓存？什么会缓存下来？

首先当我们访问网页的时候，很多大的图片从服务器上传输过来的时候，试想一下，如果浏览器不把图片缓存下来而是每次都要到服务器去取，那么每次都给服务器和网络造成了巨大的负担。

对于静态资源来说，浏览器不会缓存html页面的，所以你每次改完html的页面的时候，html都是改完立即生效的，不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有图片，css和js。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容。

二.怎么让浏览器的缓存的东西不失效？

文档里有种说法是吧header中的Expires:设置为Sun, 17-Jan-2038 19:14:07 GMT，因为这个时间是32位unix支持的最大的时间值。

但是网上有种说法就是IIS6 最大的时间只能到31-Dec-2035

If you’re using IIS6 you’ll find that the UI won’t allow anything beyond 31-Dec-2035.

总之我们把这个时间设置到很大就可以了。下面是访问google时一个response返回的值。

补充一下，如果expires的时间为-1，那么缓存会立即失效。如果是一个将来时间，那么它将在将来时间失效。

三.怎么让浏览器不缓存静态资源？

一种方式就是让你的页面有这样的header，Cache-Control: no-cache header，这样浏览器就不会缓存静态资源了，每次取数据的时候都去服务器上重新获取。

补充一下，如果设置no-cache的时候对IE是有效的，但是对于firefox是不行的，如果让firefox也不缓存要在header中加一个Cache-Control: no-cache, no-store

另外一种方式就是让你的静态资后缀加上一个版本号，比如

<link rel="stylesheet" type="text/css" href="../css/icon.css?version=3.1.32(2013-05-31)"/>

如果这个version有改变的话，下次就会重新获取这个静态资源。这样做的好处就是由你来控制什么时候来获取新的版本的静态资源。

四.如果不设置这些浏览器用什么来控制缓存失效？

header中有一个参数叫Last-Modified ，这个是由服务器自动加上的，如果有这个参数，那么浏览器每次都会重新计算本地的cache。如果浏览器返回一个304的编码就表示资源没有改变，那么浏览器就可以使用本地的cache。

就如参考文档中说的，对于IE来说，如果没有设置expirse header的时候，IE的缓存时间就是一个session的时间，如果用户打开一个新的IE窗口的时候，他们就会获取最新的静态资源。但是对于firefox来说它就不是这样了，它是依赖last—modified的时间的（HTTP 1.1 spec RFC2616）。

Also, if the response does have a Last-Modified time, the heuristic expiration value SHOULD be no more than some fraction of the interval since that time. A typical setting of this fraction might be 10%.

也就是说firefox的失效时间=现在时间+0.1*（time-last-modified ）,就是他将在它上一次修改时间的十分之一的时间差的时候失效。

为什么这么做呢？我们可以想象一个文件越久没有修改，那么它就越稳定，所以缓存的时间也就越长。只是这个时间差要除以10。

比如一个文件上次修改时间为100天之前，那么那10天后才会失效。

总结一下，以前对浏览器的缓存及失效了解的不是很透彻，具体是如何失效的也不太清楚，那么现在对于如何能改变缓存，永久缓存及合适能失效都有了比较详细的了解。另外要注意的就是IE和firefox的机制还是有很大区别的。

进一步参考文档：

http://blog.httpwatch.com/2007/12/10/two-simple-rules-for-http-caching/

http://blog.httpwatch.com/2008/10/15/two-important-differences-between-firefox-and-ie-caching/

文章来源： http://my.oschina.net/zimingforever/blog/134914?fromerr=5ygd55ZT

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

浏览器对同一域名进行请求的最大并发连接数

Wed, 23 Mar 2016 22:56:39 CST

当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的并发数量。并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。

如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。但是如果同时有更多的并发连接数，这样就会大大的提高网页加载速度。详情可查看我们之前发布的文章：并发连接数对浏览器加载速度的测试。浏览器的并发连接数也并非越大越好。

下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的受支持的协议版本。

版本 HTTP 1.0 服务器（宽带连接） HTTP 1.1 服务器（宽带连接） HTTP 1.0 服务器（拨号连接） HTTP 1.1 服务器（拨号连接）

Internet Explorer 7 和早期版本	4	2	4	2
Internet Explorer 8	6	6	4	2
Internet Explorer 9	10	10	?	?
Internet Explorer 10	6	6	?	?
Internet Explorer 11	6	6	?	?
chrome、firefox	6	6	?	?

Internet Explorer 8+ 提供了一个 window. maxConnectionsPerServer 对象，服务器可以利用此对象来确定客户端计算机上的可用连接数。

在 Internet Explorer 8+ 中，maxConnectionsPerServer 对于宽带连接将返回 6，除非用户或管理员已重写此默认值。在客户端计算机通过拨号连接时，如果连接到 HTTP 1.1 服务器，则 maxConnectionsPerServer 将返回 2；如果连接到 HTTP 1.0 服务器，则 maxConnectionsPerServer 将返回 4。

很多人都说是：

实际情况（china）：

很多客户端软件可以修改电脑的最大连接数，比如：迅雷、暴风影音等。

之前我们曾跟大家分享过如何修改IE浏览器的并发连接数，如果你正在使用IE7及以下的更低版本，不妨尝试将连接数修改到6，这将有助于提升打开网站的速度。

出自：http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

怎么在android实现通过浏览器点击链接打开apk

Fri, 28 Aug 2015 10:28:09 CST

android实现通过浏览器点击链接打开本地应用（APP）并拿到浏览器传递的数据

为了实现这个功能可折腾了我好久，先上一份代码，经楼主验证是绝对可以用的而且也比较清晰的代码！（ps：还是先剧透下吧，第三方大部分浏览器无法成功。）
点击浏览器中的URL链接，启动特定的App。
首先做成HTML的页面，页面内容格式如下：
<a href="[scheme]://[host]/[path]?[query]">启动应用程序</a>
这一句就可以了。
各个项目含义如下所示：
scheme：判别启动的App。 ※详细后述
host：适当记述
path：传值时必须的key     ※没有也可以
query：获取值的Key和Value ※没有也可以

作为测试好好写了一下，如下：
<a href="myapp://jp.app/openwith?name=zhangsan&age=26">启动应用程序</a>
接下来是Android端。
首先在AndroidManifest.xml的MAIN Activity下追加以下内容。(启动Activity时给予)
※必须添加项
<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="jp.app" android:pathPrefix="/openwith"/>
</intent-filter>
HTML记述的内容加入<data …/>。
其中必须的内容仅scheme，没有其他内容app也能启动。
※注意事项：intent-filter的内容【android.intent.action.MAIN】和【android.intent.category.LAUNCHER】这2个，不能与这次追加的内容混合。
                 所以，如果加入了同一个Activity，请按以下这样做，否则会导致应用图标在桌面消失等问题。
复制代码
<intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="jp.app" android:pathPrefix="/openwith"/>
</intent-filter>
复制代码
这样的话，没有问题。

接下来在Activity中需要取值的地方添加以下代码，我是直接写在OnCreate函数里的：
Intent i_getvalue = getIntent();
String action = i_getvalue.getAction();

if(Intent.ACTION_VIEW.equals(action)){
    Uri uri = i_getvalue.getData();
    if(uri != null){
        String name = uri.getQueryParameter("name");
        String age= uri.getQueryParameter("age");
    }
}
这样就能获取到URL传递过来的值了。
——————————————————————————————————我是分割线————————————————————————————————————
代码copy完了，是不是很惊奇的发现用浏览器输入
myapp://jp.app/openwith?name=zhangsan&age=26
是不是404，打不开？
楼主你这不是骗人么！楼主你个混蛋啊。
客官，稍安勿躁啊，你看看你用的浏览器是什么？UC，猎豹，欧朋？放弃吧，试试系统自带浏览器或者谷歌浏览器吧。肯定能成功的，不能成功的话再来坑我。哈哈。
——————————————————————————————————我是分割线————————————————————————————————————
突然觉得好悲哀，好不容易get了这个技能，却不能被第三方浏览器使用。在这个android浏览器大部分被第三方占据着的时代不得不说是个悲剧啊。
接下来还是说说为什么第三方浏览器不能成功吧。首先，我发现的是UC浏览器，如果你使用了自己的scheme，而不是http的话，uc会默认在你的scheme前面添加http://。这太坑爹了。其他浏览器没看是不是同样的情况。发现这个问题后我就试着把自己的scheme换成http。然后满怀期待的又跑了一遍，结果还是坑爹了。所以我想会不会是第三方浏览器对url做了处理。到这里，我也无可奈何了。我测试了UC,猎豹，欧朋，这3个都不支持。系统自带的和谷歌浏览器是支持的。
最后再补充个线索吧，在浏览器里搜索百度应用。进了他们的页面后，他们是可以实现在各种浏览器启动已经安装好的本地app的。看到这个后我就看了下他们页面的源码。
在这里他们页面添加了个data-sentintent的标签，看到这里，应该能确定第三方浏览器应该是默认都不支持发intent的，只能自己起一个。根据前端说，这个标签应该是自定义的。我们前端看源码的时候发现是这样的
所以最后的结果应该是百度这边是起了个端口，然后在应用里启用了一个服务，来监听这个端口，来获取这个intent。大概就这个思路了。不过楼主没有实际去操作。项目时间紧，太麻烦了。

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

javaScript跨浏览器事件处理程序

Tue, 25 Aug 2015 21:45:38 CST

最近在阅读 javascript高级程序设计，事件这一块还是有很多东西要学的，就把一些思考和总结记录下。
在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具。

  (function(){
    var EU = {};
    //...
    //在这里添加一些通用的事件处理方法
    //...
    window.EventUtil = EU;
})();

事件处理程序

事件的绑定主要为IE8以下浏览器做兼容处理：

IE8以下只支持事件冒泡
IE事件处理使用 attachEvent detachEvent

绑定事件

  EU.addHandler = function(element,type,handler){
    //DOM2级事件处理，IE9也支持
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
        //type加'on'
        //IE9也可以这样绑定
        element.attachEvent('on' + type,handler);
    }
    //DOM0级事件处理步，事件流也是冒泡
    else{
        element['on' + type] = handler;
    }
};

取消绑定事件

和绑定事件的处理基本一致，有一个注意点：

传入的 handler必须与绑定事件时传入的相同（指向同一个函数）

  EU.removeHandler = function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler);
    }
    else if(element.attachEvent){
       element.detachEvent('on' + type,handler);
    }
    else{
        //属性置空就可以
        element['on' + type] = null;
    }
};

事件对象

注意点：

IE下 event是全局对象，通过 window.event取得

  EU.getEvent = function(event){
    return event || window.event;
}

事件的目标

注意点:

IE下通过 attachEvent绑定事件，内部 this并非触发事件的 DOM,而是window;
通过目标对象来获取 DOM节点，IE下是 srcElement属性，等同于其他浏览器的 target属性

  EU.addTarget = function(event){
    return event.target || event.srcElement;
}

阻止默认事件

  EU.preventDefault = function(event){
    if(event.preventDefault){
        event.preventDefault();
    }
    //IE下处理
    else{
        event.returnValue = false; //默认为true
    }
}

关于事件默认行为

阻止事件传播

  EU.stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    //IE下处理
    else{
        event.cancelBubble = true;//默认为false，注意区分于returnValue
    }
}

注意点：

阻止的是 DOM层级间的事件传播

比如：对于一个DOM元素，同时绑定捕获事件与冒泡事件，如果在捕获阶段使用 stopPropagation,不会阻断冒泡事件的执行；

Demo地址： http://runjs.cn/detail/hyrdjfyj

如果对子元素和父元素以冒泡形式都绑定'click'事件，在子元素的事件处理中使用 stopPropagation阻止事件传播,父元素绑定的 click事件不会执行。
Demo地址： http://runjs.cn/detail/sf0t1bso

浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

Sun, 23 Aug 2015 17:37:39 CST

如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。

本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。
特别少的篇幅关注浏览器兼容问题，毕竟原理了解了，兼容性问题可以自己想办法解决了。

在浏览器相对标准化之前，各个浏览器厂商都是自己实现的事件模型，有的用了冒泡，有的用了捕获，W3C为了兼顾之前的标准，将事件发生定义成如下三个阶段：

1、捕获阶段
2、目标阶段
3、冒泡阶段

只是硬生生的说事件机制到底是怎么回事不容易理解，用一个demo为主线说明事件的原理比较容易理解：

HTML

  <body>
    <div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>
</body>

CSS

  <style>
    #wrapDiv, #innerP, #textSpan{
        margin: 5px;
        padding: 5px;
        box-sizing: border-box;
        cursor: default;
    }
    #wrapDiv{
        width: 300px;
        height: 300px;
        border: indianred 3px solid;
    }
    #innerP{
        width: 200px;
        height: 200px;
        border: hotpink 3px solid;
    }
    #textSpan{
        display: block;
        width: 100px;
        height: 100px;
        border: orange 3px solid;
    }
</style>

JavaScript

  <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

demo页面效果图

这个时候，如果点击一下 textSpan这个元素，控制台会打印出这样的内容：

当按下鼠标点击后，到底发生了什么的，现在我基于上面的例子来说一下：

  capture=>start: 捕获阶段
window=>operation: window
document=>operation: document
documentElement=>operation: documentElement
body=>operation: body
wrapDiv=>operation: wrapDiv
innerP=>operation: innerP
target=>start: 目标阶段
textSpan=>operation: textSpan
textSpan2=>operation: textSpan
bubble=>start: 冒泡阶段
innerP2=>operation: innerP
wrapDiv2=>operation: wrapDiv
body2=>operation: body
documentElement2=>operation: documentElement
document2=>operation: document
window2=>operation: window
capture->window->document->documentElement->body->wrapDiv->innerP->target->textSpan->textSpan2->bubble->innerP2->wrapDiv2->body2->documentElement2->document2->window2

从上面所画的事件传播的过程能够看出来，当点击鼠标后，会先发生事件的捕获

捕获阶段：首先 window会获捕获到事件，之后 document、 documentElement、 body会捕获到，再之后就是在body中DOM元素一层一层的捕获到事件，有 wrapDiv、 innerP。

目标阶段：真正点击的元素 textSpan的事件发生了两次，因为在上面的JavaScript代码中， textSapn既在 捕获阶段绑定了事件，又在 冒泡阶段绑定了事件，所以发生了两次。但是这里有一点是需要注意，在目标阶段并不一定先发生在捕获阶段所绑定的事件，而是先绑定的事件发生，一会会解释一下。

冒泡阶段：会和捕获阶段相反的步骤将事件一步一步的冒泡到 window

那可能有一个疑问，我们不用 addEventListener绑定的事件会发生在哪个阶段呢，我们来一个测试，顺便再演示一下我在上面的目标阶段所说的 目标阶段并不一定先发生捕获阶段所绑定的事件是怎么一回事。
我们重新改一下 JavaScript代码：

  <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 测试直接绑定的事件到底发生在哪个阶段
    wrapDiv.onclick = function(){
        console.log("wrapDiv onclick 测试直接绑定的事件到底发生在哪个阶段")
    };

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(){
        console.log("textSpan 冒泡 在捕获之前绑定的")
    }, false);

    textSpan.onclick = function(){
        console.log("textSpan onclick")
    };

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

再看控制台的结果：

图中第一个被圈出来的解释： textSpan是被点击的元素，也就是目标元素，所有在 textSpan上绑定的事件都会发生在 目标阶段，在绑定捕获代码之前写了绑定的冒泡阶段的代码，所以在 目标元素上就不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生。

图中第二个被圈出来的解释：由于 wrapDiv不是目标元素，所以它上面绑定的事件会遵守先发生捕获后发生冒泡的规则。所以很明显用 onclick直接绑定的事件发生在了冒泡阶段。

target和currentTarget

上面的代码中写了 e.target和 e.currentTarget，还没有说是什么， target和 currentTarget都是 event上面的属性， target是真正发生事件的DOM元素，而 currentTarget是当前事件发生在哪个DOM元素上。
可以结合控制台打印出来的信息理解下， 目标阶段也就是 target == currentTarget的时候。我没有打印它们两个因为太长了，所以打印了它们的 nodeName，但是由于 window没有 nodeName这个属性，所以是 undefined。

阻止事件传播

说到事件，一定要说的是如何阻止事件传播。总是有很多帖子说 e.stopPropagation()是阻止事件的冒泡的传播，实际上这么说并不是很准确，因为它不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播。
来看一下我们再改一下的JavaScript代码：

  <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 测试直接绑定的事件到底发生在哪个阶段
    wrapDiv.onclick = function(){
        console.log("wrapDiv onclick 测试直接绑定的事件到底发生在哪个阶段")
    };

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
        // 在捕获阶段阻止事件的传播
        e.stopPropagation();
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(){
        console.log("textSpan 冒泡 在捕获之前绑定的")
    }, false);

    textSpan.onclick = function(){
        console.log("textSpan onclick")
    };

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

我们在事件的捕获阶段阻止了传播，看一下控制台的结果：

实际上我们点击的是 textSpan，但是由于在捕获阶段事件就被阻止了传播，所以在 textSpan上绑定的事件根本就没有发生，冒泡阶段绑定的事件自然也不会发生，因为阻止事件在捕获阶段传播的特性， e.stopPropagation()很少用到在捕获阶段去阻止事件的传播，大家就以为 e.stopPropagation()只能阻止事件在冒泡阶段传播。

阻止事件的默认行为

e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为，这块的知识比较简单，可以自己去试一下。

与事件相关的兼容性问题

这里只是简单提一下兼容性问题，不做过多的展开。对于绑定事件，ie低版本的浏览器是用 attachEvent，而高版本ie和标准浏览器用的是 addEventListener， attachEvent不能指定绑定事件发生在捕获阶段还是冒泡阶段，它只能将事件绑定到冒泡阶段，但是并不意味这低版本的ie没有事件捕获，它也是先发生事件捕获，在发生事件冒泡，只不过这个过程无法通过程序控制。

其实事件的兼容性问题特别的多，比如获取事件对象的方式、绑定和解除绑定事件的方式、目标元素的获取方式等等，由于古老的浏览器终究会被淘汰，不过多展开了。

浏览器中常见网络协议介绍

Wed, 03 Jun 2015 19:35:00 CST

本周五我在公司有一个关于《HTTP 协议》的培训，只有两个小时，估计能讲到的东西不会太多。实际上，浏览器为了完成 WEB 应用的各项功能，需要跟各种网络协议打交道，HTTP 只是其中一种。本文会介绍浏览器中常见的网络协议，以及各种协议之间的关系。

我们经常会听到「TCP/IP 协议」这个名词，从字面上来看，有人会认为它专指 TCP 和 IP 两种协议。实际上大多数情况，TCP/IP 协议指的是整个网际协议族（Internet Protocol Suite），是利用 IP 协议进行通讯的其他协议统称。TCP/IP 包含的协议众多，还有一个分层模型。相比较 OSI 模型，TCP/IP 的分层更简单，从下到上分别为：物理层、数据链路层、网络层、传输层和应用层。

IP（Internet Protocol）属于网络层协议，负责联网主机之间的路由选择和寻址。IPv4 中的 4 指的是 TCP/IP 协议的第 4 个版本，直到这个版本，IP 协议才单独拆出来，所以并没有单独的 IPv1 - IPv3。而 IPv5 分给了一个没什么进展的试验性协议，所以下一个版本的 IP 协议变成了 IPv6。

TCP（Transmission Control Protocol）和 UDP（User Datagram Protocol）是整个 TCP/IP 协议中最重要的两个传输层协议。TCP 是面向连接的、可靠的流协议；UDP 是不具有可靠性的数据报协议。后面可以看到，对可靠性要求比较高的上层协议一般会基于 TCP；而对高速传输和实时性有较高要求的上层协议一般会基于 UDP。

介绍完比较低层的 IP、TCP 和 UDP 之后，下面看几个浏览器中常见的应用层协议。

HTTP 与 WebSocket

HTTP 协议是浏览器需要用到的最重要的网络协议，它包括很多版本，例如最常见的 HTTP/1.1，刚刚发布的 HTTP/2，还有 Google 实现的过渡版本 SPDY 等等。本文不讨论 HTTP 的细节以及各版本之间的差异，只打算列出 HTTP 与其他协议 / 应用之间的关系，见下图：

  +-------------+-------------+--------------+
|     XHR     |     SSE     |      WS      |
+-------------+-------------+------+       +
|               HTTP               |       |
+----------------------------------+-------+
|                    TLS *                 |
+------------------------------------------+
|                    TCP                   |
+------------------------------------------+
|                    IP                    |
+------------------------------------------+

从上图可以看出 HTTP 是在 TCP 之上实现的，所以 HTTP 中并不需要关注数据传输的可靠性，类似于顺序控制、重发这样的机制在传输层已经有了。同时，HTTP 也拥有 TCP 的一些缺点，给 WEB 性能优化带来挑战。

XHR（ XmlHTTPRequest）和 SSE（ Server-Sent Events）都是浏览器提供的数据交互功能，它们的本质都还是 HTTP。XHR 是 Ajax 技术的核心，大家都很熟，从略；SSE 概念还算新，这里多说几句。我们知道 HTTP 只能由客户端发起请求，再由服务端响应。SSE 也是这样，只不过服务端会利用这个 HTTP 连接多次发送响应，不像平时发送完响应就结束了。实际上，很早之前在 WebIM 中类似的 HTTP 长连接技术就已经很盛行了，有兴趣的同学可以看下这篇八年前的文章： Comet：基于 HTTP 长连接的「服务器推」技术。

既然 XHR 和 SSE 本质都是 HTTP 连接，所以 HTTP 协议中一些常见概念，例如请求方式（GET、POST 等），请求响应头部（Cookie、内容编码、传输编码、缓存等）等等，依然存在。

而 WS（WebSocket）是直接基于 TCP 实现的，HTTP 协议中的那些概念都不复存在。需要注意的是，从前面图表中可以看出，它还是依赖于 HTTP，这是因为 WebSocket 握手利用了 HTTP 的 Upgrade 机制。一旦握手完成，后续数据传输就直接在 TCP 上完成。浏览器中新协议借助 HTTP 作为引导，是一个较为普遍的做法。

TLS（Transport Layer Security，传输层安全），作用是保证数据在传输过程中的完整性和保密性，属于可选项。启用了 TLS 之后，HTTP 协议的 URL 前缀需要由 http:// 改成 https://；WebSocket 协议的 URL 前缀需要由 ws:// 改成 wss://。

DNS

DNS（Domain Name System），就是大家熟知的域名解析服务，提供了从域名到 IP 的转换。浏览器中大部分网络交互都会使用域名，而传输层协议需要的是 IP，所以 DNS 是基础。

  +-------------------------------+
|              DNS              |
+-------------------------------+
|      TCP      |      UDP      |
+---------------+---------------+
|               IP              |
+-------------------------------+

DNS 服务默认使用 UDP 协议获得查询结果，通常仅当结果超过 512 字节或者进行 DNS 服务器同步时才会使用 TCP 协议。这是因为 DNS 的使用非常频繁，又是基础，响应速度是优先需要考虑的。使用 UDP 可以满足速度上的要求，但同时也引入了类似于「DNS 缓存投毒」这类问题。

WebRTC

WebRTC（Web Real-Time Communication）出现之前，DNS 几乎是浏览器唯一使用的基于 UDP 的协议。WebRTC 提供的三大功能中，MediaStream 与网络无关，RTCPeerConnection 和 RTCDataChannel 都是基于 UDP，如图：

  +-----------------------+-------------------------+
|   RTCPeerConnection   |      RTCDataChannel     |
+-----------------------+-------------------------+
|          SRTP         |           SCTP          |
+             +---------+-------------------------+
|             |                DTLS               |
+-------------+-----------------------------------+
|                ICE, STUN, TURN                  |
+-------------------------------------------------+
|                       UDP                       |
+-------------------------------------------------+
|                       IP                        |
+-------------------------------------------------+

这个图比较复杂，我们从下往上介绍：

ICE（Interactive Connectivity Establishment）框架，作用是在端与端之间建立一条有效的通道，优先直连，其次用 STUN 协商，再不行只能用 TURN 转发：

STUN（Session Traversal Utilities for NAT）协议，解决了三个问题：1）获得外网 IP 和端口；2）在 NAT 中建立路由条目，绑定外网端口，使得到达外网 IP 和端口的入站分组能找到应用程序，不被丢弃；3）定义了一个简单的 keep-alive 机制，保证 NAT 路由条目不会因为超时而被删除。STUN 服务器必须架设在公网上，可以自己搭建，也可以使用第三方提供的公开服务，例如 Google 的「stun:stun.l.google.com:19302」。
TURN（Traversal Using Relays around NAT）协议，依赖外网中继设备在两端之间传递数据。简单说就是通过两端都可以访问的 TURN 服务转发消息，间接把两端连起来。

DTLS（Datagram Transport Layer Security，数据报传输层安全），本质上就是 TLS，只是为了兼容 UDP 的数据报传输而做了一些微小的修改，可以简单把它理解为 UDP 版的 TLS。

再往上就兵分两路，一路的目标是 RTCPeerConnection，负责音频和视频数据通信，对传输速度和实时性有很高的要求，这里又有两个新的协议出现：

SRTP（Secure Real-time Transport Protocol，安全实时传输协议）。WebRTC 中的音频和视频等实时数据都是通过这个协议传输。它是 RTP 协议的安全版。
SRTCP（Secure Real-Time Control Transport Protocol，安全实时控制传输协议）。它会跟踪 SRTP 的运行情况，以便调整每个流的发送速率、编码品质和其他参数。它是 RTCP 协议的安全版。

另一路的目标是 RTCDataChannel，用来在端到端之间传输任意应用数据，SRTP 是专门为传输媒体数据为设计的，不适合传输应用数据，所以这里又需要一个新的协议：

SCTP（Stream Control Transmission Protocol，流控制传输协议）。本身 SCTP 是一个传输层协议，直接运行在 IP 协议之上，与 TCP 和 UDP 类似。但在 WebRTC 这里，SCTP 却运行于 DTLS 之上。SCTP 很好的一点是提供了交付属性选项，使用者可以指定消息是有序还是乱序，是可靠还是部分可靠，部分可靠时还可以指定使用超时重传还是计数重传策略。

QUIC

Google 正在试验一种新的传输层协议：QUIC（Quick UDP Internet Connections），它的本质是基于 UDP 实现 HTTP，相当于之前的 TCP + TLS。从目前的资料来看，QUIC 可以大幅减少建立连接的时间，这是通过简化握手步骤从而减少 RTT（Round-Trip Time）来实现的，类似于 TFO（TCP Fast Open）。有兴趣的同学可以点这个连接围观，据说 Google 自家服务来自 Chrome 的请求中，已经有 50% 使用了 QUIC 协议。

最后表达下对 Google 的佩服。为了优化 WEB 性能，在浏览器（Chrome）、排版引擎（Blink）、JS 引擎（V8）、图片格式（WebP）、传输层协议（TCP 的 TFO，QUIC）、应用层协议（SPDY）以及 HTML5（从 Google Gears 开始）等等方面都做了大量努力，实在是技术型公司典范，叹为观止！

本文链接： https://www.imququ.com/post/network-protocol-in-browser.html，参与讨论

推荐：领略前端技术阅读奇舞周刊

兼容所有浏览器的 DOM 载入事件

Sat, 14 May 2016 08:00:00 CST

本文就页面载入问题讨论 DOMContentLoaded、 load、 readyState等DOM事件的浏览器兼容性，并给出怎样绑定DOM载入事件以兼容所有的浏览器。接着介绍jQuery对该问题的实现源码，以及jQuery中 $(document).ready()和 $(window).load()方法的区别。

在讨论页面载入事件之前，首先需要区分的两个概念：DOM就绪和渲染结束。

DOM就绪是指浏览器已经接收到整个HTML并且DOM解析完成；
渲染结束是指浏览器已经接收到HTML中引用的所有样式文件、图片文件、以及Iframe等资源并渲染结束。

DOM API 提供的事件

DOM API 在页面载入问题上主要提供了三个接口：

DOMContentLoaded事件；
load事件；
document.readyState属性，及其对应的 readystatechange事件。

我们看看这三者有什么区别：

DOMContentLoaded

   document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM ready!");
});

页面文档（DOM）完全加载并解析完毕之后，会触发 DOMContentLoaded事件， HTML文档不会等待样式文件，图片文件，Iframe页面的加载。此时DOM元素可能还未渲染结束，位置大小等状态可能不正确，但DOM树已被创建，多数JavaScript已经操作DOM并完成功能了。 所以绝大多数场景下都应当使用 DOMContentLoaded事件， jQuery也采用了这种实现。

This (DOMContentLoaded) event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. – molily.de

其实样式文件的加载会阻塞后续脚本执行，此时多数浏览器都会推迟 DOMContentLoaded事件的触发，在样式表的载入会延迟DOM载入事件一文中详细地讨论了这一点。

考虑到IE8及以下不支持该事件，因此我们需要后面的两个 DOM 事件作为Fallback。

load

   document.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
});

页面完全载入时触发 load事件，此时所有的图片等资源文件都已完全接收并完成渲染。因此 load总是在 DOMContentLoaded之后触发。 load事件没有任何兼容性问题。 load常常被作为最终的Fallback。

注意IE8及以下不支持 addEventListener，需要使用 attachEvent来绑定事件处理函数。详见： DOM 事件与 jQuery 源码：捕获与冒泡一文。

document.readyState

document.readyState属性用来表征DOM的加载状态，该属性值发生变化时会触发 redystatechange事件。 document.readyState属性有三种取值：

"loading"：DOM在加载过程中；
"interactive"：DOM就绪但资源仍在加载中；
"complete"：DOM加载完成。

由于IE8支持 document.readyState属性，也常常用来在IE8中作为 DOMContentLoaded的Fallback。

注意IE8以前的IE不支持 document.readyState属性。可以执行 document.documentElement.doScroll("left")，当DOM未就绪时执行该方法会抛出错误，以此检测DOM是否就绪。

jQuery 方法

jQuery提供了三种方法来提供页面载入事件：

$(document).ready(callback)：在DOM就绪时执行回调，返回值为 document构成的jQuery集合。
$(function(){})：这是最常用的写法，参数与返回值同上。
$(window).load()：DOM就绪，并且页面渲染结束（图片等资源已接收完成）时执行回调。

更多jQuery函数 $()的用法请参考 jQuery中$()函数有几种用法一文，本文不再赘述。

上述三个方法在事实上相当于只有两个： .ready()和 .load()。

.ready()方法的实现在这里： https://github.com/jquery/jquery/blob/master/src/core/ready.js

   if ( document.readyState === "complete" ||
    ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    window.setTimeout( jQuery.ready );
} else {
    // Use the handy event callback
    document.addEventListener( "DOMContentLoaded", completed );
    // A fallback to window.onload, that will always work
    window.addEventListener( "load", completed );
}

.load()就是DOM load的包装，不再赘述。 DOM 事件与 jQuery 源码：捕获与冒泡一文详述了jQuery如何包装DOM事件。

参考阅读

jQuery .ready()方法： https://api.jquery.com/ready/
MDN load 事件： https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN DOMContentLoaded事件： https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
MDN document.readyState属性： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState

移动浏览器的需求弱化之后，UC 想要变成你的资讯阅读器

Thu, 28 Apr 2016 18:34:26 CST

“趋势来了，即便不做什么，也会被推着向前走，大家非常高兴；趋势走了，谁都挡不住”。UC 总裁何小鹏今天讲的这句话应该可以引起很多移动互联网行业从业者的共鸣，这其实也是 UC 浏览器自身的真实经历。作为一款已经 12 年的老产品，UC 浏览器现在决定去抓内容这个新趋势。

手机浏览器该怎么办？

不用我说，你可能也觉得自己现在用浏览器的时长在降低。以前，浏览器是我们手机上耗时最多的应用之一，但现在你不用浏览器，各种 app 也能基本满足你的需求。何小鹏说，UC 尝试过借应用商店、搜索引擎、H5 等来维护浏览器在移动端的优势，但结果发现都不行，那浏览器要怎么办？

答案是内容。如果你足够细心的话，或许已经发现 UC 浏览器在 App Store 中把自己归到了“新闻”这一类。这件事放到几年前是很难想象的，对于一款已经存在了十多年的工具型产品，UC 这么变能比的过今日头条、腾讯新闻这些从一开始就做资讯的产品吗？今天，阿里移动事业群总裁俞永福、UC 总裁何小鹏一起谈了谈自己的看法。

UC 浏览器的第三次转型

俞永福在谈这次转变时首先把 UC 划分为三个阶段。在第一个阶段，智能手机性能还不行，UC 浏览器做的是提高用户获取信息的速度；在第二个阶段，智能手机性能已经很不错了，UC 浏览器用网址导航、搜索这些让用户体验更丰富、简单；在第三个阶段，UC 浏览器的管理者们认为它应该帮助用户获取信息，而获取信息最简单的方式就是千人千面，所以这一次转型的方向也就确定了。

对于 UC 浏览器来说，这次要在新方向上有突破可能比之前都要困难。在以前，它虽然也会根据市场改变策略和方向，但仍然还是浏览器；但接下来，UC 浏览器可能会涉及图文、视频、直播、音乐等各类内容，这就让它越来越从一个工具型产品变成了一个资讯型产品。

从行业的角度来说，现在内容分发行业的竞争非常激烈，今日头条在喊着赶超腾讯，腾讯也做了和今日头条非常类似的产品天天快报来对抗今日头条。在 2015 年的前半年，这件事看上去还是腾讯、今日头条、一点资讯等资讯产品之间的争执，但现在 UC 浏览器却突然加入到这场战斗了。俞永福说：“现在内容平台的竞争已经进入了决赛阶段，这场比赛的参与者不超过四个，在这之外的都已经出局了”。

刚进场不久，游戏就是决赛阶段了，这看上去对新加入的 UC 浏览器好像并不是好事。而且，由于各个内容平台能拿到的媒体内容往往差别不大，这对后来者来说就更不利了。不过，俞永福在谈到和对手之间的差别时却比较看得开，在他看来：“现在大家都在做“猜你喜欢”看什么，差别在于：一类是基于社交，另一类是基于一个更大的数据”。

俞永福认为，由于人的线上、线下行为往往差别很大，所以社交数据并不真的知道你喜欢什么。在 UC 之前，淘宝已经做了很多年千人千面的产品，所以 UC 浏览器也能把这一套方法从电商产品搬到内容领域。

从理论上来说，阿里巴巴确实有大数据方面的优势，UC 也有大量的用户基数，但这些最终能不能让 UC 浏览器成为一款推荐精准的产品还是要靠数据说话。俞永福也愿意把这个时间维度放到 5 年的长度来看，或许要不了那么久我们就知道这场竞争谁赢谁输了。

“还没有看过一个硬件产品能在 20 年里活的很棒”。何小鹏在演讲时说的这句话用到软件领域恐怕也合适，不管 UC 浏览器的老用户们愿不愿看它变成一款资讯产品，已经 12 年的 UC 浏览器的确要做它该做的改变。

QQ浏览器X5内核问题汇总

Thu, 07 May 2015 20:09:29 CST

常常被人问及微信中使用的X5内核的问题，其实我也不是很清楚，只知道它是基于android 4.2的webkit，版本号是webkit 534。今天正好从X5团队拿到了一份问题汇总，梳理下发出来，给各位开发者以参考——不排除明天会删除这篇文章的可能。

1.Android WebView常见问题及解决方案汇总：

http://blog.csdn.net/t12x3456/article/details/13769731

2.请问各位碰到过X5浏览器内，局部滑动使用iscroll卡顿的问题么？

回答：是使用 iscroll.js 这个JS去滚动么？如果只是为了产生滚动，建议使用 overflow 属性来，目前有一种滚动优化在线上版本效率不是太好，通过JS去改变CSS的属性产生滚动

3.调用： `-webkit-filter: blur(10px);filter: blur(10px);`在Android下背景图没有blur掉，只是被单纯的放大而已

回答： -webkit-filter目前还不支持，可以先用图片替换的方式后续版本会支持这个属性

4. `shadowBlur`是阴影效果吧，我们是想实现图片毛玻璃

回答： http://blog.csdn.net/jia20003/article/details/9195915 这个有用么

5.LBS相关，定位频繁失败

第一步，首先确认定位失败是个别站点原因还是所有站点定位都失败。如果是所有站点定位都不成功，很有可能是内核问题，转内核相关同学跟进调查定位逻辑是否有缺陷；如果是某个站点才会出现的问题，继续第二步排查，从站点源码着手。

第二步，找到站点请求定位的js代码段，检查获取定位信息函数的options字段，很有可能是 options 中 timeout 字段设置的超时太短导致，建议前端开发将该字段时间设置长一些（建议10s以上）或者不设置该字段。如果js没有设置 timeout 字段的情况下仍然定位不成功，则转内核同学调查内核流程。

ps：H5获取LBS信息的js接口

回答：

  navigator.geolocation.getCurrentPosition(showPosition,showError,{  
    enableHighAccuracy:false，
    timeout:10*1000,
    maximumAge:0
});

navigator.geolocation.watchPosition(watchPosition,showError,options);

showPosition：定位成功时回调；
showError：定位出错时回调；
options：可选的地理定位请求特征
enableHightAccuracy：可选，是否开启高精度模式，参数默认值为 false
timeout：可选，单位为ms，浏览器需要在该时间段内完成定位，否则定位失败，默认值为 - - infinity，无穷大。如果该值设置较小，会有很高的定位失败率。
maximumAge：可选，单位ms，重新计算位置的时间间隔。默认为0，即每次时时计算位置信息。

6.打开视频播放，后退视频仍然在播放

回答：部分机型，浏览页面时打开视频播放，点击返回，页面上的视频仍然在播放。解决办法是捕获后退事件，主动调用 onHideCustomView() 方法，并且在该方法里将 onShowCustomView 里关联的view解除关联

7.请问一下微信浏览器的cookie清理机制是怎么样的？

回答：X5内核是不会清除的。

8.打开WWW页面，缩放显示的问题

回答：
使用webview打开www页面，如果页面被放大显示，确定websettings有没有设置， webSettings.setUseWideViewPort（true），默认为 false，www页面不会被缩放显示的。手机QQ浏览器默认为true，显示www页面更美观

9. 关于滚动时候动画的问题

回答：

页面滑动过程中动画不会被触发
页面滑动过程中动画会被停止

这个是X5内核为了做滚动优化而做的限制

10.关于connection type定义的问题

回答：X5执行的标准比较老， NetworkInfo_API

  enum ConnectionType {  
UNKNOWN = 0,  
ETHERNET = 1,  
WIFI = 2,  
CELL_2G = 3,  
CELL_3G = 4,  
CELL_4G = 5,  
NONE = 6,  
};

11.出现网络正常，但是页面打不开的情况

回答：关于设置里面的云加速试下是否可以打开。

12.js阻塞和css阻塞的不同

回答：css是阻塞渲染过程，js阻塞解析过程！对于用户来说，没什么区别，都是空白的 js的执行时，如果js中有读写css的属性的代码，并且下载队列中有待加载的css，js执行会被阻塞掉。

13.cookie的4k限制

回答：浏览器端cookie的数量可能会超过4k，有http请求时，内核只取前4k的cookie数据！

14.Js Defer与把js放到html底部的区别

回答：js defer：先加载， ondownload 后执行。和js放到html底部类似。不同的就是html预扫描到会先加载

15.首屏显示后，为什么又会重排版

回答：浏览器的排版宽度受上层ui设置的webview宽度影响。如果webview没设置或者是设置成0，浏览器内核会用默认的排版宽度320px进行排版。此时若webview的宽度值被正常设置，计算出来的排版宽度不是320px（一般是360px），这样浏览器就要用360px宽度，对页面进行重排。

16.canvas的数量是不是有限制

回答：

小于1G的内存， canvas的内存不能超过100M
1G到2G的内存， canvas的内存不能超过300M
大于2G的内存 canvas的内存不能超过500M
为了防止内存占用过多，硬件加速的CANVAS最多支持5个

小于等于1G内存手机，由于内存没办法精确统计，当达到75M以上，CANVAS数量最多支持20个

上面说的canvas内存，仅仅是说canvas 长宽计算出来的内存，不包括canavs使用的图片等资源内存

17.x5浏览器CSS3有些不支持,同样的样式，在chrome里能起到效果，在X5就没用。并且js性能也差的多,微信还内置X5，用起来太不爽

回答：是否方便具体说下是什么样的性能问题和css样式缺陷影响到您？我们这边可以跟进查看下原因。

X5内核也在不断改进，您的反馈可以帮助我们进一步优化。

chrome在标准的支持和性能优化方面确实目前走在业界前面，不过android系统的碎片化，android系统webview更是碎片化严重。

android系统上的web开发可能也需要考虑到不同rom的兼容情况。X5内核致力于为开发者提供统一的web体验，并通过不断的优化，来向业界标准对齐。

目前我们也在做基于chromium内核的研究工作，后续在标准的支持和性能上会有进一步提高。

18.请问下x5中js调用android怎么实现？

回答：跟系统内核下一样，都借助 addjavainterface 实现

19.请问一下，android手机微信上用的x5支持webgl吗？

回答：android手机中微信上的X5都是支持webgl的，不过部分机型上还有兼容性问题，由于兼容性问题，webgl之前我们是采用软绘的方式支持,目前切换到了硬绘，但整体来说还是会有兼容性和性能问题,后续这块还会持续更新

20.如果在某个设备第一次打开应用的时候没有网络，x5内核可以启动吗？单网络恢复后还要再次认证，还是不用在认证？

回答：第一次打开应用是不会拉起X5的在第二次打开之后不管有无网络都可以拉起

21.如果我不安装浏览器，安装微信，x5能调用起来吗?

回答：不能，只能安装QQ浏览器才能调用

22.web audio api是否已经支持？

回答：暂时还不支持

23.什么时候支持html5的onunload和onbeforeunload事件

回答：现在是支持html5的 onunload 和 onbeforeunload 事件的

24.要用X5的内核，必须要用QQ浏览器么？

回答：目前 SDK 版本是这样的，我们正在预研的版本，手机如果安装了微信或手Q ，其它 app 可以不依赖 QQ浏览器而共享 x5 内核。

25.关于svg问题。

回答：关于SVG的问题：

关于svg模糊的问题，有2种情况：

直接访问一个.svg url的页面或者object，embed加入的svg，出现模糊的问题
此问题已解决， qq浏览器5.8上已经修复， tbs下个版本也会修复
svg用作 background-image, 模糊
这个问题是我们目前渲染机制导致不能兼容非标准写法：在用svg作为 background-image的时候，需要指定 background-size，不然会模糊

关于svg支持情况：
在5.3之前的qq浏览器不支持svg，我们会在后台把svg转成一张jpeg图片，供浏览器显示，5.4及以上版本支持svg，如果遇到被转成图片的问题，需要升级浏览器版本。

26.请问flexbox近期会支持吗？

回答：flexbox我们正在做开发支持

27.x5内核目前是独立运行的还是需要安装ＱＱ浏览器？

回答：sdk是需要QQ浏览器的，微信手Q里的是不需要的

28.现在X5内核怎么调试？在微信或者手q或者qq浏览器中调试页面

回答：现在的微信手Q里面的X5还无法通过inspector调试后期我们会把带有inspector调试的版本挂在开发者后台下载区敬请期待

29.请问x5支持webgl的所有接口吗？能在所有版本的android机（4.0+)和ios机(5.0+)上运行webgl吗？

回答：webgl目前是支持的，不过部分机型上还有兼容性问题

30.X5上支持哪些扩展？支持多少个纹理单元？

回答：X5上只能支持：

  WEBGL_lose_context  
EXT_texture_filter_anisotropic  
OES_texture_float  
OES_standard_derivatives  
OES_vertex_array_object  
WEBGL_debug_renderer_info  
WEBGL_debug_shaders  
WEBKIT_WEBGL_compressed_texture_s3tc

而且这些是必须手机GPU有对应的扩展指令才行的。

关于纹理单元。我们这边没有限制

上面的扩展，也都是基本每一个对应opengl的一个扩展

支持多少纹理单元，也是从opengl查询得到的。

主要应该是看手机GPU支持到啥程度，我们是做个对接。

31.x5的文件分片功能解决了吗， `blob = file.webkitSlice(start, stop)`,这样分片出来的blob用不了啊。

回答：分片问题这边已经定位处理，浏览器会在5.8版本修复

32.手机qq浏览器是否有调试工具呢？

回答：有的，Inspector。

33.请问现在微信调用的手机QQ浏览器支持websocket 吗？

回答：支持websocket ，暂不支持wss，不支持webrtc

34.有计划支持webRTC吗？

回答：这个我们后续会评估的。

35.我是HTML5游戏开发者，制作中的H5游戏需要有音乐音效。但是我在android机器上使用QQ浏览器出现了如下问题：

循环播放BGM时，如果同时播放音效，BGM会被强行暂停
多个音效同时播放时，会出现明显的无法忍受的延迟和播放失败

这个问题在同一台机器的微信上同样存在，但是同一台机器的chrome没有这个问题。

我能想到的最合理的解释是：X5内核同一时间只能播放一个音频通道。

希望官方能解答我的疑惑和遇到的问题，谢谢。

PS：

使用的H5音频库 : SoundJS
使用的音频格式 : mp3
使用的Android机型：三星 Note3

回答：播放音效需要获取声音输出焦点，目前只支持同时播放一个音效您提的需求我们会讨论评估后期是否能有方案现

36.播放音效时，为啥会把我后台的BGM播放给暂停掉？

回答：播放声音时当前音频需要获取 audiofocus ，系统在 audiofocus丢失时会通知其它音频播放软件，这个暂停应该是播放软件自身的行为，我们本身并没有暂停后台音频，只是向系统申请了 audiofocus

37.300ms延迟是指什么？ `click` 和 `touch` ?

回答： touch 点击之后，到 click 事件被触发， click 事件有延迟， touch 不存在，用 touchstart 事件替代 click 事件就OK

38.现在微信内置的浏览器能支持flexbox么，现在有没有什么好办法能够替代呢？做好的网页一放到微信上，大量的flex的页面

回答：你好flexbox正在开发支持，flexbox在android4.1到4.3系统内核上，也有类似问题，页面是需要兼容的

39.有没有什么x5内核的论坛或者wiki之类的？可以参考下。

回答： http://bbs.browser.qq.com/ http://x5.tencent.com/ 这两个论坛可以关注下

另外有我们的公众账号有问题可以随时交流

40.X5公众号叫什么？

回答：腾讯X5浏览服务

41.手q上面的内核应该也是x5的吧？这样直接在手q上面的效果和在微信里面应该是一样的？

回答：是的手Q微信内的webview都是X5。

42.x5不支持font-face吗？

回答：支持

43.x5 支持flex吗？有兼容性文档吗？

回答：不支持. http://1.h5support.sinaapp.com/incoming/cow.html

这个页面是参考caniuse的测试用例得到的测试结果，5.7是对应qq浏览器5.7版本，可以对比下和系统浏览器4.1~.4.4的支持度。有需要的同学可以先参考下，相关的文档建设我们也在逐步完……

44.iscroll+lazyload在x5浏览器里面卡顿很严重，有人碰到过类似问题么，小米手机列表内元素200个左右。

回答：iscroll本身对内核要求比较高，较新的blink版本支持才比较好。可以对比测试下android 4.x 的系统浏览器看看。建议还是在前端做些优化，避免较长的元素，并减少动画效果。 http://www.cnblogs.com/vbluebirdv/archive/2012/11/18/2776300.html 可以参考网上一些iscroll调优的文章

45.微信里面缓存问题，在安卓下和 ios下，刷新机制是不是不一样？

回答：ios因为有刷新功能，点击之后请求到的都是最新的文件，安卓下， 不管怎样请求都不会更新文件

46. `<meta name="x5-orientation" content="portrait"/>`现在微信里面没有假如这个啊？为什么IOS QQ浏览器不识别这个？

回答：ios内核不是X5， ios 浏览器后续版本也会支持 http://open.mb.qq.com/doc?id=1201
目前ios 浏览器仅支持 x5-page-mode

47.现在白鹭游戏引擎是不是内置在x5里面了？

回答：内置了白鹭引擎runtime

48.x5内核不支持 `canvas` 的 `background` 属性吗？

  <!doctype html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta charset="utf-8">  
<title>canvas test</title>  
    <!--<meta HTTP-EQUIV="pragma" CONTENT="no-cache">-->
    <!--<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">-->
</head>

<body>  
<div>  
    <canvas id="testCanvas" width="500" height="300" style="background: #00FF00;"></canvas>

<!--<canvas id="testCanvas" width="1136" height="640" style="background:#000"></canvas> -->  
</div>  
</body>  
</html>

背景颜色显示不出来

回答：这个是做了优化，当canvas下盖了背景，就没有去绘制背景图片，当初是因为一些手机的GPu在绘制这块，如果存在这种情况绘制非常慢

49.qq浏览器有没有准备支持asm.js的计划？

回答：我们也正在筹备相关工作，会对市面上各种游戏引擎进行全面评测并设计合理的架构方案整合。预计下半年可以推出，敬请期待

50.X5不支持 `canvas.toDataUrl()`的 `image/jpeg`参数，还是转成了默认的png格式请问有什么替换方法吗？

回答：当前确实还不支持...我们在修复

51.问一下 ios版的微信里面是用的系统自带的UIWebView还是用的qq浏览器的内核？

回答：ios版微信里面用的是系统自带的

如何理解谷歌浏览器的安全警告信息

Mon, 17 Aug 2015 17:13:35 CST

最近如果使用Chrome访问国内的很多网站的时候，比如exmail.qq.com, 你可能会注意到这样一个对话框，这个是什么意思？访问链接没有私密性吗? 等等，这里好像有点不对，网页私密性到底是个啥，为啥会提醒我这个问题，我不是已经输了密码登录了嘛？事情要从头说起。

我上个邮箱，连私密性都没有了，那里面的照片应该怎么办，以前修电脑没有私密性，现在连上网都没有私密性，难道我又要红了？

一、HTTPS (安全超文本协议）怎么来的？

1997 年 CERN发明HTTP 协议并用于万维网的时候，仅仅是为了在学术界内部做一个共享数据的平台, 并没有想到太多传输中的安全性。毕竟当年网络规模非常小，而计算机以及昂贵的网络设备并不是每个人都可以买得起的。

他们当然没有料到之后万维网居然成了一个信息传递的通用平台，一帮人甚至丧心病狂地在上面做起了Web电子邮箱、网络银行一类的服务。这类服务对安全性和私密性的要求都非常严格，因为基本上没有人希望自己的银行密码，私人的邮件在传输中被第三方看到。

所以问题就来了， HTTP 是明文传输的。 HTTP倒是支持密码认证，只是不巧的是，密码也是明文传的。

针对这种情况，在网景一帮科学家，特别是 Dr. Taher Elgamal （号称SSL 之父）的努力下， HTTPS 横空出世了。

HTTPS 里面，所有传输的数据都是加密过的，于是第三方无法在数据的传输过程中获得任何有用的数据，数据传输中的私密性自然得到了保证。

至少当初设计的目的是这样子。

HTTPS 并非是一个全新的协议，其实是在 HTTP的基础上，加了 SSL （安全套接字）或者是后来的 TLS (传输安全协议)。 SSL/TLS 工作在 HTTP 之下, 负责加密所有传输的数据。

说个题外话，当时不仅仅是 HTTP，众多的互联网上层协议，即应用层协议，STMP 电子邮件协议一类，大多都是明文传输的。而移动互联网或
者其他网络，都是基于一些标准的协议，就是TCP/IP协议簇。早期时候，这些协议是由互联网领域专家联合制定的，就像现在制定法律的过程一样。而经过实
际的验证，其不严谨性渐渐被发现，于是人们在此前的基础上进行不断更新，SSL/TLS就是这样出来的。 SSL/TLS
由于是工作在TCP层和应用层之间，它可以加密任何应用层协议，包括STMP一类。从这个角度说来，网景对互联网的贡献其实是非常深远的。

HTTPS 使用非对称算法交换密钥，这个也是一个非常精巧的算法，有兴趣的同学可以点击这里了解下，号称是20世纪最重要的算法之一。

HTTPS 除了解决加密问题以外，还需要还解决另外一个问题：网站真实身份鉴别

比如，如果你上招行网站，你怎么知道你上的就是招商银行网站而不是一个做得和招商银行一模一样的钓鱼网站呢？

这个其实和现实生活中如何鉴定一个长的像警察并且突然站到你面前要你交罚款的人是否是真正的人民警察是一个场景。

”警官证可以给我看看吗，谢谢！“

HTTPS 用的是同一种方法，它要求每一个使用这个协议的网站从专业的第三方机构申请一个数字证书，数字证书中包括网站的域名，所有者等等（当然也包括公钥，这里不详细展开协议细节了）。

这个数字证书其实就相当于现实中的警官证。

在访问这个网站的时候浏览器会对证书做一次检查，而这个对话框，就是检查的结果。

我们来看看这个对话框内容是个什么鬼。

二、如何鉴别你是警察？因为警官证也有可能是假的。

第一个：

该网站的身份验证已经通过GeoTrust SSL CA–G2的验证，但没有公开审核记录。该网站的安全设置已过期，可能导致日后的Chrome 版本无法安全访问该网站。

刚才有提到证书是由专业机构颁发的，不过，

－专业机构就没有坏人了嘛。

－证书就不会被人偷吗。

－专业机构被骗了怎么办。

事实上，荷兰专业机构(DigiNotar)甚至被入侵过一次，丢了好几百个证书，你可以自行脑补一下有人潜入公安部自己办了几百个警官证是一个多么壮观的场景。

于
是，IETF在2013年启动了一个叫做certificate-transparency的开源项目，把所有已知的合法证书做了一个白名单，浏览器在验
证证书的时候同时也会去查看这个证书是不是在白名单里面。如果不在的话，就会告知用户这个证书找不到记录，于是，有可能是假或者是被盗的证书。

但是，这里有一个致命的问题：

到目前为止，这个还只是一个试验性项目，而这个世界上那么多的网站，你白名单得过来嘛。

（注意：已经没有警示标志）

比如上图所显示的，其实也没有审核纪录，不过警告的标示去掉了。说明谷歌其实自己也知道目前白名单的覆盖很差，一般找不到记录，并不会加上确切的警告标示。所以，目前你可以忽略它。

关键在第二个：

本网站采用较弱的安全配置（SHA-1签名），所以你的连接可能不是私人的。

这个就比较有意思了。

还是那个警官证的问题。要搞一个警官证除了去偷/骗/潜入公安部自己做一个真的以外, 你还可以做个假的嘛。

对于数字证书来说，最重要的鉴别真假的部分是数字签名，而鉴于数字证书一般不小，不可能对每个字节都签一次名，一般来说是对数字证书的一个哈希值进行签名。

如果你不知道哈希值是什么，我给你打个比方。如果你是一个数字证书，那你的照片就是你的哈希值。

它包含下面2个条件：

－通过合适的手段，可以从你产生你的照片，但是没法从照片产生你。意思是，先有你，才能有照片。

－只有你可以精确的产生你的照片，别人都不行。你就是唯一的，你的特征是别人没有的。

所以如果想检查一个人的警官证，只需要看看照片能不能对上人(哈希值符合)，照片上面的骑缝章对不对(数字签名)。但是这个骑缝章只需要盖在照片上，而不需要盖在警官兄的脸上。当然我知道这个比喻有非常多学术上的不严谨性，不过这个是我目前能找到最容易理解的比喻之一了。

数字证书中， SHA-1就是一种常见的哈希算法。可以像照相机一样，给你的数字证书生成一个唯一值（照片）。

只是这个算法有一个问题。这个算法这个函数由于设计时间早，强度太差，导致有可能用两个不同的数字证书可能会生成同样一个值。

这个就像如果你有一个照身份照的照相机，不过这个神奇的照相机拍的太模糊，以致于通过特殊的设定，可以用另外一个人照出和真实警官一模一样的照片。恭喜你，如果你发现了这个设定，你就可以大规模的制作套牌警官证了。

这种现象在哈希函数中被称为是“碰撞”。

对于SHA-1 算法如果要找到这个“特殊的设定”大概需要2的74次方个操作，（也有论文指出，只需要2的61次方个操作即可完成）这个在SHA-1发明的时候是不可想象，不过其实在现在也是不可行的。只是按照现在计算机的发展速度 2018 年左右使用价格合适服务器集群理论上就可以破解（可以参考这里）：

”A
collision attack is therefore well within the range of what an
organized crime syndicate can practically budget by 2018, and a
university research project by 2021。“

（”因此，在一个有组织犯罪集团的范围内，一次碰撞攻击的实际预算是2018，而一个大学的研究项目是2021“）

于是，Chrome 认为使用SHA-1的哈希函数都是潜在不安全的，于是会对所有使用SHA-1的网站证书提出警告，督促所有使用SHA-1的网站换为SHA-2。

不过注意，仅仅是潜在不安全，目前还没有可行可靠的SHA-1碰撞算法出现。

所以，这些网站暂时是安全的，不过也希望站长们多多提高安全意识，因为SHA-1已经非常接近可以被“破解”边缘。很有可能会出现以上情况：被人找到碰撞算法或者说被破解，从而制作虚假警官证。

如果要详细的证书设置以去除这个警告的步骤，可以参考这里（点击进入链接）

因为工作原因——欧朋Opera是Chromium安全组成员，所以我对这个内情比较了解。有兴趣可以去看看讨论组里面的撕逼贴, 截个屏放在这里：

window.open被浏览器拦截的解决方案

Tue, 03 Mar 2015 13:17:00 CST

现象

最近在做项目的时候碰到了使用window.open被浏览器拦截的情况，搞得人无比郁闷啊，虽然在自己的环境可以对页面进行放行，但是对用户来说，不能要求用户都来通过拦截。何况当出现拦截时，很多小白根本不知道发生了啥，不知道在哪里看被拦截的页面，简直悲催啊~~。

另外，可以发现， 当window.open为用户触发事件内部或者加载时，不会被拦截，一旦将弹出代码移动到ajax或者一段异步代码内部，马上就出现被拦截的表现了。

原因分析&深入研究

当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这不是一个用户希望看到的页面。

比如对js中直接执行的，如下代码：

        //  直接打开一个页面
    window.open('//www.baidu.com', '_blank');

浏览器 ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

是否阻止弹出

而对于如下代码:

            document.body.addEventListener('click', function() {
            window.open('//www.baidu.com', '_blank');
        });

所有浏览器都不会拦截。

综上所述，各浏览器对拦截时机的判断不一致，而对于放在ajax回调中的代码，反应又不相同了，这里就不再赘述。但是，被浏览器拦截我们代码中要弹出的窗口并不是程序员所希望的。

解决方案：

1、使用a标签替代

给出如下函数，将此函数绑定到click的事件回调中，就可以避免大部分浏览器对窗口弹出的拦截：

      function newWin(url, id) {
              var a = document.createElement('a');
              a.setAttribute('href', url);
              a.setAttribute('target', '_blank');
              a.setAttribute('id', id);
              // 防止反复添加
              if(!document.getElementById(id)) {                     
                  document.body.appendChild(a);
              }
              a.click();
  }

2、使用form的submit方法打开一个页面

这种方法需要构造一个from，然后由js代码触发form的submit，将表单提交到一个新的页面，代码较长，在这里就不写了，大家知道有这种方案就行了。

大家注意，以上两种方法不适合放在ajax的回调函数中，如果放在回调函数中，依然会被浏览器拦截。

3、终极解决方案–先弹出窗口，然后重定向

第三种方案，其实是一种变通方案，核心思想是: 先通过用户点击打开页面，然后再对页面进行重定向。示例代码如下。

        xx.addEventListener('click', function () {
            // 打开页面，此处最好使用提示页面
            var newWin = window.open('loading page');

            ajax().done(function() {
                // 重定向到目标页面
                newWin.location.href = 'target url';
            });
        });

更多内容请查看 zakwu的小站

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

PHP判断访客是否移动端浏览器访问

Tue, 03 Mar 2015 18:52:08 CST

今天要给大家分享一段PHP代码，该代码的功能是用来判断访客是否移动端浏览器访问，该功能的实现思路是通过HTTP_X_WAP_PROFILE、HTTP_VIA、HTTP_USER_AGENT等信息来判断访客是否通过移动端浏览器访问PHP网站。以下是PHP代码：

/**
 * 是否移动端访问访问
 *
 * @return bool
 */
function isMobile()
{ 
    // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
    if (isset ($_SERVER['HTTP_X_WAP_PROFILE']))
    {
        return true;
    } 
    // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
    if (isset ($_SERVER['HTTP_VIA']))
    { 
        // 找不到为flase,否则为true
        return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;
    } 
    // 脑残法，判断手机发送的客户端标志,兼容性有待提高
    if (isset ($_SERVER['HTTP_USER_AGENT']))
    {
        $clientkeywords = array ('nokia',
            'sony',
            'ericsson',
            'mot',
            'samsung',
            'htc',
            'sgh',
            'lg',
            'sharp',
            'sie-',
            'philips',
            'panasonic',
            'alcatel',
            'lenovo',
            'iphone',
            'ipod',
            'blackberry',
            'meizu',
            'android',
            'netfront',
            'symbian',
            'ucweb',
            'windowsce',
            'palm',
            'operamini',
            'operamobi',
            'openwave',
            'nexusone',
            'cldc',
            'midp',
            'wap',
            'mobile'
            ); 
        // 从HTTP_USER_AGENT中查找手机浏览器的关键字
        if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT'])))
        {
            return true;
        } 
    } 
    // 协议法，因为有可能不准确，放到最后判断
    if (isset ($_SERVER['HTTP_ACCEPT']))
    { 
        // 如果只支持wml并且不支持html那一定是移动设备
        // 如果支持wml和html但是wml在html之前则是移动设备
        if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html'))))
        {
            return true;
        } 
    } 
    return false;
}

代码比较完整，有兴趣的同学可以多做一些测试，有任何bug可以在评论中留言。

微信浏览器webview调试

Sun, 13 Dec 2015 02:50:59 CST

生命不息，折腾不止！

QQ浏览器提供微信调试的插件，本来应该是一件很值得高兴的事情，但是TX改不了一贯的作风，产品狗非要设计为强制设置默认浏览器且QQ所有链接都必须使用QQ浏览器打开，并且无法修改（老版本QQ可以设置）。

说实在的，其实体验蛮好的，默认导入书签（你TM经过我允许了？说不定密码也导入了，当初360浏览器就这么干了），提供IE、Chrome和Edge三个内核（三核浏览器从此诞生，吓尿了），不对，你自己的X5内核呢？不然就四核了。太多我不想吐槽……

于是我已经不打算用了那个好用的调试工具了（但是开发的这个工具还是很好的），然后想到之前的一篇文章：屌爆了,完美调试微信webview(x5)，再次回顾了一下，QQ浏览器应该用的是同一招，细心的话会发现这应该就是调试工具的雏形。

TBS安装

可以先试试上面提到的文章中的办法（我没安装成功）
微信中打开网址 http://debugtbs.cc，安装本地TBS内核，不成功则安装线上TBS内核
微信调试工具提供的办法

ADB安装与启动

这是用于连接android手机的，具体安装参考文章中已经提到。 Android-SDK下载，设置环境变量可根据 window设置环境变量

查看连接设备
然后进入 D:\Program Files\AndroidSDK\platform-tools，打开cmd，执行

  D:\Program Files\AndroidSDK\platform-tools>adb.exe devices
List of devices attached
95CANR4H6T9S7HPJ        device

启动和停止ADB
不需要配置指定设备，执行

  D:\Program Files\AndroidSDK\platform-tools>adb.exe start-server
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
D:\Program Files\AndroidSDK\platform-tools>adb.exe kill-server

调试服务

需要安装python（hint:2.7版本会出现常见的编码问题），下载参考文档中的指定文件，打开手机端USB调试。

解压后进入 D:\Tools\wx_sq_webview_debug\inspector_client20150401打开cmd执行

  python ./inspector.py --adb "D:\Program Files\AndroidSDK\platform-tools\adb.exe"

然后浏览器打开 http://localhost:9222/即可显示微信中打开的需要调试的页面。

一键执行

每次执行这些命令太麻烦，写个 bat文件一次性执行即可，第一次写，写的很丑：

  @echo off
cd "D:\Program Files\AndroidSDK\platform-tools\"
start adb start-server
start %HOMEDRIVE%\Python27\pythonw "D:\Tools\wx_sq_webview_debug\inspector_client20150401\inspector.py" --adb "D:\Program Files\AndroidSDK\platform-tools\adb.exe"
echo begin server at:http://localhost:9222/
:begin
set /p INPUT= Stop server(Y/N)?:
if /i "%INPUT%"=="y" (goto stop
) else (
    goto begin
)
:stop
echo stop server
start adb kill-server
exit

自己修改对应的Android-SDK、Python和chrome inspector的路径即可。

Finally

当然是卸载QQ浏览器啊，瞬间清净了，不弹窗口了，手机也不会动不动安装各种应用了，不会默认安装手机QQ浏览器了，开开心心睡觉！

原文链接

IT瘾浏览器推荐

是时候重新思考浏览器了

局域网内搭建浏览器可信任的SSL证书 – 唐玥璨 | 博客

1.原理

2.开始制作证书

2.1创建CA证书

2.1.1通过 openssl创建CA证书

2.1.2通过windows域控创建CA证书

2.2创建服务器证书

3.信任CA机构证书

4.总结

微软Edge浏览器内置VPN功能

为什么不应将密码保存在浏览器中

尝试解析下 Epub.js：一个在浏览器上渲染 Epub 图书的工具

Epub

参考规范来制作一个简单Epub 图书

按照下图的方式来组织目录和文件

mimetype 文件名固定, 内容也固定位: application/epub+zip

META-INF/container.xml 为入口文件,文件名固定.

OPS/package.opf

其他页面

把目录打包成 EPUB 文件

Epub.js

来看看官方的DEMO

来实现一个”Hello Word”

来看看它有哪些 Model

流程怎么控制的

还没有完全看懂的内容, 感觉是语言特性:

Flex 布局在各家浏览器下的一些bug，尤其是IE - kiera - 博客园

vue iview-admin 如何兼容IE浏览器（通用） - Gas_station的博客 - CSDN博客

谷歌浏览器Chrome离线包下载

下载谷歌浏览器Chrome离线包

UC浏览器被曝中间人攻击漏洞，全球多达十几亿设备均受影响

参考链接

微软正式宣布！桌面版Edge浏览器将采用Chromium内核

浏览器输入url到发起http请求所经历的过程

用户输入url

http网络请求

dns查询ip

tcp/ip请求

黑客是如何利用你的浏览器进行挖矿的？

0×1 概述

0×2 千里百科

0×3 家族样本分析

1 、 C oinhive家族网页挖矿木马介绍：

2、JSEcoin家族网页挖矿木马介绍：

3、CryptoLoot家族网页挖矿木马介绍：

4、DeepMiner家族网页挖矿木马介绍：

5、Webmine家族网页挖矿木马介绍：

7、BrowserMine家族网页挖矿木马介绍：

9、CryptoWebMiner家族网页挖矿木马介绍：

10、PPoi家族网页挖矿木马介绍：

0×4 趋势分析与统计

0×5 安全建议

0×6 IOCs

[Python爬虫]使用Selenium操作浏览器订购火车票

开发环境

关于Selenium

关于xpath

模块安装

Chrome Driver 下载

程序原理

代码介绍

执行结果

注意事项:

源码位置:

现代浏览器性能优化-CSS篇

理解CSS解析过程

优化核心依旧是减少下载时间

Preload

首页CSS内联，非必要CSS异步加载

终极完美结构

扩展阅读

用上了全新的火狐浏览器，这 10 款优秀的 Firefox 扩展不应错过

壮士断腕，Firefox Quantum 的扩展怎么了？

VivaldiFox：让 Firefox 像 Vivaldi 一样随网页改变颜色

Multi-Account Containers：Firefox 官方开发的多账号助手

Tab Center Redux：在侧边栏管理标签页

Gesturefy：丰富自定义的手势扩展

Twitter as a Sidebar：在侧边栏中刷推

2.1.1通过 `openssl`创建CA证书

mimetype 文件名固定, 内容也固定位: `application/epub+zip`

3.调用： `-webkit-filter: blur(10px);filter: blur(10px);`在Android下背景图没有blur掉，只是被单纯的放大而已

4. `shadowBlur`是阴影效果吧，我们是想实现图片毛玻璃

20.如果在某个设备第一次打开应用的时候没有网络，x5内核可以启动吗？单网络恢复后还要再次认证，还是不用在认证？

27.x5内核目前是独立运行的还是需要安装ＱＱ浏览器？

31.x5的文件分片功能解决了吗， `blob = file.webkitSlice(start, stop)`,这样分片出来的blob用不了啊。