From 735dfc6cecb5c9d63d489b0d99385574e2a9a35e Mon Sep 17 00:00:00 2001 From: LeviDing Date: Tue, 7 Apr 2020 20:54:32 +0800 Subject: [PATCH 01/18] Update article.md --- .../06-clickjacking/article.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index d49b8db845..e138047ecf 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -1,23 +1,23 @@ # 点击劫持攻击 -“点击劫持” 攻击即允许恶意网页**以用户的名义**点击 “受害站点”。 +“点击劫持”攻击允许恶意页面 **以用户的名义** 点击“受害网站”。 -许多站点都被这样攻击过，包括 Twitter、Facebook 和 Paypal 等等许多网站。当然，目前它们都已修复这个问题。 +许多网站都被黑客以这种方式攻击过，包括 Twitter、Facebook 和 Paypal 等许多网站。当然，它们都已经被修复了。 ## 原理 原理十分简单。 -以下以 Facebook 为例解释点击劫持是如何运作的： +我们以 Facebook 为例，解释点击劫持是如何完成的： -1. 访问者被恶意网页吸引。此处略过如何被吸引的。 -2. 页面上存在一个看起来无害的链接（比如：“马上有钱” 或者 “点我，超好玩！”）。 -3. 恶意网页在该链接之上放置一个透明 ` - + -
...And you're cool (I'm a cool hacker actually)!
+
……你很酷（我实际上是一名帅气的黑客）！
From d6ddbcc2c02f277ab3dbb4926a7452389721acd4 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Tue, 7 Apr 2020 21:54:53 +0800 Subject: [PATCH 03/18] Update index.html --- .../06-clickjacking/clickjacking.view/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html b/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html index 05ec48cb89..94281fe70a 100644 --- a/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html +++ b/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html @@ -19,14 +19,14 @@ } -
Click to get rich now:
+
点击即可变得富有：
- + - + -
...And you're cool (I'm a cool hacker actually)!
+
……你很酷（我实际上是一名帅气的黑客）！
From 70d2e95f8a2a9195ceb4ad41971aea3a7144ca1a Mon Sep 17 00:00:00 2001 From: LeviDing Date: Tue, 7 Apr 2020 22:08:00 +0800 Subject: [PATCH 04/18] Update article.md --- .../06-clickjacking/article.md | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index e138047ecf..521a92b57c 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -10,14 +10,14 @@ 我们以 Facebook 为例，解释点击劫持是如何完成的： -1. 访问者被恶意页面吸引。无论怎样吸引的都不影响。 -2. 页面上有一个看起来无害的链接（例如：“马上有钱”或者“点我，超好玩！”）。 -3. 恶意网页在该链接上放置了一个透明的 ` - + */!* -
……你好酷（我实际上是一名帅气的黑客）！
+
……你很酷（我实际上是一名帅气的黑客）！
``` 完整的攻击示例如下： [codetabs src="clickjacking-visible" height=160] -例子中的半透明 ` ``` -当然还有其他绕过这个弱鸡防御的方法。 +还有其他方式可以绕过这个弱鸡防御。 ## X-Frame-Options -服务端 header 字段 `X-Frame-Options` 能够允许或禁止 frame 内页面的显示。 +服务器端 header `X-Frame-Options` 可以允许或禁止在 frame 中显示页面。 -这个 header 必须由 **服务端** 发送：若浏览器发现 `` 标签里有该字段，则会忽略此字段。即，`` 不生效。 +它必须被完全作为 HTTP-header 发送：如果浏览器在 HTML `` 标签中找到它，则会忽略它。因此，`` 没有任何作用。 -该 header 有三个值： +这个 header 可能包含 3 个值： `DENY` -: 始终禁止 frame 中的页面加载。 +: 始终禁止在 frame 中显示此页面。 `SAMEORIGIN` -: 允许和父页面同一来源的 frame 进行页面加载。 +: 允许在和父文档同源的 frame 中显示此页面。 `ALLOW-FROM domain` -: 允许和父页面同一给定域的 frame 进行页面加载。 +: 允许在来自给定源的父文档的 frame 中显示此页面。 例如，Twitter 使用的是 `X-Frame-Options: SAMEORIGIN`。 ````online -如下所示： +结果如下： ```html ``` + -取决于浏览器行为，以上 `iframe` 要么显示为空，要么提醒你浏览器不允许内部页面加载。 +上面这个 `iframe` 可能为空，或者通过 alert 告知你浏览器不允许以这种方式导航至该页面，这取决于你的浏览器。 ```` -## 显示不可用功能 +## 显示禁用的功能 `X-Frame-Options` 存在副作用。它无差别地禁止合法网站在 frame 中显示我们的页面。 @@ -188,6 +189,24 @@ window.onbeforeunload = function() { [codetabs src="protector"] +## Samesite cookie attribute + +The `samesite` cookie attribute can also prevent clickjacking attacks. + +A cookie with such attribute is only sent to a website if it's opened directly, not via a frame, or otherwise. More information in the chapter . + +If the site, such as Facebook, had `samesite` attribute on its authentication cookie, like this: + +``` +Set-Cookie: authorization=secret; samesite +``` + +...Then such cookie wouldn't be sent when Facebook is open in iframe from another site. So the attack would fail. + +The `samesite` cookie attribute will not have an effect when cookies are not used. This may allow other websites to easily show our public, unauthenticated pages in iframes. + +However, this may also allow clickjacking attacks to work in a few limited cases. An anonymous polling website that prevents duplicate voting by checking IP addresses, for example, would still be vulnerable to clickjacking because it does not authenticate users using cookies. + ## 总结 点击劫持是一种 “欺骗” 用户在不知情下点击恶意网站的方式。如果是重要的点击操作，这是非常危险的。 From b3a9f2c51867c8bcd69e8b4b6a802c0f2e214a5b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 10:31:08 +0800 Subject: [PATCH 08/18] Update article.md --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 1aaf328ff1..e8948341be 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -160,7 +160,7 @@ say.*!*bye*/!*('John'); // Bye, John! 大部分情况下，开发者倾向于使用第二种方式，以便每个“东西”都存在于它自己的模块中。 -当然，这需要大量文件，因为每个东西都需要自己的模块，但这根本不是问题。实际上，如果文件具有良好的命名，并且文件夹结构得当，那么代码导航会变得更容易。 +当然，这需要大量文件，因为每个东西都需要自己的模块，但这根本不是问题。实际上，如果文件具有良好的命名，并且文件夹结构得当，那么代码导航（navigation）会变得更容易。 模块提供了特殊的默认导出 `export default` 语法，以使“一个模块只做一件事”的方式看起来更好。 From 12f3b2af981d63d0cd2ae6568f8d045ae25ae741 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 10:33:08 +0800 Subject: [PATCH 09/18] Update article.md --- 1-js/03-code-quality/01-debugging-chrome/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index cdebdf023d..a043dd1732 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -26,7 +26,7 @@ 资源（Sources）面板包含三个部分： -1. **文件浏览（File Navigator）** 区域列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。 +1. **文件导航（File Navigator）** 区域列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。 2. **代码编辑（Code Editor）** 区域展示源码。 3. **JavaScript 调试（JavaScript Debugging）** 区域是用于调试的，我们很快就会来探索它。 From af54d12be2366c9554ad0f86b19f7e3c3136b4c0 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 10:39:04 +0800 Subject: [PATCH 10/18] Update article.md --- 1-js/01-getting-started/3-code-editors/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index 4ff15a45bf..812c2a559b 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -8,7 +8,7 @@ [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment)（集成开发环境）是用于管理整个项目具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的开发环境。 -IDE 加载项目（通常包含很多文件），并且允许在不同文件之间切换。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如 [git](https://git-scm.com/)）、集成测试环境等一些其他“项目层面”的东西。 +IDE 加载项目（通常包含很多文件），并且允许在不同文件之间导航（navigation）。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如 [git](https://git-scm.com/)）、集成测试环境等一些其他“项目层面”的东西。 如果你还没考虑好选哪一款 IDE，可以考虑下面两个： From 58a27e60f5dcf530fb04d1e9ce3da2c8e02c2c94 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 11:06:21 +0800 Subject: [PATCH 11/18] Update iframe.html --- .../06-clickjacking/protector.view/iframe.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/protector.view/iframe.html b/3-frames-and-windows/06-clickjacking/protector.view/iframe.html index a1ca6fcc9c..462888aacb 100644 --- a/3-frames-and-windows/06-clickjacking/protector.view/iframe.html +++ b/3-frames-and-windows/06-clickjacking/protector.view/iframe.html @@ -20,7 +20,7 @@ - This text is always visible. + 文本一直是可见的。 - But if the page was open inside a document from another domain, the div over it would prevent any actions. + 但是，如果该页面是在来自另一个域的文档中打开的，则该页面上的 div 将阻止所有行为。 - + From e88bd111ce6878fcc1cf643b861a18f761d1746b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 11:09:57 +0800 Subject: [PATCH 12/18] Update index.html --- .../06-clickjacking/top-location.view/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/top-location.view/index.html b/3-frames-and-windows/06-clickjacking/top-location.view/index.html index d578a8b10b..39b0dbbfc8 100644 --- a/3-frames-and-windows/06-clickjacking/top-location.view/index.html +++ b/3-frames-and-windows/06-clickjacking/top-location.view/index.html @@ -31,11 +31,11 @@ -

After a click on the button the visitor gets a "strange" question about whether they want to leave.

+

点击该按钮后，访问者会收到一条关于他们是否要离开的“奇怪”问题。

-

Probably they would respond "No", and the iframe protection is hacked.

+

他们可能会回答“否”，这样就保护了 iframe 不被黑。

- + From 8fe1b0160e69d212b4e977b68c631ded5cefd9bc Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 11:12:35 +0800 Subject: [PATCH 13/18] Update article.md --- 3-frames-and-windows/06-clickjacking/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index 85d9cb100a..33b900e2a2 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -154,11 +154,11 @@ window.onbeforeunload = function() { ## 显示禁用的功能 -`X-Frame-Options` 存在副作用。它无差别地禁止合法网站在 frame 中显示我们的页面。 +`X-Frame-Options` 有一个副作用。其他的网站即使有充分的理由也无法在 frame 中显示我们的页面。 -所以还有其他措施...例如，把设置了 `height: 100%; width: 100%;` 的 `
` “覆盖” 在页面上，这样就能监听所有的点击事件。在 `window == top` 或无需防御的情况下，此 `
` 则应该隐藏起来。 +因此，还有其他解决方案……例如，我们可以用一个样式为 `height: 100%; width: 100%;` 的 `
` “覆盖”页面，这样它就能拦截所有点击。如果 `window == top` 或者我们确定不需要保护时，再将该 `
` 移除。 -代码示例如下： +像这样： ```html ``` -演示如下： +演示示例： [codetabs src="protector"] From 5e8a0e8bd748a7d8c0a47f3aa0a8bc03ef2ec2eb Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 11:15:09 +0800 Subject: [PATCH 14/18] Update article.md --- 3-frames-and-windows/06-clickjacking/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index 33b900e2a2..a50f52f2cd 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -135,7 +135,7 @@ window.onbeforeunload = function() { : 允许在和父文档同源的 frame 中显示此页面。 `ALLOW-FROM domain` -: 允许在来自给定源的父文档的 frame 中显示此页面。 +: 允许在来自给定域的父文档的 frame 中显示此页面。 例如，Twitter 使用的是 `X-Frame-Options: SAMEORIGIN`。 From d8fdf1e6203b3b52099969928717f981bbf0f0a5 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 11:51:01 +0800 Subject: [PATCH 15/18] improve translation --- 1-js/05-data-types/06-iterable/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index dcc98b8f8b..6501891cfa 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -3,9 +3,9 @@ **Iterable**（可迭代对象）是数组的泛化。这个概念是说任何对象都可以被定制为可在 `for..of` 循环中使用的对象。 -数组本身就是可迭代的。但不仅仅是数组。很多其他内建对象也都可以迭代，例如字符串也是可以迭代的。 +数组是可迭代的。但不仅仅是数组。很多其他内建对象也都是可迭代的。例如字符串也是可迭代的。 -如果从技术上讲，对象不是数组，而是表示某物的集合（列表，集合），`for..of` 是一个能够遍历它的很好的语法，因此，让我们看看如何使其工作。 +如果从技术上讲，对象不是数组，而是表示某物的集合（列表，集合），`for..of` 是一个能够遍历它的很好的语法，因此，让我们来看看如何使其发挥作用。 ## Symbol.iterator From b87600802bb71d7f7484a2469a442eccc9987714 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 11:53:48 +0800 Subject: [PATCH 16/18] Update article.md --- 1-js/05-data-types/06-iterable/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index 6501891cfa..f0a6910452 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,7 +1,7 @@ -# Iterable（可迭代对象） +# 可迭代对象 -**Iterable**（可迭代对象）是数组的泛化。这个概念是说任何对象都可以被定制为可在 `for..of` 循环中使用的对象。 +**可迭代（Iterable）** 对象是数组的泛化。这个概念是说任何对象都可以被定制为可在 `for..of` 循环中使用的对象。 数组是可迭代的。但不仅仅是数组。很多其他内建对象也都是可迭代的。例如字符串也是可迭代的。 From 59e0c70f7d5c3fa0e3575ac94586a75ac68ea515 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 12:21:45 +0800 Subject: [PATCH 17/18] Update article.md --- 1-js/05-data-types/06-iterable/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index f0a6910452..4b6810172f 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,5 +1,5 @@ -# 可迭代对象 +# Iterable object（可迭代对象） **可迭代（Iterable）** 对象是数组的泛化。这个概念是说任何对象都可以被定制为可在 `for..of` 循环中使用的对象。 From e05c723e63c9ae7bb6765e66f6afba426cd7dd8f Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 8 Apr 2020 13:02:02 +0800 Subject: [PATCH 18/18] Update article.md --- .../06-clickjacking/article.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index a50f52f2cd..57c45bcb42 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -189,33 +189,33 @@ window.onbeforeunload = function() { [codetabs src="protector"] -## Samesite cookie attribute +## Samesite cookie 特性 -The `samesite` cookie attribute can also prevent clickjacking attacks. +`samesite` cookie 特性也可以阻止点击劫持攻击。 -A cookie with such attribute is only sent to a website if it's opened directly, not via a frame, or otherwise. More information in the chapter . +具有 `samesite` 特性的 cookie 仅在网站是通过直接方式打开（而不是通过 frame 或其他方式）的情况下才发送到网站。更多细节请见 。 -If the site, such as Facebook, had `samesite` attribute on its authentication cookie, like this: +如果网站，例如 Facebook，在其身份验证 cookie 中具有 `samesite` 特性，像这样： ``` Set-Cookie: authorization=secret; samesite ``` -...Then such cookie wouldn't be sent when Facebook is open in iframe from another site. So the attack would fail. +……那么，当在另一个网站中的 iframe 中打开 Facebook 时，此类 cookie 将不会被发送。因此，攻击将失败。 -The `samesite` cookie attribute will not have an effect when cookies are not used. This may allow other websites to easily show our public, unauthenticated pages in iframes. +当不实用 cookie 时，`samesite` cookie 特性将不会有任何影响。这可以使其他网站能够轻松地在 iframe 中显示我们公开的、未进行身份认证的页面。 -However, this may also allow clickjacking attacks to work in a few limited cases. An anonymous polling website that prevents duplicate voting by checking IP addresses, for example, would still be vulnerable to clickjacking because it does not authenticate users using cookies. +然而，这也可能会使得劫持攻击在少数情况下起作用。例如，通过检查 IP 地址来防止重复投票的匿名投票网站仍然会受到点击劫持的攻击，因为它不使用 cookie 对用户身份进行验证。 ## 总结 -点击劫持是一种 “欺骗” 用户在不知情下点击恶意网站的方式。如果是重要的点击操作，这是非常危险的。 +点击劫持是一种“诱骗”用户在不知情的情况下点击恶意网站的方式。如果是重要的点击操作，这是非常危险的。 -黑客可以通过信息提交一个链接到他的恶意页面，或者通过某些手段引诱访问者访问他的页面。当然还有许多其他变体。 +黑客可以通过信息发布指向他的恶意页面的链接，或者通过某些手段引诱访问者访问他的页面。当然还有很多其他变体。 -一方面 —— 这种攻击方式是“浅层”的：黑客只需要拦截一次点击。但另一方面，如果被这次点击之后会开启另一个控制开关，那么黑客同样用狡猾的提示强制用户点击这些控制按钮。 +一方面 —— 这种攻击方式是“浅层”的：黑客所做的只是拦截一次点击。但另一方面，如果黑客知道在点击之后将出现另一个控件，则他们可能还会使用狡猾的消息来迫使用户也点击它们。 -这种攻击相当危险，因为在设计交互界面时，通常不会考虑到可能会有黑客代替真正的访问者点击界面。所以许多意想不到的地方可能发现攻击漏洞。 +这种攻击相当危险，因为在设计交互界面时，我们通常不会考虑到可能会有黑客代表用户点击界面。所以，在许多意想不到的地方可能发现攻击漏洞。 -- 推荐在页面上（或整个网站）使用 `X-Frame-Options: SAMEORIGIN`，这不会被 frame 内部读取。 -- 若要允许的页面在 frame 中显示，用一个 `
` 遮盖，这样仍然是安全的。 +- 建议在那些不希望被在 frame 中查看的页面上（或整个网站上）使用 `X-Frame-Options: SAMEORIGIN`。 +- 如果我们希望允许在 frame 中显示我们的页面，那我们使用一个 `
` 对整个页面进行遮盖，这样也是安全的。