clickjacking guide

files/en-us/web/security/attacks/clickjacking/index.md

@@ -0,0 +1,54 @@
+---
+title: Clickjacking
+slug: Web/Security/Attacks/Clickjacking
+page-type: guide
+---
+
+In a clickjacking attack, an attacker tricks the user into interacting with a target site in a way that they didn't intend.
+
+To do this, the attacker creates a decoy site which embeds the user's target site inside an {{htmlelement("iframe")}} element. The attacker's site hides the `<iframe>`, and aligns some decoy elements so they appear in the same place as elements in the target site that trigger sensitive actions. When the user tries to interact with these decoy elements, they are inadvertently interacting with the target site instead, and may be tricked into performing actions with the target site which they did not intend.
+
+## A clickjacking example
+
+Suppose the website for the user's bank is `https://my-bank.example.com`. The user typically stays logged into this site. For simplicity we'll say that the site has a page with a button which transfers all the user's funds to the attacker — although this is obviously unrealistic, it's plausible that the site would have some interactive elements that perform some sensitive operation.
+
+![Screenshot of a bank's website, showing a "Transfer all my money?" button.](my-bank.png)
+
+The attacker creates a web page which contains:
+
+- a {{htmlelement("button")}} element whose contents encourage the user to click it
+- an {{htmlelement("iframe")}} element embedding the bank's page.
+
+```html
+<button id="fake-button">Click here for a free kitten!</button>
+<iframe width="800" height="200" src="https://my-bank.example.com"></iframe>
+```
+
+In the CSS for the page, the attacker:
+
+- hides the `<iframe>`, for example by setting its {{cssxref("opacity")}} to zero
+- positions the button so it is in the same place as the "Transfer all your money?" button.
+
+```css
+iframe {
+  opacity: 0;
+}
+
+#fake-button {
+  position: absolute;
+  top: 185px;
+  left: 90px;
+}
+```
+
+The result looks like this (we have set the `<iframe>` opacity to `0.1`, so you can see the overlay):
+
+![Screenshot of a clickjacking website, showing the bank's website embedded.](attacker.png)
+
+If the user tries to click "Click here for a free kitten!", they will actually be clicking on the invisible "Transfer all your money?" button in the bank's website. If the user is already signed in, then the request that this makes to the bank's server will include the user's real credentials, and the request will succeed.
+
+## Clickjacking defenses
+
+Clickjacking depends on the target website being embedded in the attacker's decoy site inside an `<iframe>`, and the defense is to disallow this by deploying a [content security policy](/en-US/docs/Web/HTTP/CSP) that [sets the `frame-ancestors` directive](/en-US/docs/Web/HTTP/CSP#clickjacking_protection). This enables you to control the sites that are allowed to embed a page in an `<iframe>` or to deny embedding entirely.
+
+The `frame-ancestors` directive is a replacement for the {{httpheader("X-Frame-Options")}} response header.

files/en-us/web/security/attacks/index.md

@@ -0,0 +1,12 @@
+---
+title: Attacks
+slug: Web/Security/Attacks
+page-type: guide
+---
+
+In web security, an attack is a specific method an attacker uses to achieve their goal. For example, if their goal is to steal a user's data, a cross-site scripting (XSS) attack is one method they might use. A given attack may be countered by one or more mitigations: for example, XSS might be countered by properly sanitizing data and implementing a [content security policy](/en-US/docs/Web/HTTP/CSP).
+
+This page links to pages explaining how some common attacks work, and how they can be mitigated.
+
+- [Clickjacking](/en-US/docs/Web/Security/Attacks/Clickjacking)
+  - : In a clickjacking attack, an attacker creates a decoy site which embeds the target site inside an {{htmlelement("iframe")}} element. It hides the `<iframe>`, and overlays some decoy elements on top of it. When the user interacts with these decoy elements, they are inadvertently interacting with the target site, and may be tricked into performing actions with the target site which they did not intend.