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
09344×178 5.53 KB

3개의 좋아요
2

It works for me

image

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

저도 같은 문제를 겪고 있습니다. 자체 호스팅된 Matomo 설치의 개인정보 추적 설정을 임베드하는 IFRAME을 개인정보 처리방침 게시물에 삽입하고 있는데, 이 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와 같은 형식의 속성을 실제로 추가해야 합니다.

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 설정에 allow를 허용할 수 있는 기능이 추가될 수 있을까요?

11

관리자가 허용 목록에 포함할 iframe 속성을 지정할 수 있도록 허용할 수 있을까요?

1개의 좋아요
13

이 기능이 유용할 것 같지만, allow 속성이 모두에게 화이트리스트에 등록되도록 처리해 주시면 더 좋습니다. 현재 임베드된 Apple 및 Spotify 팟캐스트 플레이어에서 오디오 재생 문제가 발생하고 있습니다. 다른 분들이 지적하신 대로, 문제는 중요한 encrypted-media 지시문이 포함된 allow 속성이 제거되고 있기 때문입니다.

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개의 좋아요