如何使用jQuery防护无效广告点击与恶意用户并设置localStorage有效期

基础防护逻辑 #

初始防护思路为：当同一用户累计完成2-3次广告点击后，在广告容器上叠加透明遮罩，阻断同一访客后续产生的无效点击。
参考的初始基础代码：

初始交互逻辑JS #

$(document).ready(function() {
   // 广告iframe加载完成后初始隐藏防护遮罩
   $(".ads iframe").load(function() {
      $(".layer-protect").hide();
   });
});

基础布局CSS #

.ads {
    position: relative; /* 给广告容器设置相对定位，支撑绝对定位的遮罩层 */
}
.layer-protect {
    position: absolute; /* 遮罩层绝对定位对齐广告容器 */
    z-index: 999; /* 确保遮罩层层级高于iframe，实现正常覆盖 */
}
iframe {
  position: absolute;
}

基础结构HTML #

<!-- 依赖本地部署的jQuery资源 -->
<div class="ads">
    <iframe src="广告投放配置地址"></iframe>
</div>
<div class="layer-protect">
   <p>Hi! Testing...</p>
</div>

原拦截逻辑失效原因 #

原方案尝试遍历iframe内部元素、绑定点击拦截事件、用localStorage按链接存储点击次数做跳转拦截的逻辑完全失效，核心原因如下：

• 受浏览器跨域安全策略限制，父页面无法读取、遍历跨域iframe的内部DOM结构，既不能直接为内部元素绑定点击事件，也无法拦截iframe内部的链接跳转
• 原逻辑中使用$("iframe *")选择器遍历节点的写法，在跨域场景下根本无法获取到iframe内部的元素，整个遍历循环不会执行，点击绑定、计数逻辑自然完全失效
• 谷歌AdSense等第三方广告平台的iframe本身为跨域加载，且内部结构不固定，和测试环境下嵌入跨域iframe时拦截逻辑失效的表现完全一致，根本不具备直接操作内部元素的可行性

调整后的可行防护思路 #

放弃直接操作iframe内部元素的实现路径，调整防护逻辑为：

• 统计广告iframe外层容器的整体点击次数，而非逐个拦截内部链接
• 当累计点击次数达到设定阈值（2-3次）后，在iframe上方生成全区域覆盖的防护遮罩，将单用户的有效广告点击次数限制在预设范围内
• 为存在localStorage中的点击计数数据设置自动有效期，适配用户在线、离线的全场景统计准确性

localStorage计数自动有效期实现方案 #

localStorage本身没有内置的过期机制，需要手动配套时间戳实现全场景的有效期控制，具体实现逻辑：

• 存储点击计数时，在同一个存储条目中写入两个字段：累计点击次数、当前时间加上预设有效期的到期时间戳
• 每次读取点击计数时，先对比本地存储的到期时间和当前系统时间，如果当前时间已超过到期时间，就直接清空旧的计数数据，重新从0开始统计
• 这套逻辑完全基于本地存储计算，不依赖网络状态，用户离线、在线场景下都能准确判断计数是否过期，不会出现长期保留历史点击记录导致的防护误判

内容的提问来源于stack exchange，提问作者user10360773