当前位置:千赢国际官网 > 千赢网页手机版登入 > 应用中的身份验证技术,使用Canvas实时处理Vide

应用中的身份验证技术,使用Canvas实时处理Vide

文章作者:千赢网页手机版登入 上传时间:2019-09-29

HTTP Client Hints 介绍

2015/09/14 · HTML5 · 算法

初稿出处: imququ(@屈光宇)   

新近几年种种 Web 手艺向来在爆炸式发展,每日皆有恢宏新东西涌现出来。针对这些场地,行业内部两位大佬目前前后相继发文表明了上下一心的视角:Stop pushing the web forward、Is the web platform getting too big?。其实很早在此以前作者就意识到以本身眼下的生命力,吃透全部Web 新才干大约是相当的小概毕其功于一役的天职,笔者体贴入微新本领的主体放在了品质优化上。

今日自己要向大家介绍的技巧是:HTTP Client Hints,也与本性优化有关。利用那项技术,HTTP 顾客端(平常能够以为是浏览器)能够积极将部分特点告诉服务端,以便服务端更有针对性地出口内容。这项才能由我们熟知的 Ilya Grigorik 提议,最近还处于较为开始的一段时代的品级,较为标准的陈诉文书档案能够在这边找到。目前 Chrome 46 (beta) 已帮忙它,IE 和 Firefox 则还在思考中。

实在在此以前浏览器已经将众多本身特色放在 HTTP 供给中,举例下边这一个尾部字段:

  • User-Agent:提供浏览器类型及版本、操作系统及版本、浏览器内核等音讯;
  • Accept:申明浏览器扶助什么 MIME type(比如 Chrome 通过 Accept 评释自个儿帮衬 image/webp 图片格式);
  • Accept-Encoding:阐明本浏览器帮忙什么内容编码格局(举个例子:gzip、deflate、sdch);
  • Accept-Language:评释本浏览器帮助那二个语言;

透过以上那些尾部字段,大家早已足以本着差异客户端输出区别内容。举个例子本博客对支撑 Webp 格式的浏览器会使用 Webp 来压缩图片大小;本博客还有大概会透过 User-Agent 针对 IE 老版本禁止使用 localStorage 缓存战略。

只是有部分浏览器天性,大家鞭长莫及间接拿走,如显示器分辨率、设备像素比(devicePixelRatio)、客商带宽等。而在运动 Web 中,为了尽大概节约客户流量,必要输出尺寸最合适的图纸能源。为了解决这几个标题,常见的方案有:1)使用 JS 获取这一个特色,动态拼接图片 U劲客L;2)使用 HTML 中的 sizes 和 srcset 属性、picture 标签或 CSS 中的 image-set 属性来落到实处响应式图片。方案 1 一点也不细略,这里略过;方案 2 互连网有好多有关小说,不熟悉的同校能够活动物检疫索「响应式图片」精晓下。

此地看多个实施方案 2 中关系的 picture、sizes 和 srcset 达成的响应式图片代码(via):

<picture> <!-- serve WebP to Chrome and Opera --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w, /image/thing-800.webp 800w, /image/thing-1200.webp 1200w, /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 30em) 100vw" srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w, /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w, /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w" type="image/webp"> <!-- serve JPEGXR to Edge --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w, /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w, /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w" type="image/vnd.ms-photo"> <source sizes="(min-width: 30em) 100vw" srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w, /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w, /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w" type="image/vnd.ms-photo"> <!-- serve JPEG to others --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w, /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w, /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w"> <source sizes="(min-width: 30em) 100vw" srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w, /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w, /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w"> <!-- fallback for browsers that don't support picture --> <img src="/image/thing.jpg" width="50%"> </picture>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<picture>
  <!-- serve WebP to Chrome and Opera -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!-- serve JPEGXR to Edge -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!-- serve JPEG to others -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!-- fallback for browsers that don't support picture -->
  <img src="/image/thing.jpg" width="50%">
</picture>

这段冗长的代码只是为着完结一张响应式图片,就算有局地言过其实,实际应用时常常不会写那样全,但从中能够收获三个定论:在顾客端完成的布置愈来愈多,HTML 容积就越大越冗余,可维护性和可读性就越差。

而选用了 HTTP Client Hints 之后,浏览器在页面发起子能源央求时,会通过新扩展的一名目繁两尾部字段带上分辨率、设备像素比、图片宽度等新闻,使得各样复杂的国策能够挪到服务端去完结了。下边来看一看具体细节:

率先,有了支撑 HTTP Client Hints 的浏览器之后,页面上还索要显式启用它。那是因为不是享有服务端都落到实处了响应式输出计策,每便都发送这一个新扩展的头顶或者会招致浪费。

与以往同样,这些功效也足以透过 HTTP 响应头和 meta 标签二种艺术拉开并安顿:

Accept-CH: DPR, Width, Viewport-Width

1
Accept-CH: DPR, Width, Viewport-Width

或:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

1
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

在启用了 HTTP Client Hints 的页面中,全体子能源央浼(无论怎么着类型,无论如何办法创立),都会带走 Accept-CH 属性中所指明的头顶,举例:

Accept: image/webp,image/*,*/*;q=0.8 Accept-Encoding: gzip, deflate, sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2 Connection: keep-alive DPR: 2 Host: qgy18.imququ.com User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36 Viewport-Width: 1280 Width: 128

1
2
3
4
5
6
7
8
9
Accept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive
DPR: 2
Host: qgy18.imququ.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36
Viewport-Width: 1280
Width: 128

有了这么些底部,图片服务器能够领略顾客端的 devicePixelRatio 是 2、图片宽度是 128px、帮忙 Webp 格式,所以输出 256px 的双倍 Webp 图最合适。然则浏览器怎么明白这几个图片供给作为双倍图来利用啊(也正是说照旧展现为 128px)?那就必要在响应头中扩展上面那么些字段作为 DPPRADO 的对答:

Content-DPR: 2

1
Content-DPR: 2

急需小心的是,伏乞头中的 Width 字段,是依附 img 标签上的 sizes 属性算出来的。假设图片并未有一些名 sizes,可能图片供给是通过 JS 成立的,浏览器不能获知 Width,也就不会引导这么些底部。

事实上,除了 DP奥迪Q5、Viewport-Width 和 Width 之外,文书档案还规定了多少个字段,不过透过自身的测验 Chrome 46 并未支持它们,这里差非常少介绍下:

  • Downlink:用来提示当前网络的下水链路带宽,单位是 Mbps;
  • Save-Data:用来提醒当前浏览器是或不是工作在省流情势之下,取值为 1 或 0;

能够见见这两本脾性,也是为着尽大概给顾客节省带宽而规划的。能够预言,后续还应该有更加多字段加到 HTTP Client Hints 合同中来。随着 HTTP/2 的推广,尾部压缩使得扩展多少个底部字段带来的开销变得不大了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同贰个 U奔驰G级L 可能会输出区别的内容,所以无论中间节点,照旧浏览器,在贯彻响应 Cache 时必须小心,须求针对区别的状态缓存多份内容。那亟需用到 HTTP/1 中的  Vary 响应头,举个例子:

Vary: DPR, Width, Downlink

1
Vary: DPR, Width, Downlink

标记假若要求缓存这些响应,在生成缓存 Key 的时候须要将央浼头中的 DPTiggo、Width 和 Downlink 的值计算进去。

好了,HTTP Client Hints 能力就介绍到那边。很安详地见到,大多数 Web 新技艺都以在给 HTML、CSS 和 JavaScript 扩大效果和特征,而那项本领却是把后边复杂的代码和逻辑现在移,让我们的 HTML 代码能够轻装参与竞技。一些开源图片管理系列现已起来支持这么些新特点了,国外的一对 CDN 托管服务一定也在摩拳擦掌,作者可怜企盼它的现在。

1 赞 收藏 评论

图片 1

观念 Web 应用中的身份验证本事

2016/12/13 · 基础手艺 · WEB, 身份验证

正文小编: 伯乐在线 - ThoughtWorks 。未经我许可,禁绝转发!
招待加入伯乐在线 专辑笔者。

标题中的 “守旧Web应用” 这一说法并未什么官方概念,只是为着与“今世化Web应用”做相比较而自拟的三个概念。所谓“今世化Web应用”指的是这一个基于布满式架构观念设计的,面向多少个端提供稳定可相信的高可用服务,並且在必要时亦可横向扩大的Web应用。相对来说,古板Web应用则器重是直接面向PC顾客的Web应用程序,选用单体架构比较多,也说不定在当中使用SOA的布满式运算手艺。

直接以来,守旧Web应用为组合网络表达了主要成效。由此古板Web应用中的身份验证技术通过几代的前行,已经缓慢解决了非常的多其实难题,并最终沉淀了有个别实行形式。

图片 2

在描述两种身份鉴权技术在此之前,要重申一点:在营造网络Web应用进程中,无论使用哪个种类技巧,在传输顾客名和密码时,请必定要选用安全连接格局。因为不论使用何种鉴权模型,都不恐怕保证顾客凭据在传输进度中不被窃取。

HTML5:使用Canvas实时管理Video

2015/09/11 · HTML5 · Canvas

本文由 伯乐在线 - cucr 翻译,唐尤华 校稿。未经许可,幸免转发!
斯洛伐克语出处:mozilla。款待参加翻译组。

结合HTML5下的videocanvas的魔法,你能够实时管理录制数据,为正值播放的摄像增多五光十色的视觉效果。本学科演示怎么着运用JavaScript代码完结chroma-keying特效(也被叫做“棕黑荧屏效应”)。

请看这些实例.

Basic和Digest鉴权

依照HTTP的Web应用离不开HTTP本人的长治特点中关于身份鉴权的一对。就算HTTP规范定义了一些种鉴权形式,但确实供Web应用开垦者选用的并相当少,这里大约回看一下一度被大范围选取过的Basic 和 Digest鉴权。

不晓得读者是还是不是纯熟一种最直接向服务器提供身份的方式,即在U途乐L中直接写上顾客名和密码:

1
2
http://user:passwd@www.server.com/index.html
 

那正是Basic鉴权的一种样式。

Basic和Digest是由此在HTTP央求中一贯满含客户名和密码,恐怕它们的哈希值来向服务器传输客商凭据的不二秘技。Basic鉴权直接在各个乞求的底部或UQashqaiL中包括明文的客商名或密码,大概经过Base64编码过的顾客名或密码;而Digest则会利用服务器再次来到的自由值,对客户名和密码拼装后,使用频仍MD5哈希管理后再向服务器传输。服务器在管理每一种央浼以前,读取收到的凭证,并判别客商的地方。

图片 3

Basic和Digest鉴权有一密密麻麻的劣势。它们必要在各种央浼中提供证据,因而提供“记住登陆状态”功用的网址中,不得不将客商凭据缓存在浏览器中,扩展了顾客的安全风险。Basic鉴权基本不对客户名和密码等趁机新闻举行预管理,所以只符合于较安全的巴中条件,如通过HTTPS安全连接传输,只怕局域网。

看起来更安全的Digest在非安全连接传输进程中,也无从抗击中间人经过篡改响应来供给客商端降级为Basic鉴权的抨击。Digest鉴权还会有多个破绽:由于在劳动器端须求核准收到的、由客户端经过延续MD5哈希值的合法性,需求选取原有密码做一样的运算,那让服务器无法在蕴藏密码在此以前对其举办不可逆的加密。Basic 和Digest鉴权的劣势调控了它们不容许在网络Web应用中被大批量行使。

文书档案内容

正文使用的XHTML文书档案如下所示。

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <style> body { background: black; color:#CCCCCC; } #c2 { background-image: url(foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3B3B3B; } </style> <script type="text/javascript;version=1.8" src="main.js"></script> </head> <body onload="processor.doLoad()"> <div> <video id="video" src="video.ogv" controls="true"/> </div> <div> <canvas id="c1" width="160" height="96"/> <canvas id="c2" width="160" height="96"/> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      body {
        background: black;
        color:#CCCCCC;
      }
      #c2 {
        background-image: url(foo.png);
        background-repeat: no-repeat;
      }
      div {
        float: left;
        border :1px solid #444444;
        padding:10px;
        margin: 10px;
        background:#3B3B3B;
      }
    </style>
    <script type="text/javascript;version=1.8" src="main.js"></script>
  </head>
 
  <body onload="processor.doLoad()">
    <div>
      <video id="video" src="video.ogv" controls="true"/>
    </div>
    <div>
      <canvas id="c1" width="160" height="96"/>
      <canvas id="c2" width="160" height="96"/>
    </div>
  </body>
</html>

以上代码关键部分如下:

1.创设了多个canvas成分,ID分别为c1和c2。c1用于体现当前帧的本来录像,c2是用来展现试行chroma-keying特效后的录像;c2预加载了一王海鸰态图片,将用来代表摄像中的背景观部分。
2.JavaScript代码从main.js文件导入;这段脚本使用JavaScript 1.8的性状,所以在导入脚本时,第22行中钦定了版本。
3.当网页加载时,main.js中的processor.doLoad()方法会运营。

简易实用的登入手艺

对于网络Web应用来讲,不利用Basic或Digest鉴权的理由首要有七个:

  1. 不能够承受在各种乞请中发送顾客名和密码凭据
  2. 内需在服务器端对密码举行不可逆的加密

就此,网络Web应用开垦已经产生了多少个骨干的试行方式,能够在服务端对密码强加密之后存款和储蓄,并且尽量减弱鉴权进度中对证据的传输。其进程如下图所示:

图片 4

这一经过的原理非常的粗略,特地发送二个鉴权乞请,只在这么些央求头中带有原始客户名和密码凭据,经服务器验证合法之后,由服务器发给二个对话标志(Session ID),客商端将会话标志存款和储蓄在 Cookie 中,服务器记录会话标记与通过验证的顾客的附和关系;后续客商端应用会话标识、实际不是原本凭据去与服务器交互,服务器读取到会话标志后从本身的对话存款和储蓄中读取已在首先个鉴权需要中验证过的客商地点。为了维护客户的本来面目凭据在传输中的安全,只须要为第二个鉴权央浼创设平安连接协助。

服务端的代码满含第一回鉴权和两次三番检查并授权访问的进程:

IUser _user_; if( validateLogin( nameFromReq, pwdFromReq, out _user _)){ Session["CurrentUser"] = _user_; }

1
2
3
4
5
IUser _user_;  
if( validateLogin( nameFromReq, pwdFromReq, out _user _)){  
  Session["CurrentUser"] = _user_;  
}
 

(第二遍鉴权)

IUser _user_ = Session["CurrentUser"] as IUser; if( _user_ == null ){ Response.Redirect( "/login?return_uri=" Request.Url.ToString() ); return; }

1
2
3
4
5
6
7
IUser _user_ = Session["CurrentUser"] as IUser;  
if( _user_ == null ){  
     Response.Redirect( "/login?return_uri="
     Request.Url.ToString() );  
     return;  
}
 

(后续检查并驳回未识别的客商)

恍如那样的本事简易方便,轻便操作,因此大量被采纳于广大互连网Web应用中。它在顾客端和传导凭据进程中大致从不做特殊管理,所以在那七个环节更是要留心对顾客凭据的保卫安全。不过,随着大家对系统的渴求越发复杂,那样轻巧的达成形式也可以有局地明显的欠缺。举例,如若不加以封装,很轻便出现在服务器应用程序代码中冒出大量对顾客身份的双重检查、错误的重定向等;不过最明显的主题材料可能是对服务器会话存款和储蓄的重视,服务器程序的对话存款和储蓄往往在服务器程序重启之后错失,因而只怕会导致顾客遽然被登出的景观。即便能够引进单独的对话存款和储蓄程序来避免那类难题,但引进一个新的中间件就能追加系统的纷纭。

JavaScript代码

main.js中的JS代码包涵八个方法。

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:应用中的身份验证技术,使用Canvas实时处理Vide

关键词: 千赢国际官网