如何阻止Headless Chrome加载Data URL页面中的图片？测试未生效

我之前也踩过这个坑——普通的图片拦截手段对Data URL页面完全没效果，这是因为Data URL属于本地资源范畴，Chrome的常规命令行参数（比如--blink-settings=imagesEnabled=false）不会对这类资源生效。下面是我亲测有效的解决方案：

1. 改用Chrome DevTools Protocol（CDP）控制图片加载 #

Headless模式下，直接通过CDP配置内容策略是最可靠的方式，它能精准管控所有资源类型的加载，包括Data URL页面内嵌的图片。

具体操作： #

• 保留你的启动命令不变：chrome --headless --remote-debugging-port=9222
• 连接到调试端口后，务必在加载Data URL页面之前执行以下CDP命令：
  • 方法一：用ContentSettings.setImages全局禁用图片加载

    {
      "id": 1,
      "method": "ContentSettings.setImages",
      "params": {
        "scope": {
          "urlPattern": "*"
        },
        "setting": "block"
      }
    }
    

  • 方法二：用Network.setBlockedURLs精准拦截图片资源（包括Data URL格式的图片）

    {
      "id": 2,
      "method": "Network.setBlockedURLs",
      "params": {
        "urls": ["*.png", "*.jpg", "*.jpeg", "*.gif", "data:image/*"]
      }
    }
    

2. 代码示例（以Python Selenium为例） #

如果用Selenium编写测试用例，可以通过execute_cdp_cmd直接调用CDP命令：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument("--headless")
chrome_options.add_argument("--remote-debugging-port=9222")

driver = webdriver.Chrome(options=chrome_options)

# 先设置图片拦截，再加载Data URL
driver.execute_cdp_cmd(
    "ContentSettings.setImages",
    {
        "scope": {"urlPattern": "*"},
        "setting": "block"
    }
)

# 加载测试用的Data URL页面
test_data_url = "data:text/html,<html><body><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==' /></body></html>"
driver.get(test_data_url)

# 这里添加你的验证逻辑，比如检查图片是否被成功拦截

3. 为什么之前的尝试无效？ #

像--blink-settings=imagesEnabled=false这类全局命令行参数，Chrome会对Data URL、chrome://这类本地/特殊资源跳过部分全局配置。而CDP的ContentSettings是直接作用于浏览器的内容策略引擎，能覆盖所有资源类型，自然也包括Data URL内部的图片资源。

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