如何阻止数据：通过 puppeteer 的图像/编码图像请求答案

【问题标题】：How to Block data:image/encoded image requests through puppeteer如何阻止数据：通过 puppeteer 的图像/编码图像请求
【发布时间】：2021-06-08 04:08:41
【问题描述】：

我正在尝试阻止 puppeteer 中包含编码图像的所有媒体，到目前为止我是成功的，直到我点击 data:image 类型。他们没有在 puppeteer 中被阻止。

我尝试了很多方法，例如检查 url 是否包含 data:image，但该请求仍然没有被中止。

这是我当前的代码

await page.setRequestInterception(true);
page.on('request', (request) => {
    try{
        if (['image', 'media', 'png', 'jpeg', 'webp'].indexOf(request.resourceType()) !== -1) {
            request.abort();
        } else if(request.url().startsWith('data:image')) {
            request.abort();
        } else {
            request.continue();
        }
    } catch(e){
        errors.push({
            message: "Interception Error",
            error_stack: e,
        });
    }
});

也试过了

if(request.url().startsWith('data:image')) {
    request.respond({
        ok: statusMessage === "OK",
        status: 200,
        body: '',
    });
}

此代码可以很好地阻止普通图像，但无法阻止 base64 编码的图像。这是一些截图

【问题讨论】：

标签： node.js puppeteer chromium

【解决方案1】：

data:image 图像不会发出网络请求，它们已经将所有内容包含在 URL 字符串中。它们就像内联脚本，你不能通过请求拦截来阻止它们。如果不需要它们，您可以在页面呈现后删除它们，但由于它们的内容包含在 HTML 源代码中，您无法节省它们的加载时间。

【讨论】：