怎么在多图文混合排版页面中利用事件委托过滤出所有未做安全防盗链的目标 img-js教程-PHP中文网

应主动扫描而非依赖事件委托识别未防盗链图片，通过检查img的referrerpolicy属性、跨域src及mutationobserver动态监控实现启发式标记。

在多图文混合排版页面中，要利用事件委托识别并过滤出所有未做安全防盗链的 img 元素，关键不是监听用户点击，而是主动扫描、比对 referrer 策略与实际加载行为。事件委托在此场景下不直接适用——因为防盗链失效发生在资源加载阶段（非 dom 交互），但你可以用它辅助后续操作（比如统一打标、上报或动态拦截）。以下是实用路径：

一、明确“未做防盗链”的判定依据

真正可检测的信号是：图片请求未携带有效的 Referer 或 Referrer-Policy 头，且来源域不在白名单内。但注意：浏览器不向 JS 暴露网络请求头，所以不能靠 document.querySelectorAll('img') 直接读取 header。可行替代方案有：

检查 <img> 的 referrerpolicy 属性是否为 "no-referrer" 或 "origin-when-cross-origin"（较安全），若缺失或为 "unsafe-url"，属于高风险配置；
检查图片 src 是否为相对路径或同源地址（这类通常无防盗链压力）；跨域外链（如 https://cdn.example.com/xxx.jpg）才需重点筛查；
观察图片是否能正常加载（onload）但控制台报 CORS 或 Referrer 被拒警告（需人工或 DevTools 配合，不可编程自动捕获）；
服务端日志才是最终依据，前端仅能做启发式标记。

二、用事件委托辅助“动态发现”和“批量处理”

虽然防盗链本身无法在 JS 中实时验证，但你可以把事件委托用在用户触发行为后的响应环节，例如点击“检查防盗链”按钮、切换画廊分页、或滚动加载新图后：

Poe

Poe是一款由 Quora 推出的聚合多种 AI 聊天机器人并支持创建自定义机器人的 AI 聊天平台。

下载

给图片容器（如 #gallery）绑定 click 或 scroll 事件，用 e.target.closest('img') 捕获目标；
对匹配到的 img，检查其 src 协议+域名是否与当前页面 origin 不同，且 referrerpolicy 属性未设置或值宽松；
符合条件的，添加自定义类（如 data-no-anti-leech）或记录到数组，供后续统一处理（替换占位图、插入警告角标等）。

三、实际可落地的 JS 片段（带防误判）

以下代码在页面加载完成后执行一次扫描，并支持后续动态新增图片（通过 MutationObserver + 事件委托兜底）：

function findUnprotectedImages() {
  const imgs = Array.from(document.querySelectorAll('img'));
  return imgs.filter(img => {
    const src = img.src || img.getAttribute('src');
    if (!src) return false;
    try {
      const url = new URL(src);
      // 仅检查跨域图
      if (url.origin === location.origin) return false;
      // referrerpolicy 缺失 或 明确允许发送全量 referer
      const policy = img.referrerPolicy || img.getAttribute('referrerpolicy') || '';
      return !policy || policy === 'unsafe-url';
    } catch {
      return false;
    }
  });
}

// 初始扫描
const unprotected = findUnprotectedImages();
console.table(unprotected.map(img => ({
  src: img.src.slice(0, 60) + '...',
  policy: img.referrerPolicy
})));

// 动态监听新插入的 img（例如 CMS 插件、富文本粘贴）
const observer = new MutationObserver(mutations => {
  mutations.forEach(m => {
    m.addedNodes.forEach(node => {
      if (node.nodeType === 1) {
        node.querySelectorAll?.('img').forEach(img => {
          if (!img.hasAttribute('data-checked')) {
            img.setAttribute('data-checked', '1');
            if (findUnprotectedImages().includes(img)) {
              img.classList.add('unprotected-img');
            }
          }
        });
      }
    });
  });
});
observer.observe(document.body, { childList: true, subtree: true });