Skip to content

Commit

Permalink
[zh-cn] sync translated content (#25146)
Browse files Browse the repository at this point in the history
* zh-cn: sync translated content

* clickjacking guide

ref: mdn/content#37166

---------

Co-authored-by: Allo <[email protected]>
  • Loading branch information
mdn-bot and yin1999 authored Dec 18, 2024
1 parent 905267a commit 1439f79
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 102 deletions.
1 change: 1 addition & 0 deletions files/zh-cn/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -517,6 +517,7 @@
/zh-CN/docs/Glossary/404 /zh-CN/docs/Web/HTTP/Status/404
/zh-CN/docs/Glossary/502 /zh-CN/docs/Web/HTTP/Status/502
/zh-CN/docs/Glossary/Bézier_curve /zh-CN/docs/Glossary/Bezier_curve
/zh-CN/docs/Glossary/Clickjacking /zh-CN/docs/Web/Security/Attacks/Clickjacking
/zh-CN/docs/Glossary/DOS_attack /zh-CN/docs/Glossary/Denial_of_Service
/zh-CN/docs/Glossary/Descriptor_(CSS) /zh-CN/docs/Glossary/CSS_Descriptor
/zh-CN/docs/Glossary/Empty_element /zh-CN/docs/Glossary/Void_element
Expand Down
18 changes: 0 additions & 18 deletions files/zh-cn/glossary/clickjacking/index.md

This file was deleted.

8 changes: 4 additions & 4 deletions files/zh-cn/glossary/csp/index.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: 内容安全策略
title: CSP
slug: Glossary/CSP
l10n:
sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
sourceCommit: 9c09d1ce824bd5e6ef879094428879c476ccbace
---

{{GlossarySidebar}}

[**内容安全策略**](/zh-CN/docs/Web/HTTP/CSP)(CSP)用于检测和减轻用于 Web 站点的特定类型的攻击,例如{{Glossary("Cross-site_scripting", "跨站脚本攻击")}}、[点击劫持](/zh-CN/docs/Glossary/Clickjacking)和数据注入。
**CSP**[内容安全策略](/zh-CN/docs/Web/HTTP/CSP))用于检测和减轻用于 Web 站点的特定类型的攻击,例如{{Glossary("Cross-site_scripting", "跨站脚本攻击")}}、[点击劫持](/zh-CN/docs/Web/Security/Attacks/Clickjacking)和数据注入。

该安全策略的实现基于一个称作 {{HTTPHeader("Content-Security-Policy")}} 的 HTTP 标头。
该安全策略的实现基于一个称作 {{HTTPHeader("Content-Security-Policy")}} 的 {{Glossary("HTTP")}} 标头。

## 参见

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: 从 object 到 iframe——其他嵌入技术
slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
l10n:
sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3
sourceCommit: be3f184d89979d413204b8f9cbecfc8dd0e5ecf9
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
Expand Down Expand Up @@ -68,10 +68,6 @@ l10n:
如果你犯了某些错误,你可以点击*重置*按钮以重置编辑器。如果你实在无法解决,可以按下*显示答案*按钮以借鉴答案。

```html hidden
<p>
可以试着引入 B 站(哔哩哔哩视频网站)的“改革春风吹满地”视频吗?(其 BV 号为
BV1bW411n7fY)
</p>
<h2>实时输出</h2>

<div class="output" style="min-height: 250px;"></div>
Expand Down Expand Up @@ -151,12 +147,12 @@ window.addEventListener("load", updateCode);
// 转而使其在当前光标位置插入一个制表符

textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}

if (e.keyCode === 27) {
if (e.code === "Escape") {
textarea.blur();
}
};
Expand Down Expand Up @@ -194,7 +190,7 @@ textarea.onkeyup = function () {

{{ EmbedLiveSample('动手练习:典型嵌入的使用', 700, 600) }}

## Iframe 详解
## iframe 详解

是不是很简单又有趣呢?你可以通过 {{htmlelement("iframe")}} 元素将其他 Web 文档嵌入到当前文档中。这很适合将第三方内容嵌入你的网站,这些内容你可能无法直接控制,也不想实现自己的版本——例如来自在线视频提供商的视频、[Disqus](https://disqus.com/) 等评论系统、在线地图提供商、广告横幅等。甚至本课程使用的实时可编辑示例就是使用 `<iframe>` 实现的。

Expand Down Expand Up @@ -254,9 +250,9 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X

浏览器制造商和 Web 开发人员已经深刻认识到,如果 Web 上的恶意人士(通常称为**黑客**,或者更准确地说,**破解者**)试图发起攻击,或者欺骗人们做一些他们不想做的事情,比如泄露敏感信息(如用户名和密码),那么 iframe 是常见目标(正式术语:**攻击向量**)。因此,规范工程师和浏览器开发人员已经开发了各种安全机制,以使 `<iframe>` 更安全,并且还有一些最佳实践需要考虑——我们将在下面介绍其中一些。

> **备注:** [点击劫持](/zh-CN/docs/Glossary/Clickjacking)是一种常见的 iframe 攻击,黑客将一个不可见的 iframe 嵌入到你的文档中(或将你的文档嵌入到他们自己的恶意网站),并使用它来获取用户的交互。这是一种常见的误导用户或窃取敏感数据的方式。
> **备注:** [点击劫持](/zh-CN/docs/Web/Security/Attacks/Clickjacking)是一种常见的 iframe 攻击,黑客将一个不可见的 iframe 嵌入到你的文档中(或将你的文档嵌入到他们自己的恶意网站),并使用它来获取用户的交互。这是一种常见的误导用户或窃取敏感数据的方式。
一个简单的例子——尝试在浏览器中加载上面的例子——你也可以 [在 Github 上找到它](https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html)([参见源代码](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html))。与你期望的页面不同,你可能会看到某种类型的消息,内容类似于“无法打开此页面”,如果你查看[浏览器开发工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)中的*控制台*,你将看到一条信息消息告知你原因。在 Firefox 中,消息类似于*由于“X-Frame-Options”指令设置为“DENY”,因此无法在 iframe 中加载“https\://developer.mozilla.org/zh-CN/docs/Glossary”*。这是因为构建 MDN 的开发人员在服务器上设置了一个选项,禁止将网站页面嵌入到 `<iframe>` 中(参见下面的[配置 CSP 指令](#配置_scp_指令))。这是有原因的——整个 MDN 页面在其他页面中嵌入并不合适,除非你希望将它们嵌入到你的网站上并将它们声明为你自己的页面——或者通过[点击劫持](/zh-CN/docs/Glossary/Clickjacking)来尝试窃取数据,这两者都是非常糟糕的行为。而且,如果每个人这样做,额外的带宽成本将给 Mozilla 带来很大压力。
一个简单的例子——尝试在浏览器中加载上面的例子——你也可以 [在 Github 上找到它](https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html)([参见源代码](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html))。与你期望的页面不同,你可能会看到某种类型的消息,内容类似于“无法打开此页面”,如果你查看[浏览器开发工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)中的*控制台*,你将看到一条信息消息告知你原因。在 Firefox 中,消息类似于*由于“X-Frame-Options”指令设置为“DENY”,因此无法在 iframe 中加载“https\://developer.mozilla.org/zh-CN/docs/Glossary”*。这是因为构建 MDN 的开发人员在服务器上设置了一个选项,禁止将网站页面嵌入到 `<iframe>` 中(参见下面的[配置 CSP 指令](#配置_scp_指令))。这是有原因的——整个 MDN 页面在其他页面中嵌入并不合适,除非你希望将它们嵌入到你的网站上并将它们声明为你自己的页面——或者通过点击劫持来尝试窃取数据,这两者都是非常糟糕的行为。而且,如果每个人这样做,额外的带宽成本将给 Mozilla 带来很大压力。

#### 只有在必要时嵌入

Expand Down Expand Up @@ -290,7 +286,7 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
#### 配置 CSP 指令

{{Glossary("CSP")}} 全称是[**内容安全策略**](/zh-CN/docs/Web/HTTP/CSP),它提供了[一组 HTTP 标头](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)(访问 web 服务器时与网页一起发送的元数据),旨在提高 HTML 文档的安全性。在 `<iframe>` 的安全性方面,你可以[_配置服务器发送适当的 `X-Frame-Options` 标头_](/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)。这样可以防止其他网站在其网页中嵌入你的内容(这将导致[点击劫持](https://zh.wikipedia.org/wiki/点击劫持)和一系列其他攻击),正如我们之前看到的那样,MDN 的开发人员已经做了这些工作。
{{Glossary("CSP")}} 全称是[**内容安全策略**](/zh-CN/docs/Web/HTTP/CSP),它提供了[一组 HTTP 标头](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)(访问 web 服务器时与网页一起发送的元数据),旨在提高 HTML 文档的安全性。在 `<iframe>` 的安全性方面,你可以[_配置服务器发送适当的 `X-Frame-Options` 标头_](/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)。这样可以防止其他网站在其网页中嵌入你的内容(这将导致[点击劫持](/zh-CN/docs/Web/Security/Attacks/Clickjacking)和一系列其他攻击),正如我们之前看到的那样,MDN 的开发人员已经做了这些工作。

> [!NOTE]
> 你可以阅读 Frederik Braun 的帖子[论 X-Frame-Options 安全性标头](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/)来获取有关此主题的更多背景信息。显然,其已经超出了本文所解释内容的范围。
Expand Down Expand Up @@ -337,18 +333,11 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
<a href="/zh-CN/docs/Web/HTML/Element/object#height"><code>height</code></a><br /><a href="/zh-CN/docs/Web/HTML/Element/object#width"><code>width</code></a>
</td>
</tr>
<tr>
<td>名称和值,作为参数提供给插件</td>
<td>具有这些名称和值的 ad hoc 属性</td>
<td>
单标签 {{htmlelement("param")}} 元素,包含在 <code>&#x3C;object></code> 元素里面
</td>
</tr>
<tr>
<td>用作后备资源的独立的 HTML 内容,以防资源不可用</td>
<td>不受支持(<code>&#x3C;noembed></code> 已过时)</td>
<td>
包含在 <code>&#x3C;object></code> 中,在 <code>&#x3C;param></code> 元素之后
包含在 <code>&#x3C;object></code> 的开和闭标签之间
</td>
</tr>
</tbody>
Expand All @@ -357,10 +346,10 @@ Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X
让我们来看一个将 PDF 文件嵌入网页的 `<object>` 示例(查看[实时示例](https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)):

```html
<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
<object data="my-pdf.pdf" type="application/pdf" width="800" height="1200">
<p>
You don't have a PDF plugin, but you can
<a href="mypdf.pdf">download the PDF file. </a>
<a href="my-pdf.pdf">download the PDF file. </a>
</p>
</object>
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,21 +67,21 @@ Content-Security-Policy: frame-ancestors <space separated list of sources>;
- `'none'`
- : 指向一个空集,意味着没有 URL 会被匹配。也需要单引号包裹设置。

## Examples
## 示例

```bash
```http
Content-Security-Policy: frame-ancestors 'none';
```

## Specifications
## 规范

{{Specifications}}

## Browser compatibility
## 浏览器兼容性

{{Compat}}

## See also
## 参见

- {{HTTPHeader("Content-Security-Policy")}}
- {{HTTPHeader("X-Frame-Options")}}
72 changes: 72 additions & 0 deletions files/zh-cn/web/security/attacks/clickjacking/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
title: 点击劫持
slug: Web/Security/Attacks/Clickjacking
l10n:
sourceCommit: be3f184d89979d413204b8f9cbecfc8dd0e5ecf9
---

**点击劫持**攻击中,攻击者诱骗用户以非预期的方式与目标网站进行交互。

为了做到这一点,攻击者会创建一个将用户的目标网站嵌入到 {{htmlelement("iframe")}} 元素中的诱饵网站。攻击者的站点会隐藏 `<iframe>`,并对齐一些诱饵元素,使它们与目标网站中触发敏感操作的元素出现在同一个位置。当用户尝试与这些诱饵元素进行交互时,他们会无意中与目标网站交互,并可能被引诱对目标网站执行他们不想要执行的操作。

## 点击劫持示例

假设用户银行的网站是 `https://my-bank.example.com`。用户通常会保持登陆状态。为简单起见,我们假设该网站的一个网页带有可以将用户的所有资金转给攻击者的按钮——虽然这显然是不现实的,但该网站可能会有一些执行敏感操作的交互元素。

![银行网站的截图,显示了一个“Transfer all my money?”按钮。](my-bank.png)

攻击者创建了一个网页,其中包含:

- 一个 {{htmlelement("button")}} 元素,其内容鼓励用户点击它
- 一个 {{htmlelement("iframe")}} 元素,嵌入了银行的页面。

```html
<button id="fake-button">Click here for a free kitten!</button>
<iframe width="800" height="200" src="https://my-bank.example.com"></iframe>
```

在页面的 CSS 中,攻击者:

- 隐藏了 `<iframe>`,例如,通过将其 {{cssxref("opacity")}} 设置为零
- 将按钮放置在与“Transfer all your money?”按钮相同的位置

```css
iframe {
opacity: 0;
}

#fake-button {
position: absolute;
top: 185px;
left: 90px;
}
```

结果看起来像这样(我们将 `<iframe>` 的透明度设置为 0.1,因此你可以看到覆盖层):

![点击劫持网站的截图,显示了嵌入的银行网站。](attacker.png)

如果用户尝试点击“Click here for a free kitten!”,他们实际上会点击银行网站上不可见的“Transfer all your money?”按钮。如果用户已经登陆,此操作向银行服务器发出的请求会包含用户的真实凭据,并且请求将会成功。

## 点击劫持防御

点击劫持依赖于将目标网站嵌入到攻击者的诱饵网站的 `<iframe>` 中。主要的防护措施是禁止或(至少)控制此功能。

有两种相关的工具:

- [内容安全策略](/zh-CN/docs/Web/HTTP/CSP)中的 [`frame-ancestors` 指令](/zh-CN/docs/Web/HTTP/CSP#clickjacking_protection)
- {{httpheader("X-Frame-Options")}} 响应标头。

`frame-ancestors` 指令是 `X-Frame-Options` 的代替。通过设置 `X-Frame-Options``frame-ancestors`,你可以阻止在不支持 `frame-ancestors` 的浏览器中的嵌入。由于[浏览器对 `frame-ancestors` 的支持非常好](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors#浏览器兼容性),因此这不是主要的问题。

如果同时设置了 `frame-ancestors``X-Frame-Options`,则支持 `frame-ancestors` 的浏览器会忽略 `X-Frame-Options`

作为一部分额外的缓解措施,站点应该将会话 cookie 的 [`SameSite`](/zh-CN/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) cookie 属性设置为 `Lax``Strict`。来自与顶级文档不在{{glossary("Site", "同一站点")}}的嵌入上下文(例如 `<iframe>` 元素)的请求将不包含这些 cookie,因此服务器不会将该请求视为来自已登陆的用户。

## 参见

- [owasp.org](https://owasp.org/) 上的[点击劫持防御备忘录](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html)

<section id="Quick_links">
{{ListSubpages("/zh-CN/docs/Web/Security", "1", "0", "1")}}
</section>
Loading

0 comments on commit 1439f79

Please sign in to comment.