使用Clipboard API是否需要查询权限

Question

异步剪贴板 API 有一些安全注意事项。来自文档：

Chromium 浏览器：

阅读需要授予Permissions API剪贴板读取权限。

写入需要剪贴板读取权限或瞬时激活。

Firefox 和 Safari：

Firefox 或 Safari 不支持（且不计划支持）剪贴板读取和剪贴板写入权限。

是否需要查询权限，或者对于所有支持的浏览器直接使用剪贴板API是否安全？过去有什么不同吗？会变吗

在我看来，正确的方法是首先查询权限（至少对于基于 Chromium 的浏览器）。然后，如果授予权限，则使用剪贴板 API。那就是：

navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
  if (result.state === "granted") {
    navigator.clipboard.readText().then((text) => console.log(text));
  });

在实践中，当我直接使用剪贴板API时，无需查询权限，它仍然可以在支持的浏览器中工作。基于 Chromium 的浏览器在首次使用时会显示权限弹出窗口。

navigator.clipboard.readText().then((text) => console.log(text));

完整示例：

<html>
<body>
    <input id="b1" type="button" value="click" />
</body>
<script>
    document.querySelector("#b1").addEventListener('click', (e) => {
        navigator.clipboard.readText().then(
            (clipText) => console.log(clipText));
    });
</script>
</html>

Answer 1

如果剪贴板访问被客户端

阻止

，则使用clipboard API可能会引发错误（读取权限被拒绝）。要处理这种场景，最简单的方法是使用 try-catch 块。这是一个实现：

<input id="b1" type="button" value="click" />

<script>
    document.querySelector("#b1").addEventListener('click', async () => {
        try {
            const text = await navigator.clipboard.readText();
            alert('Text from clipboard: ' + text);
        } catch (err) {
            console.error('Operation failed', err);
        }
    });
</script>

此外，不再需要进行任何权限检查，因为 try-catch 可以处理任何 permission-denied 错误。

使用Clipboard API是否需要查询权限

问题描述投票：0回答：1

1个回答

最新问题

使用Clipboard API是否需要查询权限

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1