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

Question

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

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

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

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

This article on Brave fingerprinting blocking 状态：

Currently Brave protects against fingerprinting by preventing third party sites from accessing functionality frequently used to fingerprint users. This includes highly identifying parts of the Canvas, Web Audio and WebGL APIs, among others.

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

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

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

Answer 1

使用上面@CBroe 的 window 错误处理程序想法，实现简单：

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

我能够确定在阻止指纹识别的 Brave iOS 上，成功创建了 Canvas 元素，并且 toDataURL 方法没有引发异常，但是 return undefined.

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

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

再次感谢@CBroe

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

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

How can I check if a browser blocks Canvas javascript?

javascript

html5-canvas

webp

brave