fool2fish's

挨踢民工日志

JS高级技巧:规范、函数、类、包、事件和错误处理

今天给公司的同事做了一场JS培训,推荐一下给新手。

主要是里面的demo质量不错,由浅及深,前后相互有关联。直观的代码对于概念的理解比较有帮助。

完整的demo请访问:http://fool2fish.aliapp.com/js-senior-skill/index.html

ps:要负责的准备一次培训真是累死人

分类: 前端开发 | 2条评论 »

RFC 6265: HTTP State Management Mechanism

说明:未对原文进行通篇翻译,基础部分可参考 JS 权威指南,本文翻译了关于 cookie 不常用但重要的一些内容,包括浏览器端和服务器端。

原文:http://tools.ietf.org/html/rfc6265

隐私和安全

For historical reasons, cookies contain a number of security and privacy infelicities. For example, a server can indicate that a given cookie is intended for “secure” connections, but the Secure attribute does not provide integrity in the presence of an active network attacker. Similarly, cookies for a given host are shared across all the ports on that host, even though the usual “same-origin policy” used by web browsers isolates content retrieved via different ports.

由于历史原因,cookie 有一些安全和隐私问题。例如服务器可以指定一个 cookie 标记为安全连接的, 但 Secure 属性并不能保证避免网络攻击的发生。同样的,cookie 被同一个主机的所有端口所共享,即使是通过使用了“同源测略”的web浏览器从不同端口获得的独立内容。

Cookies rely upon the Domain Name System (DNS) for security. If the DNS is partially or fully compromised, the cookie protocol might fail to provide the security properties required by applications.

cookie 的安全性是建立在 DNS 上的。如果 DNS部分或者完全遭到破坏(译者注:比如host文件被篡改),那么 cookie 协议将无法为应用提供所需要的安全保护。

服务器和客户端对 cookie 的处理

Origin servers MAY send a Set-Cookie response header with any response. User agents MAY ignore Set-Cookie headers contained in responses with 100-level status codes but MUST process Set-Cookie headers contained in other responses (including responses with 400- and 500-level status codes).

服务器可以在任意返回头中添加 Set-Cookie 头域。当返回状态码是10x的时候,用户代理可以忽略 Set-Cookie 头域,但其他返回情况必须处理(包括返回状态码是 40x 和 50x 的情况)。

When a user agent receives a Set-Cookie header field in an HTTP response, the user agent MAY ignore the Set-Cookie header field in its entirety. For example, the user agent might wish to block responses to “third-party” requests from setting cookies (see Section 7.1).

当从一个 HTTP 响应接收到 Set-Cookie 头域时,用户代理可以忽略其实体中的该头域。例如,用户代理可能会阻止“第三方”请求响应设置的 cookie。

多 cookie 头

An origin server can include multiple Set-Cookie header fields in a single response. The presence of a Cookie or a Set-Cookie header field does not preclude HTTP caches from storing and reusing a response. 

服务器可以在一个响应中包含多个 Set-Cookie 头域。Cookie 或者 Set-Cookie 头域的存在并不妨碍 HTTP 缓存的存储和重用。

Origin servers SHOULD NOT fold multiple Set-Cookie header fields into a single header field. The usual mechanism for folding HTTP headers fields (i.e., as defined in [RFC2616]) might change the semantics of the Set-Cookie header field because the %x2C (“,”) character is used by Set-Cookie in a way that conflicts with such folding.

服务器不应该把多个 Set-Cookie 头域的值合并到一个头域中。常用的 HTTP 头域合并机制可能改变 Set-Cookie 头域的语义,因为英文逗号(译者注:头域合并的分隔符)在合并的 Set-Cookie 中可能会冲突(译者注:cookie 的值本身可能包含英文逗号)。

cookie 编码

To maximize compatibility with user agents, servers that wish to store arbitrary data in a cookie-value SHOULD encode that data, for example, using Base64。

为了最大化用户代理和服务器的兼容性,任何被存储为 cookie 值的数据都应该被编码,例如 Base64(译者注:目前通行用 encodeComponentURI 编码).

HttpOnly Cookie

The HttpOnly attribute limits the scope of the cookie to HTTP requests. In particular, the attribute instructs the user agent to omit the cookie when providing access to cookies via “non-HTTP” APIs (such as a web browser API that exposes cookies to scripts).

Note that the HttpOnly attribute is independent of the Secure attribute: a cookie can have both the HttpOnly and the Secure attribute.

HttpOnly 属性限制了 cookie 对 HTTP 请求的作用范围。特别的,该属性指示用户代理忽略那些通过“非 HTTP” 方式对 cookie 的访问(比如浏览器暴露给js的接口)。

注意 HttpOnly 属性和 Secure 属性相互独立:一个 cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

第三方 Cookie

Particularly worrisome are so-called “third-party” cookies. In rendering an HTML document, a user agent often requests resources from other servers (such as advertising networks). These third-party servers can use cookies to track the user even if the user never visits the server directly. For example, if a user visits a site that contains content from a third party and then later visits another site that contains content from the same third party, the third party can track the user between the two sites.

第三方 cookie 让人感到特别不安。当渲染一个 HTML 文档时, 用户代理经常从其他服务器请求一些资源(比如广告站点)。这些第三方的服务器可以使用 cookie 来追踪用户行为,即便这些用户从未直接访问过该服务。例如,例如用户访问了一个包含第三方资源的站点,然后又访问了一个包含同一个第三方资源的站点,那么这个第三方就可以追踪到用户在这两个站点的行为。

Some user agents restrict how third-party cookies behave. For example, some of these user agents refuse to send the Cookie header in third-party requests. Others refuse to process the Set-Cookie header in responses to third-party requests. User agents vary widely in their third-party cookie policies. This document grants user agents wide latitude to experiment with third-party cookie policies that balance the privacy and compatibility needs of their users. However, this document does not endorse any particular third-party cookie policy.

某些用户代码限制了第三方 cookie 的行为。例如,有些用户代理拒绝在第三方请求中加入 cookie 头。有些则拒绝处理第三方请求返回中的 Set-Cookie 头域。用户代理对于如何处理第三方 cookie 的策略差异炯然。本文档允许用户代理进行多种第三方 cookie 策略尝试以平衡其用户对隐私和兼容性的需求。

Third-party cookie blocking policies are often ineffective at achieving their privacy goals if servers attempt to work around their restrictions to track users. In particular, two collaborating servers can often track users without using cookies at all by injecting identifying information into dynamic URLs.

如果服务器尝试绕过这个约束来追踪用户时,第三方 cookie 阻止策略常常不能满足用户对隐私的需求。特别的,两个合作的服务器不需要使用cookie,而可以通过动态的在URL中注入标记信息来追踪用户。

其他参考

wiki:http://en.wikipedia.org/wiki/HTTP_cookie#cite_note-httponlyrfc-13

中文wiki:http://www.webryan.net/2011/08/wiki-of-http-cookie/

分类: 选择性翻译 | 2条评论 »

2010-D2关键词-嘉宾访谈部分

架构

相关嘉宾:克军、高橙

想想大家经历过的那些改版,每次改版后剩余的前朝代码能有多少?

找出代码中相对稳定的核心部分,并考虑到后续可能的变化

提高代码的可复用度,尽量减少仅仅因为视觉设计的变化带来的大规模重构

渐进增强

相关嘉宾:hedger

产品应该持续低调的改进

这样很容易确定走的每一步是否正确

并让接下来要做的事情在先前正确的基础上进行

那么即便在尝试的过程当中偶尔出现一些失误,也很容易回滚

编译

相关嘉宾:hedger

这部分源于hedger讲述他刚到现在的团队,改造某个很古老的产品的前端部分时,做了一些事情来提高前端代码的可复用度

其中一项就是css编译(不知道有没有听错)

而他下午要分享的主题 google closure complier,则是关于js的压缩和编译的

目前前端使用的主流开发语言都是解释型语言,但似乎前端开发语言的编译时代将成气候

影响产品

相关嘉宾:hedger

程序员对产品的态度,能影响一个产品的质量

没有人比你更加了解你开发的产品,你了解这个产品的每个细节,甚至比pd更有发言权

如果有好的想法的想法,应该促成其变成现实

对于较小的改动,可以直接提交代码;对于较大的改动,可以先提交你的设计文件。

体验歧视策略

相关嘉宾:圆心、克军、高橙、hedger

“歧视”是经济学中的一个术语,大意是对于不用的客户群采取不同的对待方式

在“ie6 must die!”的呼声中,ie67的市场份额确实是在逐步缩小

但遗憾的是它们仍然不会很快消亡

除了呼吁用户下载安装更高级的浏览器

更软性的手段就是让不同浏览器的客户拥有不同的用户体验

原则上来说对于ie67的用户,在保证可用性的基础上可以适当降低一些视觉上的体验

毕竟,对于一个只愿意花5块钱吃顿午餐的人,不会要求你的餐桌要实木雕花的

====================================================

本次访谈嘉宾:hedger、杜欢、高橙、克军、圆心、辣妈

(冬天是在太冷,早上在被窝里赖了半天才起床,赶到会场的时候,访谈已经进行了大概一半。看看自己记的这些关键词,ms对hedger有严重的个人倾向哈哈。)

分类: 前端开发 | 2条评论 »

挨踢民工日志-必须经历

好像冬天就很容易情绪低落,最近不太有激情娱乐大众

那么偶尔扮下深沉,思考一把人生吧哈哈

挨踢民工日志-fool2fish

分类: 挨踢民工日志 | 10条评论 »

给力的药片

药片

两个多月没跟新了,所以这次吐血附送20%,四格漫画变五格漫画,以感谢新老读者一直以来的支持和鼓励,忘了,得先感谢郭嘉,感谢ccav,感谢mtv……

好吧,细心的观众会发现这次风格有变化,有个人物变得更帅了!对!就是我!我就是男一号,男一号就是我~~

日前天气转凉,偶感风寒,对面的大姐送来感冒药一片。但是药片尺寸甚是骇人,且包装上一色洋文,看得我唏嘘不已。好歹哥哥也学了这么多年英文,楞是一个字没看懂!(后来得知原来是德国药) 莫不是洋人生来就骨骼惊奇尺寸伟岸?回想起前些日子一同学分享一颗美国糖果,个头也很惊人,看来药片长成这样还真不该觉得奇怪。但是要咽下去呢?好嗓子都会撑坏的吧~~

分类: 挨踢民工日志 | 8条评论 »