如何检测 iframe 内的点击（跨域）？又名防止点击欺诈答案

【问题标题】：How to detect a click inside of an iframe (cross-domain)? Aka prevent click fraud如何检测 iframe 内的点击（跨域）？又名防止点击欺诈
【发布时间】：2015-06-02 22:37:38
【问题描述】：

我的广告系统提供商向我发出了关于点击欺诈的警告。没有更多信息，他们只推荐“为点击广告太快的用户隐藏广告”。我写了一段 JS 脚本，在点击时将所有带有广告的 DIV 隐藏 N 秒（使用 cookie），但是这个解决方案不起作用，因为“内部”内容（带有广告）是由调用和呈现的 JS 脚本生成的来自外部服务器的内容（正如您对广告系统所期望的那样）。因此，当考虑到跨域安全性时，它有点像 Catch 22。如何检测 DIV（本地定义）内的点击，其内容由外部 JS 和 iframe 呈现？

例子：

<div class="ad-class"> <!-- locally defined div -->
   <div id="my-id"> </div> <!-- identifies my ad in the provider's system -->
   <script>
      var foo = blah // declares the ad dimensions and stuff
      //  and renders the contextual ad in #my-id DIV
   </script>
</div>

如果都是本地的，解决方案会很简单，因为内部 div 会继承父类（“ad-class”）。在跨域的情况下，这是无效的。有什么窍门吗，伙计们？

【问题讨论】：

您始终可以使用onclick 事件检测对div 的点击，而无需关心div 中的内容。但您可以检查 div innerHTML 是否已加载广告或广告是否为空，以及广告是否已加载然后运行您的脚本。
嗨，EhsanT，我希望你是对的，但不幸的是，onclick 在这里不起作用。
Detect Click into Iframe using JavaScript的可能重复

标签： javascript jquery html iframe ads

【解决方案1】：

您无法检测跨域 iframe 中的点击事件。

也就是说，你可能有一个糟糕的选择：

您可以做的最接近的事情之一是检测焦点从您的窗口移动到 iframe：

window.focus(); //force focus on the currenct window;
window.addEventListener('blur', function(e){
    if(document.activeElement == document.querySelector('iframe'))
    {
        alert('Focus Left Current Window and Moved to Iframe / Possible click!');
    }
});

http://jsfiddle.net/wk1yv6q3/

但是它不可靠，松散的焦点并不意味着点击，它可能是用户使用 TAB 在网站上移动。

另一个问题是，你只检测到第一次焦点移动到 iframe，你不知道用户在那里做了什么，他可以点击一百万次你永远不会知道。

【讨论】：

非常感谢 Luizgrs。这是迄今为止最好的解决方案。人们使用 TAB 浏览网站的可能性非常低。点击广告文字而不是链接的概率也是如此。就像我说的，在点击（或本例中的任何交互）后，广告 div 被隐藏，iframe 中此类交互的时间存储在 cookie 中。如果访问者继续浏览该网站，则会再次读取 cookie，并在 N 秒后再次显示广告 div。
但是，是的，我发现广告提供商的要求有点愚蠢。顺便说一句，我想知道如何保护 Adsense div 免受点击欺诈（我现在没有使用 Adsense，但一直在考虑改用它。）
此解决方案不适用于 Firefox 的最新版本。有什么办法解决吗？
感谢您的启发，您可能有兴趣查看我的回答，这是对您的升级。

【解决方案2】：

Luizgrs 启发了我这个解决方案：

var clickIframe = window.setInterval(checkFocus, 100);
var i = 0;

function checkFocus() {
  if(document.activeElement == document.getElementById("ifr")) {
  	console.log("clicked "+(i++));
  	window.focus();
   }
}

<!DOCTYPE html>
<h2>Onclick event on iframe</h2>
<iframe src="https://www.brokenbrowser.com/" id="ifr"></iframe>

该函数检测 iframe 是否有焦点，如果是，则用户点击进入 iframe。然后我们将焦点返回给我们的主窗口，这使我们能够确定用户是否再次点击。

这个技巧对我来说对两步 iframe 点击劫持的 POC 很有用。了解用户第一次点击 iframe 的时间让我能够重新组织不同的图层以保持完美的错觉。

【讨论】：

我对动态 iframe 使用了类似的脚本，而您的 window.focus 是我需要的缺失部分！谢谢你。

【解决方案3】：

@Luizgrs 指出的方法非常准确，但是我确实设法使用该方法的变体检测到点击事件：

var iframeMouseOver = false;
    $("YOUR_CONTAINER_ID")
        .off("mouseover.iframe").on("mouseover.iframe", function() {
            iframeMouseOver = true;
        })
        .off("mouseout.iframe").on("mouseout.iframe", function() {
            iframeMouseOver = false;
        });

    $(window).off("blur.iframe").on("blur.iframe", function() {
        if(iframeMouseOver){
            $j("#os_top").click();
        }
    });

上面的代码在桌面上就像一个魅力，如果你想添加移动支持，你只需要使用touch eventstouchstart和touchendevents来模拟移动设备上的鼠标悬停。

Source

【讨论】：

对于支持它的浏览器，或者使用指针事件代替鼠标/触摸。

【解决方案4】：

好吧，不久前我找到了this plugin for WordPress。显然它可以满足我的需要——只是想知道这个人是如何让它工作的，它确实计算了 Adsense iframe 的点击次数。虽然我不是 PHP 程序员，但我必须仔细看看。我主要用 Python 编程，需要一些针对 Django 的此类解决方案。如果有人可以轻松阅读代码，我将不胜感激。

【讨论】：

【解决方案5】：

插件首先搜索由先前指定的类名包装的任何 iframe。

iframe id 将被收集到一个数组中，并且对于这些 id 中的每个人，都会创建一个 mouseover 事件，该事件会触发隐藏类“cfmonitor”的脚本。因此，包含广告的 iframe 不再可见。

// IFRAME ACTION
    function iframeAction () {
        jq.each(jq.cfmonitor.iframes, function(index,element) {
            frameID = jq(element).attr('id') || false;
            if (frameID) initiateIframe(frameID);
            //alert (frameID);
        });
    }

    // INIT IFRAME
    function initiateIframe(elementID) {
        var element = document.getElementById(elementID);
        // MOUSE IN && OUT
        if (element) {
            element.onmouseover = processMouseOver;
            element.onmouseout = processMouseOut;
            //console.log("mouse on out");
        }
        // CLICKS
        if (typeof window.attachEvent !== 'undefined') {
            top.attachEvent('onblur', processIFrameClick);
        }
        else if (typeof window.addEventListener !== 'undefined') {
            top.addEventListener('blur', processIFrameClick, false);
        }
}

// IFRAME CLICKS
    function processIFrameClick() {
        // ADD A CLICK
        if(isOverIFrame) {
            //addClick();
            // Some logic here to hide the class 'cfmonitor'
            //console.log("Go");
            top.focus();
        }
}

【讨论】：

【解决方案6】：

检查它可能会有所帮助。跨浏览器时无法检测到点击事件。

window.focus();
window.addEventListener('blur', function(e){
  if(document.activeElement == document.getElementById('Your iframe id'))
   {
    console.log('iframe click!');
   }
});

【讨论】：