1

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

这往往可以正常工作，但是在 Brave iOS 上，指纹屏蔽盾似乎阻止了此脚本运行。我似乎无法让开发人员控制台检查 Brave iOS 上的任何错误消息，并且brave://inspect似乎无法在 Brave iOS 上像chrome://inspectChrome iOS 那样工作，所以我无法确切看到正在发生的事情。桌面brave://inspect远程调试似乎只支持安卓远程设备。

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

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

这篇关于勇敢指纹阻止的文章指出：

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

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

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

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

4

1 回答 1

0

使用上面@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 图像的能力相关，因此专门检查的方法可能是更好的选择

于 2021-03-04T23:40:39.747 回答