Question

在 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，所以我无法看看到底发生了什么。桌面 brave://inspect 远程调试似乎只支持 Android 远程设备。

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

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

This article on Brave fingerprinting blocking 声明：

<块引用>

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

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

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

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

Answer 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 可能是更好的选择

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

1 个答案: