当前位置:千赢国际官网 > 千赢网页手机版登入 > Web开发者需知的15个HTML5画布应用,深入之创建对

Web开发者需知的15个HTML5画布应用,深入之创建对

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

你所不知道的 HSTS

2015/10/24 · HTML5 · HSTS

原文出处: 李靖(@Barret李靖)   

很多人听说过也看到过 301、302,但是几乎从来没有看到过 303 和 307 的状态码。今天在淘宝首页看到了 307 状态码,于是摸索了一把。

JavaScript 深入之创建对象的多种方式以及优缺点

2017/05/28 · JavaScript · 对象

原文出处: 冴羽   

Web开发者需知的15个HTML5画布应用

2011/07/18 · HTML5 · HTML5

下面介绍15个html5画布应用,这些图形方面的应用可以很好的帮助开发者。

1. SketchPad

Sketchpad 是一个优秀的HTML5应用 可以帮助用户用 Javascript 画布工具创建有用的画图应用. Sketchpad’s 画图工具有 笔刷,铅笔,填充,文字 也提供 spirographs, 常用的 shapes 和stamps.

图片 1

2. Canvas Color Cycling

这个应用可以使用一些滤镜效果

图片 2

3. Threshold Filter

可以把图片转化成高对比或黑白图片.

图片 3

4. Reflections
可以用特别的纹理和阴影处理3D应用.

图片 4

5. 3D Planet Viewer

可以查看美国航天局的图片,旋转或放大.

图片 5

6. Music Visualisation with SoundManager2

这可能是第一个HTML5音乐可视化应用

图片 6

7. Water Ripples

使用画布原始创建互动水纹效果

图片 7

8. Strange Attraction

这是一个与众不同的demo,通过修改设置可以产生不同的效果

图片 8

9. CloudKick

可以显示云端服务期的状态,cpu,内存使用状况等等。

图片 9

10. Liquid Particles

这是一个有趣的液体demo,当你鼠标移动时元素会跟着你的鼠标走。

图片 10

11. Canvas Sphere

由小球组成的3d球状体

图片 11

12. jTenorian

当你点亮不同的按钮组合,会创作出不同的有趣的声音.

图片 12

13. Dynamic Image Collage

这是一个有趣的在线的有趣的在线拼图,通过搜索找到图片,点击图片就会在画布上显示,组成有趣的拼图

图片 13

14. iGrapher

iGrapher 是个免费的金融图表工具,可以显示股票等金融市场的走势图.

图片 14

15. Tiler 3D

显示一个3d的图片幻灯片.

图片 15

 

赞 收藏 评论

图片 16

中间人劫持

起因是这样,https 使用的是 443 端口进行数据传输,而浏览器的默认端口是

  1. 劫持者首先劫持用户的 80 端口,当用户向目标页发起请求时,劫持者模拟正常的 https 请求向源服务器获取数据,然后通过 80 端口返回给用户,大概可以看下下面两张图:

图片 17

用户一般不会在地址栏输入   ,而是习惯性输入 taobao.com  ,此时浏览器走的是 http,请求到达服务器之后,服务器告诉浏览器 302 跳转

Location:

1
Location: https://www.taobao.com

然后浏览器重新请求,通过 HTTPS 方式,443 端口通讯。而正因为用户不是直接输入 https:// 链接,劫持者利用这一点:

图片 18

只要能够劫持你的网络,比如路由劫持、DNS劫持,就可以作为中间人注入代码、替换广告。。。(上了 https 也拗不过电信,真是日了够了)

这种劫持出现在两种情况下:

  • 用户没有通过准确的方式访问页面,除非输入 https:// ,否则浏览器默认以 http 方式访问
  • HTTPS 页面的链接中包含 http,这个 http 页面可能被劫持

写在前面

这篇文章讲解创建对象的各种方式,以及优缺点。

但是注意:

这篇文章更像是笔记,因为《JavaScript高级程序设计》写得真是太好了!

启用 HSTS

HSTS,HTTP Strict Transport Security,简单说就是强制客户端使用 HTTPS 访问页面。其原理就是:

  • 在服务器响应头中添加  Strict-Transport-Security ,可以设置  max-age
  • 用户访问时,服务器种下这个头
  • 下次如果使用 http 访问,只要 max-age 未过期,客户端会进行内部跳转,可以看到 307 Redirect Internel 的响应码
  • 变成 https 访问源服务器

这个过程有效避免了中间人对 80 端口的劫持。但是这里存在一个问题:如果用户在劫持状态,并且没有访问过源服务器,那么源服务器是没有办法给客户端种下 Strict-Transport-Security  响应头的(都被中间人挡下来了)。

启用 HSTS 不仅仅可以有效防范中间人攻击,同时也为浏览器节省来一次 302/301 的跳转请求,收益还是很高的。我们的很多页面,难以避免地出现 http 的链接,比如 help 中的链接、运营填写的链接等,这些链接的请求都会经历一次 302,对于用户也是一样,收藏夹中的链接保存的可能也是 http 的。

1. 工厂模式

function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson('kevin');

1
2
3
4
5
6
7
8
9
10
11
function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
 
    return o;
}
 
var person1 = createPerson('kevin');

缺点:对象无法识别,因为所有的实例都指向一个原型

307 状态码

在 GET、HEAD 这些幂等的请求方式上,302、303、307 没啥区别,而对于 POST 就不同了,大部分浏览器 都会302 会将 POST 请求转为 GET,而 303 是规范强制规定将 POST 转为 GET 请求,请求地址为 header 头中的 Location,307 则不一样,规范要求浏览器继续向 Location 的地址 POST 内容。

而在 HSTS 中,307 可以被缓存,缓存时间根据 max-age 而定,一般建议缓存 1 年甚至更长。

2. 构造函数模式

function Person(name) { this.name = name; this.getName = function () { console.log(this.name); }; } var person1 = new Person('kevin');

1
2
3
4
5
6
7
8
function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}
 
var person1 = new Person('kevin');

优点:实例可以识别为一个特定的类型

缺点:每次创建实例时,每个方法都要被创建一次

HSTS 存在的坑

  • 纯 IP 的请求,HSTS 没法处理,比如 http://2.2.2.2 , 即便响应头中设置了 STS,浏览器也不会理会(未测试)
  • HSTS 只能在 80 和 443 端口之间切换,如果服务是 8080 端口,即便设置了 STS,也无效(未测试)
  • 如果浏览器证书错误,一般情况会提醒存在安全风险,然是依然给一个链接进入目标页,而 HSTS 则没有目标页入口,所以一旦证书配置错误,就是很大的故障了
  • 如果服务器的 HTTPS 没有配置好就开启了 STS 的响应头,并且还设置了很长的过期时间,那么在你服务器 HTTPS 配置好之前,用户都是没办法连接到你的服务器的,除非 max-age 过期了。
  • HSTS 能让你的网站在 ssllab 上到 A (这不是坑)

2.1 构造函数模式优化

function Person(name) { this.name = name; this.getName = getName; } function getName() { console.log(this.name); } var person1 = new Person('kevin');

1
2
3
4
5
6
7
8
9
10
function Person(name) {
    this.name = name;
    this.getName = getName;
}
 
function getName() {
    console.log(this.name);
}
 
var person1 = new Person('kevin');

优点:解决了每个方法都要被重新创建的问题

缺点:这叫啥封装……

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:Web开发者需知的15个HTML5画布应用,深入之创建对

关键词: 千赢国际官网 千亿国际qy8