L'attribut allow de l'iframe ne fonctionne pas

J’ai ajouté un iframe codesandbox avec différents attributs, mais Discourse ne récupère que l’attribut src. Dois-je modifier quelque chose dans les paramètres de Discourse ? J’ai déjà autorisé cet iframe et il s’affiche, mais pas correctement.

Voici l’iframe que j’essaie d’ajouter :

<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>

Mais il se contente de rendre ceci :

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

L’iframe ne s’affiche donc pas correctement :

3 « J'aime »

It works for me

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 « J'aime »

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 « J'aime »

Je rencontre également ce problème. J’aimerais ajouter une classe à l’IFRAME que j’intègre dans mon article de politique de confidentialité, qui intègre les paramètres de suivi de confidentialité de notre installation Matomo auto-hébergée. Cela me permettrait d’ajouter une meilleure bordure et une couleur pour le différencier du reste de la politique de confidentialité.

Bien que j’aie ajouté class="foo" dans mon élément IFRAME, il est supprimé, apparemment par le code de liste blanche ci-dessus. Y a-t-il une possibilité d’étendre cette liste pour autoriser quelques attributs supplémentaires ?

Pour des raisons de sécurité, nous sommes très stricts quant aux attributs HTML qui peuvent être rendus sur notre page lorsqu’ils proviennent de saisies utilisateur.

Voici ce que vous pouvez faire pour y parvenir :

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

Ensuite, ciblez cela avec votre sélecteur CSS / JS :

div[data-my-special-attr="42"] > iframe {
  border-color: pink;
}
3 « J'aime »

Merci ! Cela a fonctionné à la fois sur la page du sujet et sur la page spéciale de politique de confidentialité rendue.

À noter pour toute personne qui essaierait cela : vous ne pouvez pas ajouter un attribut class, vous devez littéralement ajouter un attribut du type data-foo-attr.

1 « J'aime »

Rafael, merci pour cette précision, elle éclaire le comportement que j’ai observé.

Je souhaiterais savoir si vous avez prévu de débloquer les attributs audio/vidéo d’une iframe. Les navigateurs modernes gèrent très bien l’accessibilité pour ces fonctionnalités, et il existe de plus en plus de services intéressants qui seraient parfaits à intégrer par les utilisateurs, mais qui manquent simplement de ce type d’accessibilité.

Merci.

1 « J'aime »

Nous sommes toujours ouverts aux retours d’expérience !

Cela devient plus facile si nous parlons de points précis, comme les attributs exacts que vous souhaitez autoriser et pour quels services ils sont nécessaires.

2 « J'aime »

Ok. Je pense particulièrement à Jam Systems / Jam · GitLab, qui nécessiterait un paramètre allow=“microphone *;” pour fonctionner correctement.

Je rencontre le même problème en essayant d’intégrer un enregistreur audio H5P ; l’option allow=“microphone *;” est supprimée de l’iframe.

Que faudrait-il faire pour peut-être ajouter un paramètre d’iframe permettant d’autoriser ces permissions ?

Pouvons-nous autoriser les administrateurs à spécifier quels attributs iframe ils souhaitent autoriser ?

1 « J'aime »

Ce serait utile, mais nous serions également satisfaits si l’attribut allow était mis sur liste blanche pour tous. Nous rencontrons actuellement des problèmes de lecture audio avec les lecteurs de podcasts intégrés d’Apple et de Spotify. Comme d’autres l’ont mentionné, le problème est que l’attribut allow est supprimé, ce qui contient une directive importante encrypted-media.

1 « J'aime »

Étant donné que nous sommes déjà stricts quant aux domaines autorisés dans les iframes, avoir un autre paramètre où nous définissons la chaîne allow pour chaque iframe et analysons le format étrange du contenu allow me semble un peu excessif.

J’ai créé une PR qui permet simplement d’utiliser n’importe quoi dans l’attribut allow pour les iframes déjà autorisées :

Qu’en penses-tu @sam ?

3 « J'aime »

Hmm, je suppose que ça me convient, je vois ta logique ici, @david des objections ?

1 « J'aime »

Ce changement a été fusionné @santosguillamot @selfscrum @cogdog @gilby

3 « J'aime »