Атрибут allow для iframe не работает

Я добавил iframe из CodeSandbox с различными атрибутами, но 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 отображается некорректно:

3 лайка

У меня всё работает

image

На всякий случай, вы добавили URL iframe (https://codesandbox.io/embed/codesandbox-frontity-rnclp) в белый список? Если нет, найдите в настройках сайта параметр «allowed iframes».

1 лайк

У меня есть этот домен: https://codesandbox.io/. Разве этого недостаточно? Я нашел этот код в Discourse, где разрешены только некоторые атрибуты iframe:

Если я добавлю атрибуты height и weight, iframe будет работать нормально, но я хотел бы разрешить и другие атрибуты.

Есть ли способ разрешить все iframe с codesandbox? Я думал, что достаточно указать только домен.

Спасибо!

РЕДАКТИРОВАНИЕ:

Я пробовал добавлять этот URL в белый список, но это тоже не сработало.

3 лайка

Я тоже столкнулся с этой проблемой. Я хотел бы добавить класс в IFRAME, который я встраиваю в свой пост о политике конфиденциальности, где встроены настройки отслеживания конфиденциальности из нашей самодостаточной установки Matomo. Это позволило бы мне добавить более заметную границу и некоторые цвета, чтобы отделить его от остальной части политики конфиденциальности.

Несмотря на то, что в элементе IFRAME у меня есть class="foo", он удаляется, apparently кодом белого списка выше. Есть ли шанс, что этот список можно расширить, разрешив несколько дополнительных атрибутов?

В целях безопасности мы очень строго относимся к тому, какие 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 лайка

Спасибо! Это сработало как на странице темы, так и на специальной странице с политикой конфиденциальности.

На заметку всем, кто пытается это сделать: нельзя добавлять атрибут class, нужно буквально добавить атрибут вроде data-foo-attr.

1 лайк

Рафаэль, спасибо за разъяснение, оно прояснило наблюдаемое мной поведение.

Хотел бы узнать, планируете ли вы снять ограничение для атрибутов аудио/видео в iframe. Современные браузеры достаточно хорошо управляют доступностью для этих элементов, и появляется всё больше интересных сервисных предложений, которые было бы отлично интегрировать пользователям, но им не хватает именно такого уровня доступности.

Спасибо.

1 лайк

Мы всегда открыты для обратной связи!

Всё становится проще, если мы говорим о конкретных деталях: например, какие именно атрибуты вы хотите добавить в белый список и для каких сервисов они необходимы.

2 лайка

Хорошо. Я особенно думаю о Jam Systems / Jam · GitLab, для правильной работы которой необходим параметр allow=“microphone *;”.

Я сталкиваюсь с той же проблемой при попытке встроить аудио-рекордер H5P: опция allow=“microphone *;” удаляется из iframe.

Что нужно сделать, чтобы, возможно, добавить настройку для iframe, позволяющую разрешать такие параметры?

Можем ли мы разрешить администраторам указывать, какие атрибуты iframe нужно включить в белый список?

1 лайк

Это было бы полезно, но мы также были бы довольны, если бы атрибут allow был добавлен в белый список для всех. В настоящее время мы сталкиваемся с проблемами воспроизведения аудио во встроенных плеерах подкастов Apple и Spotify. Как уже отмечали другие, проблема заключается в том, что атрибут allow удаляется, хотя он содержит важную директиву encrypted-media.

1 лайк

Поскольку мы уже строго контролируем, какие домены могут использоваться в iframe, наличие ещё одной настройки, где мы задаём строку allow для каждого iframe и разбираем странный формат содержимого allow, кажется мне излишним.

Я создал PR, который просто разрешает использовать любые значения в атрибуте allow для уже разрешённых iframe:

Что вы думаете, @sam?

3 лайка

Хм, думаю, меня это устраивает, я понимаю твою логику здесь, @david, есть возражения?

1 лайк

Это изменение было слито @santosguillamot @selfscrum @cogdog @gilby

3 лайка