跨源iframe-showPicker用法

Question

我通过 iframe 将可信应用程序嵌入到我自己的应用程序中。它适用于大多数部分...但自定义日期选择器不起作用 -> 因为它会按照 https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/showPicker# 抛出 SecurityError安全错误

我可以完全控制这两个应用程序，并且可以设置任何所需的标签/属性。

但是无论我尝试过什么，带有frame-ancestors/frame-src或Permissions-Policy的CSP都不起作用。

我在这里看到了https://developer.chrome.com/blog/show-picker

我们可以添加一个权限策略，允许跨源 iframe 在其父链允许时显示浏览器选择器。

那么我是否正确，因为权限策略尚不存在，所以我无法在基于 Chromium 的浏览器中让 showPicker 在跨源 iframe 使用中工作？

（顺便说一句，Firefox，我们没有遇到问题，并且网站按预期工作。）

Answer 1

您可以使用 CSS 解决此问题。将“picker”类添加到您的输入中，删除 onclick 或 onfocus 等处理程序中的 showPicker 调用（或将其放入 try-catch 中）

input.picker {
    position:relative;
    padding-right: 1em;
}
input.picker::-webkit-calendar-picker-indicator {
  position: absolute;
  background-color: transparent;
  background-position: right;
  left:0; top:0;
  width:100%;height:99%;
  margin:0; padding:0;
  cursor: pointer;
}