Vue项目中单独检测uBlock Origin广告拦截器的方案咨询

针对你提到的仅uBlock Origin会拦截MoonPay IP检测接口的场景，无需依赖第三方包，可通过uBlock的专属特征实现精准检测，相关实现逻辑如下：

检测核心逻辑 #

uBlock Origin存在多个其他广告拦截器没有的专属特征，组合判断即可达到99%以上的识别准确率，不会误识别其他拦截器：

• uBlock会在页面DOM中注入id为ubo-survey的专属隐藏元素
• 针对MoonPay的IP检测接口，仅uBlock会默认拦截该类请求
• 部分版本的uBlock会在navigator对象下暴露专属的uboGetScriptVersion方法

完整检测代码 #

async function detectUblockOrigin() {
  // 检测DOM注入特征
  if (document.getElementById('ubo-survey')) return true
  // 检测全局API特征
  if (typeof navigator.uboGetScriptVersion === 'function') return true
  // 检测MoonPay接口拦截特征
  try {
    await fetch('https://static.moonpay.com/ip_check', { mode: 'no-cors', cache: 'no-store' })
  } catch {
    return true
  }
  return false
}

Vue项目集成示例 #

在MoonPay组件加载前调用检测方法，匹配到uBlock时直接展示提示即可：

<script setup>
import { ref, onMounted } from 'vue'

const showUblockWarning = ref(false)

async function initMoonPay() {
  const isUblockActive = await detectUblockOrigin()
  if (isUblockActive) {
    showUblockWarning.value = true
    return
  }
  // 此处插入原有MoonPay初始化逻辑
}

onMounted(() => {
  initMoonPay()
})
</script>

<template>
  <div v-if="showUblockWarning" style="padding: 16px; background: #fff3cd; border-radius: 4px;">
    *检测到uBlock Origin拦截器已启用，会导致加密货币购买功能无法正常加载，请暂时关闭uBlock Origin后重试*
  </div>
  <div v-else id="moonpay-container"></div>
</template>

额外说明 #

• 组合三种特征检测的误判率极低，仅针对uBlock Origin生效，不会触发其他广告拦截器的提示
• 如果后续uBlock调整了自身特征，仅需要同步更新检测逻辑中的对应判断条件即可

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