如何检测iframe内部的点击(跨域)? Aka防止点击欺诈

时间:2015-03-30 02:01:58

标签: javascript jquery html iframe advertisement

我的广告系统提供商收到了有关点击欺诈的警告。没有进一步的信息,他们所推荐的是“为太快点击广告的用户隐藏广告”。我写了一段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”)。如果是跨域,则无效。有什么提示,老兄?

6 个答案:

答案 0 :(得分:7)

您无法检测跨域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,你不知道用户在那里做了什么,他可以点击一百万次,你永远不会知道。

答案 1 :(得分:5)

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。然后,我们将重点放回主窗口,这样我们就可以找到用户是否再次单击。

这个技巧对我来说对于2步iframe点击控制的POC非常有用。了解用户第一次点击iframe的时间允许我重新组织我的不同图层以保持幻觉完美。

答案 2 :(得分:0)

好吧,不久前我找到了this plugin for WordPress。显然它完成了我的需要 - 只是想知道这个人是如何使它工作的,它确实计算了Adsense iframe的点击次数。我必须仔细看看,虽然我不是PHP程序员。我主要用Python编程,需要一些Django的解决方案。如果任何人都可以轻松阅读代码,我将不胜感激任何帮助。

答案 3 :(得分:0)

插件首先搜索由先前指定的类名包装的任何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();
        }
}

答案 4 :(得分:0)

选中此选项可能会有所帮助。跨浏览器时,您无法检测到click事件。

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

答案 5 :(得分:0)

@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();
        }
    });

如果您想添加移动支持,则上面的代码在桌面上就像一个魅力,只需使用3 touchstarttouchend个事件来模拟移动设备上的鼠标悬停。

touch events