Iframe の allow 属性が機能しない

貢献 特徴
1

コードサンドボックスの 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

私の環境では動作しています

image

念のため、iframe の URL（https://codesandbox.io/embed/codesandbox-frontity-rnclp）をホワイトリストに追加しましたか？追加していない場合は、サイト設定の「許可された iframe」を検索してください。

「いいね！」 1
3

このドメイン：https://codesandbox.io/ は十分ではありませんか？Discourse で、一部の iframe 属性のみをホワイトリストに登録しているこのコードを見つけました：

height と weight の属性を含めると iframe は正常に動作しますが、他の属性も許可したいと考えています。

すべての CodeSandbox の iframe を許可する方法はありますか？ドメインのみを含めれば動作すると思っていたのですが。

ありがとうございます！

編集:

この URL をホワイトリストに追加してみましたが、それでも動作しません。

「いいね！」 3
4

この問題も発生しています。自己ホスト型の Matomo インストールからプライバシー追跡設定を埋め込む、ポリシー投稿に埋め込んでいる IFRAME にクラスを追加したいと考えています。これにより、プライバシーポリシーの他の部分と区別するために、より良いボーダーや色を追加できます。

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 のような属性を literally 追加する必要があります。

「いいね！」 1
7

ラファエルさん、ご声明をいただきありがとうございます。私の観察した動作が明確になりました。
iframe の音声・動画属性に対するロックの解放について、今後の計画はございますか？現代のブラウザはこれらの許可に対してアクセシビリティを非常に良好に管理しており、ユーザーにとって統合したいと考える魅力的なサービス提供が増えています。しかし、残念ながらこの種のアクセシビリティが欠けている状況です。
よろしくお願いいたします。

「いいね！」 1
8

私たちは常にフィードバックを受け付けています！

具体的に、どの属性をホワイトリストに含めたいか、またそれらがどのサービスで必要なのかについて話していただければ、対応がしやすくなります。

「いいね！」 2
An iframe in a post reports not HTTPs
9

はい。特に Jam Systems / Jam · GitLab については、正常に動作させるために 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 コンテンツ形式を解析するという、さらに別の設定を追加するのは、私には少しやりすぎのように思えます。

すでに許可されている iframe に対して、allow 属性に任意の文字列を使用できるようにする PR を作成しました。

どう思いますか @sam？

「いいね！」 3
16

うーん、これでいいと思います。あなたの論理は理解できます。@david さん、何か異論はありますか？

「いいね！」 1
17

この変更は @santosguillamot @selfscrum @cogdog @gilby によってマージされました

「いいね！」 3