5分钟从入门到精通,给列表项目添加动画

2019-09-11 16:05栏目:人才招聘
TAG:

关于启用 HTTPS 的一些经验分享(二)

2015/12/24 · 基础技术 · HTTP, HTTPS

原文出处: imququ(@屈光宇)   

文章目录

  • SSL 版本选择
  • 加密套件选择
  • SNI 扩展
  • 证书选择

几天前,一位朋友问我:都说推荐用 Qualys SSL Labs 这个工具测试 SSL 安全性,为什么有些安全实力很强的大厂家评分也很低?我认为这个问题应该从两方面来看:1)国内用户终端情况复杂,很多时候降低 SSL 安全配置是为了兼容更多用户;2)确实有一些大厂家的 SSL 配置很不专业,尤其是配置了一些明显不该使用的 CipherSuite。

我之前写的《关于启用 HTTPS 的一些经验分享(一)》,主要介绍 HTTPS 如何与一些新出的安全规范配合使用,面向的是现代浏览器。而今天这篇文章,更多的是介绍启用 HTTPS 过程中在老旧浏览器下可能遇到的问题,以及如何取舍。

给列表项目添加动画

2015/05/08 · CSS, HTML5, JavaScript · 1 评论 · 动画

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁止转载!
英文出处:cssanimation.rocks。欢迎加入翻译组。

当网页某部分发生改变时,添加一些动画有利于让用户知道发生了什么事情。因为动画能预告新内容的到达,或者让用户知道信息被移除。在这篇文章里,将会看到如何运用动画帮助新内容的引进,例如显示或隐藏列表里的项目。

图片 1

(可在原文查看效果)

WebSocket:5分钟从入门到精通

2018/01/08 · HTML5 · 1 评论 · websocket

原文出处: 程序猿小卡   

SSL 版本选择

TLS(Transport Layer Security,传输层安全)的前身是 SSL(Secure Sockets Layer,安全套接字层),它最初的几个版本(SSL 1.0、SSL 2.0、SSL 3.0)由网景公司开发,从 3.1 开始被 IETF 标准化并改名,发展至今已经有 TLS 1.0、TLS 1.1、TLS 1.2 三个版本。TLS 1.3 改动会比较大,目前还在草案阶段。

SSL 1.0 从未公开过,而 SSL 2.0 和 SSL 3.0 都存在安全问题,不推荐使用。Nginx 从 1.9.1 开始默认只支持 TLS 的三个版本,以下是 Nginx 官方文档中对 ssl_protocols 配置的说明:

Syntax: ssl_protocols [SSLv2] [SSLv3] [TLSv1] [TLSv1.1] [TLSv1.2];
Default: ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
Context: http, server
Enables the specified protocols. The TLSv1.1 and TLSv1.2 parameters work only when the OpenSSL library of version 1.0.1 or higher is used.

但不幸的是,IE 6 只支持 SSLv2 和 SSLv3(来源),也就是说 HTTPS 网站要支持 IE 6,就必须启用 SSLv3。仅这一项就会导致 SSL Labs 给出的评分降为 C。

引进内容

动画有个很好的用处,它能够让访客知道你的网站内容在何时发生了改动。当添加或删除内容而没有任何动画进行过渡时,内容的突然改变会让用户感到困惑。而通过添加细微的动画就能避免这种情况发生,并且有助于“宣布”有东西将要离开或引进页面。

以下是一个通过添加或删除操作来管理列表内容的例子。大多数动画能用于其它类型的内容。如果你发现它们是有用的,或有其它想法想添加进来,那么请 联系我们,我们很乐意听听你的想法。

一、内容概览

WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。

加密套件选择

加密套件(CipherSuite),是在 SSL 握手中需要协商的很重要的一个参数。客户端会在 Client Hello 中带上它所支持的 CipherSuite 列表,服务端会从中选定一个并通过 Server Hello 返回。如果客户端支持的 CipherSuite 列表与服务端配置的 CipherSuite 列表没有交集,会导致无法完成协商,握手失败。

CipherSuite 包含多种技术,例如认证算法(Authentication)、加密算法(Encryption)、消息认证码算法(Message Authentication Code,简称为 MAC)、密钥交换算法(Key Exchange)和密钥衍生算法(Key Derivation Function)。

SSL 的 CipherSuite 协商机制具有良好的扩展性,每个 CipherSuite 都需要在 IANA 注册,并被分配两个字节的标志。全部 CipherSuite 可以在 IANA 的 TLS Cipher Suite Registry 页面查看。

OpenSSL 库支持的全部 CipherSuite 可以通过以下命令查看:

openssl ciphers -V | column -t 0xCC,0x14 - ECDHE-ECDSA-CHACHA20-POLY1305 TLSv1.2 Kx=ECDH Au=ECDSA Enc=ChaCha20-Poly1305 Mac=AEAD ... ...

1
2
3
openssl ciphers -V | column -t
0xCC,0x14  -  ECDHE-ECDSA-CHACHA20-POLY1305  TLSv1.2  Kx=ECDH        Au=ECDSA   Enc=ChaCha20-Poly1305  Mac=AEAD
... ...

0xCC,0x14 是 CipherSuite 的编号,在 SSL 握手中会用到。ECDHE-ECDSA-CHACHA20-POLY1305 是它的名称,之后几部分分别表示:用于 TLSv1.2,使用 ECDH 做密钥交换,使用 ECDSA 做认证,使用 ChaCha20-Poly1305 做对称加密,由于 ChaCha20-Poly1305 是一种 AEAD 模式,不需要 MAC 算法,所以 MAC 列显示为 AEAD。

要了解 CipherSuite 的更多内容,可以阅读这篇长文《TLS 协议分析 与 现代加密通信协议设计》。总之,在配置 CipherSuite 时,请务必参考权威文档,如:Mozilla 的推荐配置、CloudFlare 使用的配置。

以上 Mozilla 文档中的「Old backward compatibility」配置,以及 CloudFlare 的配置,都可以很好的兼容老旧浏览器,包括 Windows XP / IE6。

之前见到某个大厂家居然支持包含 EXPORT 的 CipherSuite,这些套件在上世纪由于美国出口限制而被弱化过,已被攻破,实在没有理由再使用。

编写HTML代码

在一开始,准备好一个已提前填充好的列表和一个可以为该列表添加新项目的按钮。

XHTML

<ul id="list"> <li class="show">List item</li> <li class="show">List item</li> </ul> <button id="add-to-list">Add a list item</button>

1
2
3
4
5
<ul id="list">
<li class="show">List item</li>
<li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

但有一些地方需要注意。首先,在HTML代码里有两个 ID。一般来说,我们不会用 ID 来设置样式,因为它们的唯一性会引入一些问题。然而,它们会在使用 JavaScript 时提供了便利性。

初始列表项目有类名 “show”,正因为这是类名,我们将会在后面通过它为元素添加动画效果。

二、什么是WebSocket

HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。

对大部分web开发者来说,上面这段描述有点枯燥,其实只要记住几点:

  1. WebSocket可以在浏览器里使用
  2. 支持双向通信
  3. 使用很简单

SNI 扩展

我们知道,在 Nginx 中可以通过指定不同的 server_name 来配置多个站点。HTTP/1.1 协议请求头中的 Host 字段可以标识出当前请求属于哪个站点。但是对于 HTTPS 网站来说,要想发送 HTTP 数据,必须等待 SSL 握手完成,而在握手阶段服务端就必须提供网站证书。对于在同一个 IP 部署不同 HTTPS 站点,并且还使用了不同证书的情况下,服务端怎么知道该发送哪个证书?

Server Name Indication,简称为 SNI,是 TLS 的一个扩展,为解决这个问题应运而生。有了 SNI,服务端可以通过 Client Hello 中的 SNI 扩展拿到用户要访问网站的 Server Name,进而发送与之匹配的证书,顺利完成 SSL 握手。

Nginx 在很早之前就支持了 SNI,可以通过 nginx -V 来验证。以下是我的验证结果:

./nginx -V nginx version: nginx/1.9.9 built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04) built with OpenSSL 1.0.2e-dev xx XXX xxxx TLS SNI support enabled configure arguments: --with-openssl=../openssl --with-http_ssl_module --with-http_v2_module

1
2
3
4
5
6
./nginx -V
nginx version: nginx/1.9.9
built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04)
built with OpenSSL 1.0.2e-dev xx XXX xxxx
TLS SNI support enabled
configure arguments: --with-openssl=../openssl --with-http_ssl_module --with-http_v2_module

然而,并不是所有浏览器都支持 SNI,以下是常见浏览器支持 SNI 的最低版本:

浏览器 最低版本
Chrome Vista+ 全支持;XP 需要 Chrome 6+;OSX 10.5.7+ 且 Chrome 5+
Firefox 2.0+
Internet Explorer 7+ (需要 Vista+)
Safari 3+ (需要 OS X 10.5.6+)
Mobile Safari iOS 4.0+
Android Webview 3.0+

如果要避免在不支持 SNI 的浏览器中出现证书错误,只能将使用不同证书的 HTTPS 站点部署在不同 IP 上,最简单的做法是分开部署到不同机器上。

一些 JavaScript 代码

为了实现演示里的动画,将会编写一些 JavaScript 代码来添加新列表项目,然后为新添加列表项目添加类名 “show”,以至动画能够发生。使用这两个步骤的理由是,如果列表项目直接以可见的状态添加进来,它们就没有任何过渡时间而直接发生了。

我们打算在 li 元素上使用动画效果,但这将会让通过覆盖样式来添加其它删除元素的动画效果,变得更加困难。

JavaScript

/* * Add items to a list - from cssanimation.rocks/list-items/ */ document.getElementById('add-to-list').onclick = function() { var list = document.getElementById('list'); var newLI = document.createElement('li'); newLI.innerHTML = 'A new item'; list.appendChild(newLI); setTimeout(function() { newLI.className = newLI.className + " show"; }, 10); }

1
2
3
4
5
6
7
8
9
10
11
12
/*
* Add items to a list - from cssanimation.rocks/list-items/
*/
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

1、有哪些优点

说到优点,这里的对比参照物是HTTP协议,概括地说就是:支持双向通信,更灵活,更高效,可扩展性更好。

  1. 支持双向通信,实时性更强。
  2. 更好的二进制支持。
  3. 较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节(取决于数据包长度),客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
  4. 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)

对于后面两点,没有研究过WebSocket协议规范的同学可能理解起来不够直观,但不影响对WebSocket的学习和使用。

证书选择

HTTPS 网站需要通过 CA 取得合法证书,证书通过数字签名技术确保第三方无法伪造。证书的简单原理如下:

  • 根据版本号、序列号、签名算法标识、发行者名称、有效期、证书主体名、证书主体公钥信息、发行商唯一标识、主体唯一标识、扩展生成 TBSCertificate(To Be Signed Certificate, 待签名证书)信息;
  • 签发数字签名:使用 HASH 函数对 TBSCertificate 计算得到消息摘要,用 CA 的私钥对消息摘要进行加密,得到签名;
  • 校验数字签名:使用相同的 HASH 函数对 TBSCertificate 计算得到消息摘要,与使用 CA 公钥解密签名得到内容相比较;

使用 SHA-1 做为 HASH 函数的证书被称之为 SHA-1 证书,由于目前已经找到 SHA-1 的碰撞条件,将证书换成使用更安全的 SHA-2 做为 HASH 函数的 SHA-2 证书被提上日程。

实际上,微软已经宣称自 2017 年 1 月 1 日起,将全面停止对 SHA-1 证书的支持。届时在最新版本的 Windows 系统中,SHA-1 证书将不被信任。

而根据 Chrome 官方博客的文章,使用 SHA-1 证书且证书有效期在 2016 年 1 月 1 号至 2016 年 12 月 31 号之间的站点会被给予「安全的,但存在漏洞」的提示,也就是地址栏的小锁不再是绿色的,并且会有一个黄色小三角。而使用 SHA-1 证书且证书有效期超过 2017 年 1 月 1 号的站点会被给予「不安全」的红色警告,小锁上直接显示一个红色的叉。

然而,并不是所有的终端都支持 SHA-2 证书,服务端不支持还好办,浏览器只能依赖于用户升级了。下面是常见浏览器支持 SHA-2 证书的最低版本:

浏览器 支持 SHA-2 证书的最低版本
Chrome 26+
Firefox 1.5+
Internet Explorer 6+ (需要 XP SP3+)
Safari 3+ (需要 OS X 10.5+)
Android Webview 2.3+

可以看到,如果要照顾没有打 XP SP3 补丁的 IE6 用户,只能继续使用 SHA-1 证书。

在我之前的文章中,还提到过 ECC 证书,这种新型的证书支持度更差,这里略过不提,有兴趣的同学可以点这里查看。

是否可以针对不同浏览器启用不同证书呢?理论上服务端可以根据客户端 Client Hello 中的 Cipher Suites 特征以及是否支持 SNI 的特征来分配不同证书,不过我没有实际验证过。

本文先写这么多,很多策略都需要根据自己网站的用户来决定,例如我的博客基本没有 IE8- 用户,理所当然可以禁用 SSLv3。如果你的产品还有很多使用老旧浏览器的用户,那就必须为这些用户做兼容方案了。一种方案是:只把主域安全级别配低,将 XP 上 IE 用户的 HTTPS 请求直接重定向到 HTTP 版本,这样其它域名可以使用高安全级别的配置,运维起来比较方便。

1 赞 1 收藏 评论

图片 2

无动画

在最基本的效果中,我们能写一些 CSS 代码显示列表项目。因为添加类名 show 让它们可见,所以删掉类名 show 也能导致它们消失。

CSS

li { list-style: none; background: #d1703c; color: #fff; height: 0; line-height: 2em; margin: 0; padding: 0 0.5em; overflow: hidden; width: 10em; } li.show { height: 2em; margin: 2px 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}
 
li.show {
  height: 2em;
  margin: 2px 0;
}

这些样式将 li 设置为一个没有项目符合、height 为 0、margin 为 0和 overflow 为 hidden 的矩形。这样做是为了直到添加类名 show,它们才会出现而变得可见。

类名 show 应用了 height 和 margin。因为我们至今还没使用动画,所以列表项目会直接出现在页面,像下面那样。当然你也可以点击列表项目,让它们消失。

图片 3

(可在原文查看效果)

2、需要学习哪些东西

对网络应用层协议的学习来说,最重要的往往就是连接建立过程数据交换教程。当然,数据的格式是逃不掉的,因为它直接决定了协议本身的能力。好的数据格式能让协议更高效、扩展性更好。

下文主要围绕下面几点展开:

  1. 如何建立连接
  2. 如何交换数据
  3. 数据帧格式
  4. 如何维持连接

淡入淡出

作为第一个动画,我们将会添加一个简单的淡入淡出效果。相对之前的项目列表,该列表项目多了渐变效果。虽然在视觉上看起来仍然有一点笨重,但这有利于让浏览者有更长的时间去注意有东西正在变化。

图片 4

(可在原文查看效果)

因为要在已创建 CSS 片段上添加效果。所以为了在列表上应用这个效果,需要在包围 li 的容器上添加类名 fade

CSS

.fade li { transition: all 0.4s ease-out; opacity: 0; height: 2em; } .fade li.show { opacity: 1; }

1
2
3
4
5
6
7
8
.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

三、入门例子

在正式介绍协议细节前,先来看一个简单的例子,有个直观感受。例子包括了WebSocket服务端、WebSocket客户端(网页端)。完整代码可以在 这里 找到。

这里服务端用了ws这个库。相比大家熟悉的socket.iows实现更轻量,更适合学习的目的。

滑下&淡入淡出

每次添加或删除一个项目列表都会很突然,这导致了不和谐的效果。那就让我们通过调整高度来创建一个更加流畅的滑动效果。

图片 5

(可在原文查看效果)

这里与上面类名 fade 唯一不同的是 height:2em 被移除掉了。因为类名 show 已包含了一个高度(继承自第一个CSS片段),这样高度就会自动过渡了。

CSS

.slide-fade li { transition: all 0.4s ease-out; opacity: 0; } .slide-fade li.show { opacity: 1; }

1
2
3
4
5
6
7
.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

1、服务端

代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志。

var app = require('express')(); var server = require('http').Server(app); var WebSocket = require('ws'); var wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('server: receive connection.'); ws.on('message', function incoming(message) { console.log('server: received: %s', message); }); ws.send('world'); }); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); app.listen(3000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = require('express')();
var server = require('http').Server(app);
var WebSocket = require('ws');
 
var wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
    console.log('server: receive connection.');
    
    ws.on('message', function incoming(message) {
        console.log('server: received: %s', message);
    });
 
    ws.send('world');
});
 
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});
 
app.listen(3000);

旋转进来

除了淡入淡出和滑动效果,还能更进一步地添加一些 3D 效果。浏览器不止能在 X 或 Y 轴上变换元素,还具有深度的场景( Z 轴)。

图片 6

(可在原文查看效果)

为了设置这个效果,需要定义一个 section 容器作为 3D 过渡的舞台。通过给 perspective 赋值就可以做到。

CSS 的 perspective 代表场景的深度。一个较低的数值意味着近视角,是一个极端的角度。所以这值得你通过设置不同的值来找到一个合适的值。

CSS

.swing { perspective: 100px; }

1
2
3
.swing {
  perspective: 100px;
}

下一步是设置 li 元素在这个舞台里的变形。我们将会使用 opacity 创建淡入淡出效果作为前奏,然后为在舞台上的 li 添加 transform 进行旋转。

CSS

.swing li { opacity: 0; transform: rotateX(-90deg); transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); } .swing li.show { opacity: 1; transform: none; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); }

1
2
3
4
5
6
7
8
9
10
11
.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
 
.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

在这个例子中,让 li 绕X 轴向后旋转 90 度作为初始状态。当添加类名 show 时,它的 transform 被设置为 none,这就能让它在舞台上进行过渡了。为了给它旋转效果,我使用了 cubic-bezier 时间函数。

2、客户端

代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志。

1
 

侧面旋转

现在我们只要稍稍调整这个效果,就能十分容易地创建不同的设计。下面这个例子,是让项目列表在侧面旋转。

图片 7

(可在原文查看效果)

要创建这个效果,我们只需改变旋转轴。

CSS

.swing li { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); }

1
2
3
4
5
.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

我们已经把 rotateX 改成 rotateY 了。

3、运行结果

可分别查看服务端、客户端的日志,这里不展开。

服务端输出:

server: receive connection. server: received hello

1
2
server: receive connection.
server: received hello

客户端输出:

client: ws connection is open client: received world

1
2
client: ws connection is open
client: received world

版权声明:本文由ag真人发布于人才招聘,转载请注明出处:5分钟从入门到精通,给列表项目添加动画