如何检查浏览器是否阻止 Canvas javascript？答案

【问题标题】：How can I check if a browser blocks Canvas javascript?如何检查浏览器是否阻止 Canvas javascript？
【发布时间】：2021-03-04 10:21:47
【问题描述】：

在一个 HTML 网站中，我检查 document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') 以确定浏览器是否支持 webp，并在 <body> 上设置一个类，以便可以使用 CSS 规则加载 webp 格式的图像内容（如果支持）。

这往往可以正常工作，但在 Brave iOS 上，指纹屏蔽屏蔽似乎阻止了此脚本运行。我似乎无法让开发人员控制台检查 Brave iOS 上的任何错误消息，而 brave://inspect 似乎不适用于 Brave iOS，就像 chrome://inspect 适用于 Chrome iOS，所以我无法确切看到什么正在发生。 Desktopbrave://inspect远程调试好像只支持Android远程设备。

奇怪的是，带有“指纹被阻止”的 Brave 桌面，即使在“严格，可能会破坏网站”的攻击级别上，似乎也不会导致任何问题，仅在移动设备上。

当我在 Brave iOS 上切换“阻止指纹识别”时，我的 webp 图像在被阻止时会消失，而在解除阻止时会重新出现。

This article on Brave fingerprinting blocking 状态：

目前，Brave 通过阻止第三方网站访问经常用于对用户进行指纹识别的功能来防止指纹识别。这包括 Canvas、Web Audio 和 WebGL API 等高度识别部分。

我的理论是这就是为什么我的 webp 图像在指纹被阻止时消失的原因，但我对其他想法持开放态度。

我想知道在这种情况下会引发什么异常（如果有的话），或者如何优雅地检测这种情况，但如果没有 Brave iOS 控制台可玩，我就瞎了。

我知道我可以检查 Canvas 支持，但我不确定“支持但被阻止”是否是另一种情况。

【问题讨论】：

您可以从添加一个窗口错误处理程序开始，它只是将所有错误信息写入一个文本区域供您检查……developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
(“确定浏览器是否支持 webp” - 您是否考虑过在服务器端根据客户端发送的 Accept 标头来确定这一点?)
@CBroe 将尝试这两种方法，谢谢！您知道所有支持的浏览器是否可靠地发送了包含webp 的Accept 标头？
你必须检查一下，但我认为浏览器供应商经历实施它的麻烦 - 然后不在相关地方“宣传”它是没有意义的。一些浏览器可能只在请求实际图像时才包含它（意思是，从加载 HTML 文档本身的请求的 Accept 标头中，您可能无法分辨 - 但以下对单个图像的请求仍应包含信息然后。）
是的，这是我关心的问题，但如果它在非图像请求中可靠可用，那就太好了。许多浏览器发送*/* 声称他们接受一切。对于未在 Accept 标头中明确指定 image/webp 的浏览器，我可能需要保留 javascript 作为后备。

标签： javascript html5-canvas webp brave

【解决方案1】：

使用上面@CBroe 的窗口错误处理思路，简单实现：

window.onerror = function(message, source, lineno, colno, error) {
    window.alert([message, source, lineno, colno, error]);
};

我能够确定在阻止指纹识别的 Brave iOS 上，Canvas 元素已成功创建，toDataURL 方法不会引发异常，但会返回 undefined。

所以(toDataURL('image/webp') || '') 给了我一个可靠的字符串来检查data:image/webp，即使指纹被阻止（尽管在这些情况下可能是假阴性）。

此外，检查主请求上的Accept 标头可以提供一种快捷方式——如果它明确包含image/webp，我可以完全跳过javascript 检查并在服务器上设置正文类。否则，javascript 是一个方便的后备，现在更强大。

再次感谢@CBroe

此外，@Kaiido 的评论指出，检查浏览器是否可以将画布内容写入为 webp 格式的方法可能不一定与浏览器显示 webp 的能力相关图片，所以method which checks that specifically 可能是更好的选择

【讨论】：