Iframe allow attribute not working

ميزة
1

I have added a codesandbox iframe with different attributes but Discourse is just getting the src. Should I change something in Discourse Settings? I have already allowed this iframe and it is showing, but not correctly.

This is the iframe I am trying to add:

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

But it is just rendering this:

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

So the iframe is not showing correctly:

09

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

I am also running into this problem. I would like to add a class on the IFRAME that I am embedding in my policy privacy post, which embeds the privacy tracking settings from our self-hosted Matomo installation. This would allow me to add a better border and some color to differentiate it from the rest of the privacy policy.

Despite having a class="foo" in my IFRAME element, it is being stripped out, apparently by the white-lister code above. Any chance this could be expanded to have a few more attributes allowed?

5

For security we are very strict of what HTML attributes can be rendered in our page when they come from user input.

What you can do to get that is:

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

and then target that with your CSS / JS selector:

div[data-my-special-attr="42"] > iframe {
  border-color: pink;
}
3 إعجابات
6

Thanks! That worked on both the topic page and the rendered privacy policy special page as well.

Of note if anyone else is trying this, you can’t add a class attribute, you literally need to add an attribute along the lines of data-foo-attr.

إعجاب واحد (1)
7

Rafael thanks for the statement, it clarifies my observed behaviour.
I would like to know whether you have any plans of releasing that lock for audio/video attributes of an iframe. Modern browsers manage accessibility quite good for those allowances, and there are increasingly interesting service offerings which would be great to integrate by users but just lack this type of accessibility.
Thanks.

إعجاب واحد (1)
8

We are always open to feedback!

It gets easier if we talk about specifics, like what are the exact attributes you want allowlisted and for what services they are necessary.

إعجابَين (2)
9

ok. I especially think about Jam Systems / Jam · GitLab which would need an allow=“microphone *;” parameter to work properly.

10

I am running into same issue attempting to embed an H5P audio recorder; the allow=“microphone *;” option is stripped from the iframe.

What would take to perhaps have an iframe setting to allow allows?

11

هل يمكننا السماح للمسؤولين بتحديد سمات iframe التي يريدون السماح بها؟

إعجاب واحد (1)
13

سيكون هذا مفيدًا، ولكننا سنكون سعداء أيضًا بإدراج السمة allow في القائمة البيضاء للجميع. نواجه حاليًا مشكلات في تشغيل الصوت مع مشغلات البودكاست المضمنة من Apple و Spotify. كما ذكر آخرون، تكمن المشكلة في أنه يتم تجريد السمة allow، والتي تحتوي على توجيه encrypted-media مهم.

إعجاب واحد (1)
15

نظرًا لأننا صرنا بالفعل صارمين بشأن النطاقات التي يمكن استخدامها في إطارات iframe، فإن وجود إعداد آخر نحدد فيه السلسلة allow لكل إطار iframe وتحليل تنسيق محتوى allow الغريب يبدو كثيرًا بالنسبة لي.

لقد قمت بإنشاء طلب سحب (PR) يسمح ببساطة باستخدام أي شيء في السمة allow لإطارات iframe المسموح بها بالفعل:

ما رأيك يا @sam؟

3 إعجابات
16

هممم، أعتقد أنني موافق على هذا، أرى منطقك هنا، يا ديفيد هل لديك أي اعتراضات؟

إعجاب واحد (1)
17

تم دمج هذا التغيير @santosguillamot @selfscrum @cogdog @gilby

3 إعجابات