Iframe allow 属性不生效

贡献 功能
1

我添加了一个带有不同属性的 codesandbox iframe，但 Discourse 只获取了 src。我是否需要在 Discourse 设置中进行更改？我已经允许了该 iframe，它确实显示了，但显示不正确。

这是我尝试添加的 iframe：

<iframe 
  src="https://codesandbox.io/embed/codesandbox-frontity-rnclp?fontsize=14" 
  title="Frontity - Post with recompose" 
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" 
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" 
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

但它只渲染了以下内容：

Need_to_integrate_react-stripe-elements_-%F0%9F%A4%97_Dev_Talk___Questions-_Frontity_Community_Forum

因此，iframe 没有正确显示：

09
09344×178 5.53 KB

3 个赞
2

It works for me

image
image.png1268×70 6.02 KB

Just to be sure, did you add the iframe url (https://codesandbox.io/embed/codesandbox-frontity-rnclp) in whitelist? If not, search the site setting allowed iframes.

1 个赞
3

I have this domain: https://codesandbox.io/. Shouldn’t be enough? I have found this code at Discourse where it whitelists just some iframe attributes:

If I include the attributes height and weight the iframe works fine, but I would like to allow the other attributes too.

Is there a way of allowing all codesandbox iframes? I thought including just the domain it would work.

Thank you!

EDIT:

I have tried adding this url in whitelist but it is not working neither.

3 个赞
4

我也遇到了同样的问题。我想在我嵌入隐私政策帖子的 IFRAME 上添加一个类，该 IFRAME 嵌入了我们自托管 Matomo 安装中的隐私跟踪设置。这样我就可以添加更美观的边框和一些颜色，使其与隐私政策的其余部分区分开来。

尽管我的 IFRAME 元素中包含了 class="foo"，但它似乎被上述白名单代码移除了。是否有可能扩展该白名单，允许更多的属性？

5

出于安全考虑，我们对于用户输入中可渲染的 HTML 属性非常严格。

您可以这样做来实现：

<div data-my-special-attr="42">
  <iframe src="http://example.com">
</div>

然后使用您的 CSS / JS 选择器针对该元素：

div[data-my-special-attr="42"] > iframe {
  border-color: pink;
}
3 个赞
6

谢谢！这在主题页面和渲染后的隐私政策特殊页面上都生效了。

另外，如果其他人也想尝试，请注意：你不能添加 class 属性，而是必须添加类似 data-foo-attr 这样的属性。

1 个赞
7

Rafael，感谢您的说明，这澄清了我观察到的行为。我想知道您是否有计划解除 iframe 音频/视频属性的锁定？现代浏览器对这些功能的无障碍支持已相当完善，且市场上出现了越来越多有趣的增值服务，用户非常希望将其集成，但目前仅受限于此类无障碍支持。谢谢。

1 个赞
8

我们随时欢迎反馈！

如果我们能具体讨论，例如您希望将哪些确切属性列入白名单，以及这些属性对哪些服务是必要的，沟通起来会更加顺畅。

2 个赞
An iframe in a post reports not HTTPs
9

好的。我特别考虑到 https://gitlab.com/jam-systems/jam，它需要添加 allow=“microphone *” 参数才能正常工作。

10

我遇到了同样的问题 尝试嵌入 H5P 音频录音器；allow="microphone *;" 选项已从 iframe 中被移除。

需要做什么才能添加一个允许此类权限的 iframe 设置呢？

11

我们能否允许管理员指定他们想要允许的 iframe 属性？

1 个赞
13

这会很有用，但我们也乐于看到 allow 属性被列入所有内容的白名单。我们目前在使用嵌入式 Apple 和 Spotify 播客播放器时遇到音频播放问题。正如其他人提到的，问题在于 allow 属性被剥离了，而该属性包含一个重要的 encrypted-media 指令。

1 个赞
Allowed iframes whitelist not working - 'x-frame-options: SAMEORIGIN'
15

鉴于我们已经严格限制了可以在 iframe 中使用的域名，再增加一个设置，让我们为每个 iframe 设置 allow 字符串并解析奇怪的 allow 内容格式，对我来说似乎有点过了。

我做了一个 PR，它只是允许在已允许的 iframe 中使用 allow 属性中的任何内容：

你怎么看 @sam？

3 个赞
16

嗯，我想我没意见，我明白你的逻辑了，@david 有什么异议吗？

1 个赞
17

此更改已合并 @santosguillamot @selfscrum @cogdog @gilby

3 个赞