0

Clickjacking is when people trick users into clicking a button they're not supposed to, making them perform a malicious action.

I'm working on a product which, as an option for merchants, provides an iFrame component that can be embedded into a website to make a payment. Signed in users will see a button in the iframe that they can click to perform an important action. This action should only be called when the click is genuinely theirs.

If, for example, the iFrame's opacity is set to 0, then it can be positioned such that the button in our iFrame is invisible, but on top of a different visible button. Users can therefore be tricked into clicking it.

I think I have a method for preventing it, but I'm not sure if it's sufficient or not. The following code would go in the iFrame:

<script>
  function frameVisible() {
      var has_dimension = $(frameElement).is(':visible');
      var is_visible    = $(frameElement).css('visibility') == 'visible';
      var is_opaque     = $(frameElement).css('opacity') == '1';
      var one_deep      = (parent == top);
      return has_dimension && is_visible && is_opaque && one_deep;
  }
  if (!frameVisible()) {
      $(document.body).hide()
  }
</script>

Basically, if the iframe is obscured in any way, the iframe content will be hidden, preventing any unintended clicks.

I'm just trying to find out if there's a way around the code provided here.

4

1 回答 1

0

That is not sufficient.

Attackers can position their own elements above the <iframe>, and either leave a small gap for the user to click through, or set pointer-events: none to allow users to click through the cover.

AFAIK, there is no way for you to detect that.

于 2013-07-02T03:01:28.130 回答