Atributo allow de Iframe no funciona

He añadido un iframe de codesandbox con diferentes atributos, pero Discourse solo está obteniendo el src. ¿Debería cambiar algo en la configuración de Discourse? Ya he permitido este iframe y se está mostrando, pero no correctamente.

Este es el iframe que estoy intentando añadir:

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

Pero solo está renderizando esto:

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

Así que el iframe no se muestra correctamente:

3 Me gusta

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

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

Yo también tengo este problema. Me gustaría añadir una clase al IFRAME que estoy incrustando en mi publicación de política de privacidad, el cual incorpora la configuración de seguimiento de privacidad de nuestra instalación de Matomo autohospedada. Esto me permitiría añadir un borde más definido y algún color para diferenciarlo del resto de la política de privacidad.

A pesar de tener un atributo class="foo" en mi elemento IFRAME, parece que está siendo eliminado, probablemente por el código de lista blanca mencionado anteriormente. ¿Hay alguna posibilidad de que se pueda ampliar para permitir algunos atributos más?

Por seguridad, somos muy estrictos con qué atributos HTML se pueden renderizar en nuestra página cuando provienen de la entrada del usuario.

Lo que puedes hacer para lograrlo es:

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

y luego apuntar a eso con tu selector de CSS / JS:

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

¡Gracias! Eso funcionó tanto en la página del tema como en la página especial de política de privacidad renderizada.

Para tener en cuenta, si alguien más está intentando esto, no puedes agregar un atributo class; literalmente necesitas agregar un atributo como data-foo-attr.

1 me gusta

Rafael, gracias por la declaración; aclara el comportamiento que he observado. Me gustaría saber si tienes previsto liberar ese bloqueo para los atributos de audio/video de un iframe. Los navegadores modernos gestionan la accesibilidad bastante bien para esas opciones, y cada vez hay más servicios interesantes que sería genial que los usuarios pudieran integrar, pero que simplemente carecen de este tipo de accesibilidad. Gracias.

1 me gusta

¡Siempre estamos abiertos a recibir comentarios!

Se vuelve más fácil si hablamos de detalles concretos, como cuáles son los atributos exactos que deseas incluir en la lista de permitidos y para qué servicios son necesarios.

2 Me gusta

ok. En particular, pienso en Jam Systems / Jam · GitLab, que necesitaría un parámetro allow=“microphone *;” para funcionar correctamente.

Estoy teniendo el mismo problema intentando incrustar un grabador de audio H5P; la opción allow=“microphone *;” se elimina del iframe.

¿Qué se necesitaría para tener quizás una configuración de iframe que permita los permisos?

¿Podemos permitir que los administradores especifiquen qué atributos de iframe desean permitir en la lista blanca?

1 me gusta

Sería útil, pero también nos complacería que el atributo allow se incluyera en la lista blanca para todos. Actualmente tenemos problemas de reproducción de audio con reproductores de podcasts integrados de Apple y Spotify. Como otros han mencionado, el problema es que se está eliminando el atributo allow, que contiene una directiva importante encrypted-media.

1 me gusta

Dado que ya somos estrictos sobre qué dominios se pueden usar en los iframes, tener otra configuración donde establecemos la cadena allow para cada iframe y analizamos el extraño formato de contenido allow me parece un poco excesivo.

Hice una PR que simplemente permite usar cualquier cosa en el atributo allow para los iframes ya permitidos:

¿Qué opinas, @sam?

3 Me gusta

Hmm, supongo que estoy de acuerdo con esto, veo tu lógica aquí, @david ¿alguna objeción?

1 me gusta

Este cambio fue fusionado @santosguillamot @selfscrum @cogdog @gilby

3 Me gusta