Mechanisms

发布于 2024-10-11 20:33:57 字数 11608 浏览 0 评论 0 收藏 0

Clickjacking relies on an HTML feature called an iframe . HTML iframes allow developers to embed one web page within another by placing an <iframe> tag on the page, and then specifying the URL to frame in the tag’s src attribute. For example, save the following page as an HTML file and open it with a browser:

点击劫持依赖于一种叫做 iframe 的 HTML 功能。HTML iframes 允许开发人员通过在网页上放置一个<iframe>标签，然后在标签的 src 属性中指定要嵌入的网页的 URL 来将一个网页嵌入另一个网页中。例如，将以下页保存为 HTML 文件，并用浏览器打开：

<html>
  <h3>This is my web page.</h3>
  <iframe src="https://www.example.com" width="500" height="500"></iframe>
  <p>If this window is not blank, the iframe source URL can be framed!</p>
</html>

You should see a web page that looks like Figure 8-1 . Notice that a box places www.example.com in one area of the larger page.

你应该会看到一个类似图 8-1 的网页。请注意，一个方框会把 www.example.com 放在更大页面的某个区域。

f08001 — Figure 8-1 : If the iframe is not blank, the page specified in the iframe’s `src` attribute can be framed!
图 8-1：如果 iframe 不为空，则可以将指定在 iframe 的 src 属性中的页面框架化！

Some web pages can’t be framed. If you place a page that can’t be framed within an iframe, you should see a blank iframe, as in Figure 8-2 .

一些网页无法被框架。如果您将一个无法被框架的页面放置在 iframe 中，您应该会看到一个空白的 iframe，如图 8-2 所示。

f08002 — Figure 8-2 : If the iframe is blank, the iframe source cannot be framed.
图 8-2：如果 iframe 为空，则无法框定 iframe 来源。

Iframes are useful for many things. The online advertisements you often see at the top or sides of web pages are examples of iframes; companies use these to include a premade ad in your social media or blog. Iframes also allow you to embed other internet resources, like videos and audio, in your web pages. For example, this iframe allows you to embed a YouTube video in an external site:

Iframes 对于许多事情都非常有用。您经常在网页顶部或侧边看到的在线广告就是 Iframes 的例子;公司使用这些来在您的社交媒体或博客中包含预先制作的广告。Iframes 还允许您将其他互联网资源（例如视频和音频）嵌入您的网页中。例如，这个 Iframe 允许你在外部站点中嵌入 YouTube 视频。

<iframe width="560" height="315"
src="https://www.youtube.com/embed/d1192Sqk" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

Iframes have made our internet a more vibrant and interactive place. But they can also be a danger to the framed web page because they introduce the possibilities of a clickjacking attack. Let’s say that example.com is a banking site that includes a page for transferring your money with a click of a button. You can access the balance transfer page with the URL https://www.example.com/transfer_money .

Iframes 让网上世界变得更加充满活力和互动性。但是它们也会对被嵌套的网页构成危险，因为它们引入了点击劫持攻击的可能性。假设 example.com 是一个银行网站，包括一个可通过点击按钮转移您的资金的页面。您可以通过 URL https://www.example.com/transfer_money 访问余额转移页面。

This URL accepts two parameters: the recipient account ID and the transfer amount. If you visit the URL with these parameters present, such as https://www.example.com/transfer_money?recipient=RECIPIENT_ACCOUNT&amount=AMOUNT_TO_TRANSFER , the HTML form on the page will appear prefilled ( Figure 8-3 ). All you have to do is to click the Submit button, and the HTML form will initiate the transfer request.

此 URL 接受两个参数：收件人账户 ID 和转账金额。如果您访问带有这些参数的 URL，例如 https://www.example.com/transfer_money?recipient=RECIPIENT_ACCOUNT&amount=AMOUNT_TO_TRANSFER，页面上的 HTML 表单将自动填充（图 8-3）。您只需点击提交按钮，HTML 表单就会发起转账请求。

f08003 — Figure 8-3 : The balance transfer page with the HTTP POST parameters prefilled
图 8-3：具有预填 HTTP POST 参数的余额转移页面

Now imagine that an attacker embeds this sensitive banking page in an iframe on their own site, like this:

现在想象一下，如果攻击者将这个敏感的银行页面嵌入到他们自己的网站的 iframe 中，就像这样：

<html>
  <h3>Welcome to my site!</h3>
  <iframe src="https://www.example.com/transfer_money?
    recipient=attacker_account_12345&amount=5000" 
    width="500" height="500">
  </iframe>
</html>

This iframe embeds the URL for the balance transfer page. It also passes in the URL parameters to prefill the transfer recipient and amount. The attacker hides this iframe on a website that appears to be harmless, then tricks the user into clicking a button on the sensitive page. To achieve this, they overlay multiple HTML elements in a way that obscures the banking form. Take a look at this HTML page, for example:

该 iframe 嵌入了余额转账页面的 URL。它还传递了 URL 参数以预填转账收件人和金额。攻击者将此 iframe 隐藏在一个看似无害的网站上，然后诱骗用户点击敏感页面上的按钮。为了实现这一点，他们以一种方式叠加多个 HTML 元素，以模糊银行表单。例如，看看这个 HTML 页面：

<html>
  <style>
      #victim-site {
        width:500px;
        height:500px;
      1 opacity:0.00001;
      2 z-index:1;
        }
      #decoy {
      3 position:absolute;
        width:500px;
        height:500px;
      4 z-index:-1;
        }
  </style>
  <div     id="decoy ">
  <h3>Welcome to my site!</h3>
  <h3>This is a cybersecurity newsletter that focuses on bug
bounty news and write-ups! 
  Please subscribe to my newsletter below to receive new
cybersecurity articles in your email inbox!</h3>
  <form action="/subscribe" method="post">
    <label for="email">Email:</label>
  5 <br>
    <input type="text" id="email" value="Please enter your email!">
  6 <br><br>
    <input type="submit" value="Submit">
  </form>
  </div>
  <iframe     id="victim-site" 
         src="https://www.example.com/transfer_money? 
    recipient=attacker_account_12345&amount=5000" 
    width="500" height="500">
  </iframe>
</html>

You can see that we’ve added a <style> tag at the top of the HTML page. Anything between <style> tags is CSS code used to specify the styling of HTML elements, such as font color, element size, and transparency. We can style HTML elements by assigning them IDs and referencing these in our style sheet.

你可以看到我们在 HTML 页面顶部添加了一个<style>标签。在<style>标签之间的任何内容都是 CSS 代码，用于指定 HTML 元素的样式，例如字体颜色、元素大小和透明度。我们可以通过为它们分配 ID 并引用这些 ID 来设置 HTML 元素的样式。

Here, we set the position of our decoy element to absolute to make the decoy site overlap with the iframe containing the victim site 3 . Without the absolute position directive, HTML would display these elements on separate parts of the screen. The decoy element includes a Subscribe to Newsletter button, and we carefully position the iframe so the Transfer Balance button sits directly on top of this Subscribe button, using new lines created by HTML’s line break tag <br> 5 6 . We then make the iframe invisible by setting its opacity to a very low value 1 . Finally, we set the z-index of the iframe to a higher value than the decoys 2 4 . The z-index sets the stack order of different HTML elements. If two HTML elements overlap, the one with the highest z-index will be on top.

在这里，我们将我们的幌子元素的位置设置为绝对位置，使得幌子站点与包含受害者站点 3 的 iframe 重叠。没有绝对位置指令，HTML 会在屏幕的不同部分显示这些元素。幌子元素包括一个“订阅通讯”按钮，我们仔细地定位了 iframe，使得“转移余额”按钮直接位于这个“订阅”按钮的上方，使用 HTML 的换行标签< br >5 6 创建新的行。然后，我们通过将 iframe 的不透明度设置为非常低的值 1 使其不可见。最后，我们将 iframe 的 z-index 设置为比幌子的高 2 4。z-index 设置不同 HTML 元素的堆叠顺序。如果两个 HTML 元素重叠，具有最高 z-index 的元素将位于顶部。

By setting these CSS properties for the victim site iframe and decoy form, we get a page that looks like it’s for subscribing to a newsletter, but contains an invisible form that transfers the user’s money into the attacker’s account. Let’s turn the opacity of the iframe back to opacity :1 to see how the page is actually laid out. You can see that the Transfer Balance button is located directly on top of the Subscribe to Newsletter button ( Figure 8-4 ).

通过为受害者网站的 iframe 和诱饵表单设置这些 CSS 属性，我们得到了一个看起来像是订阅新闻的页面，但实际上包含一个将用户的钱转移到攻击者账户的不可见表单。让我们将 iframe 的不透明度反转为 opacity:1，以查看页面的实际布局。您可以看到“转账余额”按钮直接位于“订阅新闻”按钮上方（图 8-4）。

f08004 — Figure 8-4 : The Transfer Balance button lies directly on top of the Subscribe button. Victims think they’re subscribing to a newsletter, but they’re actually clicking the button to authorize a balance transfer.
图 8-4：转账按钮直接位于订阅按钮上方。受害者以为自己是在订阅新闻通讯，但实际上点击的是授权转账的按钮。

Once we reset the opacity of the iframe to opacity:0.00001 to make the sensitive form invisible, the site looks like a normal newsletter page ( Figure 8-5 ).

当我们将 Iframe 的不透明度重置为 opacity:0.00001 使敏感表单变得不可见，该网站就像普通的通讯页面（图 8-5）。

f08005 — Figure 8-5 : The attacker tricks users into clicking the button by making the sensitive form invisible.
图 8-5：攻击者通过使敏感表单不可见来诱使用户单击按钮。

If the user is logged into the banking site, they’ll be logged into the iframe too, so the banking site’s server will recognize the requests sent by the iframe as legit. When the user clicks the seemingly harmless button, they’re executing a balance transfer on example.com ! They’ll have accidentally transferred $5,000 from their bank account balance to the attacker’s account instead of subscribing to a newsletter. This is why we call this attack user-interface redressing or clickjacking : the attacker redressed the user interface to hijack user clicks, repurposing the clicks meant for their page and using them on a victim site.

如果用户已登录银行网站，则他们也将登录 iframe，因此银行网站的服务器将识别 iframe 发送的请求为合法的。当用户单击看似无害的按钮时，他们正在执行将 5000 美元从其银行账户余额转移至攻击者账户的余额转移操作，而非订阅通讯。这就是为什么我们称之为用户界面伪装或点击劫持攻击：攻击者重新设计了用户界面以劫持用户点击，重定向了原本用于其页面的点击并将它们用在受害站点上。

This is a simplified example. In reality, payment applications will not be implemented this way, because it would violate data security standards. Another thing to remember is that the presence of an easy-to-prevent vulnerability on a critical functionality, like a clickjacking vulnerability on the balance transfer page, is a symptom that the application does not follow the best practices of secure development. This example application is likely to contain other vulnerabilities, and you should test it extensively.

这只是一个简化的例子。在现实中，支付应用程序不会以这种方式实现，因为这样做将违反数据安全标准。另一件需要记住的事情是，如果在关键功能（例如余额转移页面）上存在易于预防的漏洞，比如点击劫持漏洞，这是应用程序未遵循安全开发最佳实践的症状。这个例子应用程序很可能还存在其他漏洞，你应该进行全面测试。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

Mechanisms

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。