[Перевод] Document PiP vs window.open

Всем привет! Меня зовут Максим Иванов . Сегодня я хотел бы провести небольшой исторический экскурс и объяснить, почему Document Picture-in-Picture — это не просто способ отображать видео в формате « картинка в картинке », а новое и любопытное API, которое потенциально может заменить привычный всем window.open. Возможность выводить видео в режиме PiP появилась еще в сентябре 2018 года в Chrome 69. С тех пор прошло более семи лет активного тестирования и развития. В 2019 году подобный механизм появился в Safari, а к 2020-му — и в Firefox. Теперь, когда почти каждый браузер умеет открывать видео в отдельном плавающем окне, возникает логичный вопрос: могут ли браузеры с той же легкостью открывать в отдельном окне интерактивный HTML-контент, а не только видео? И если да, то каким образом? Давайте поговорим об этом ниже.

https://habr.com/ru/articles/953340/

#pip #document #js #iframe #DocumentPictureInPicture #web #web10 #web20 #open

Są takie chwile w programowaniu stron internetowych, kiedy trzeba umieścić w nich pliki PDF. Jak się okazuje, można to zrobić na aż co najmniej trzy różne sposoby.

#programowanie #WebDev #iframe

https://jsdev.space/howto/embed-pdf-web/

Гайд по архитектуре браузерных песочниц: как работает изоляция JavaScript-кода

Всем привет! Последние несколько месяцев я работаю над пет-проектом — интерактивной образовательной платформой для изучения Web Audio API и принципов обработки и синтеза цифрового звука. На платформе пользователи смогут решать задачи, программируя на JavaScript прямо в браузере. Эти программы выполняются в изолированной среде — песочнице , где пользовательский код не может повлиять на работу самой платформы. Когда я начал реализовывать песочницу для своего проекта, я быстро понял, что это куда сложнее, чем кажется на первый взгляд. Я перепробовал разные подходы и убедился, что тема изоляции кода в браузере далека от очевидной, а большинство материалов в сети рассматривают её лишь поверхностно. Из моих исследований и экспериментов выросла эта статья — подробный разбор того, как устроены песочницы в браузере и какие архитектурные принципы и нюансы безопасности лежат в их основе. Устроиться поудобнее и погрузиться в тему

https://habr.com/ru/articles/965830/

#песочница #sandbox #sandboxing #изоляция #iframe #realm #shadowrealm #архитектура_песочниц #изоляция_кода

Ich habe gerade ein #Video von meinem #Peertube #Server in einen Artikel meiner #Joomla #Webseite per #iframe eingebunden.

Grundsätzlich funktioniert es, aber man muss 2-3 mal auf Play drücken, bevor das Video wirklich läuft. Davor kommt nach Drücken auf Play immer wieder der Play-Button und nicht der Pause-Butten (der erscheint, während/wenn das Video abgespielt wird). Es wird nach Drücken von Play also ein paar mal sofort wieder gestoppt/pausiert. 🤔🤷‍♂️🙈

Ist das nur bei mir so?
https://www.crazy-to-bike.de/blogs/98-event-blog/552-trailbiken-auf-dem-tiersteintrail-09-09-2025.html

Hat jemand eine Ahnung, woran das liegen könnte?

Bitte #boosten für mehr Reichweite.

#Fedipower

Here's an #innovation for the 🏆 ages: a website that lets you check if another website can be stuffed into an #iframe. 🌟 Because who wouldn't want to spend their time ensuring their page can be a digital nesting doll? For those who find the complexities of #CSP and X-Frame-Options riveting, this groundbreaking tool is your invitation to the party 🎉.
https://iframetest.com/ #webdevelopment #tools #HackerNews #ngated

Iframetest.com

https://iframetest.com/

#HackerNews #Iframetest #Iframe #Testing #Web #Development #Technology #Tools

Unlock Odoo Iframe Widget magic! Embed content easily in 7 steps. No code needed! Boost your website's power now! #Odoo #Iframe #WebsiteDevelopment #OdooWidget

https://teguhteja.id/odoo-iframe-widget-steps/?utm_source=mastodon&utm_medium=jetpack_social

I am snapping and trapping but not really near doing some sort of boilerplate template, just going through process of looking at these systems is educational. i have not made first hugo site, working on it #template #portal #iframe

C'est rigolo quand même parce que Ko-Fi permet de définir un objectif de financement, mais leur plugin WordPress ne permet que d'intégrer un bouton de soutien et pas de partager la barre de progression de l'objectif.

Par contre, ils donnent accès à une barre de progression sous forme d'overlay Twitch à l'aide d'une URL.

Et les overlay Twitch dynamiques… c'est des pages web. Qu'on peut donc intégrer à son site sous forme d'iframe.

Ce qui fait que… J'ai ajouté un "overlay Twitch" sur mon blog. 🙃

#Ko_fi #KoFi #WordPress #Twitch #HTML #iframe

Инкапсуляция UI на примере чат-виджета

Привет, Хабр! Меня зовут Дмитрий Переверза, я Frontend Team Lead в компании Just AI. В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.

https://habr.com/ru/companies/just_ai/articles/911594/

#ui #инкапсуляция #чатбот #виджет #виджеты_сайтов #iframe #организация_кода

Jmix/Spring-приложение в IFrame

Предположим, у нас появилась задача встроить какой-то функционал, реализуемый системой на Jmix/Vaadin/Spring на другой сайт или в веб-приложение. Сейчас существует большое количество статических генераторов и других систем управления содержимым, где у разработчика есть доступ только к фронтенд-части. Если это не портальная система, обычным решением в таких случаях будет использовать встраивание через IFrame. Для того чтобы приложение с интерфейсом на Vaadin открывалось в айфрейме за пределами локалхоста, ему требуется включенная поддержка cookie, что по современным стандартам безопасности возможно только если и сайт и приложение, находящиеся на разных доменах, работают по протоколу HTTPS доверенного уровня и для сессионных кук включен параметр Secure и выключен SameSite. Поэтому нам придется немного заморочиться, что бы это все заработало в Spring Boot-приложении даже если речь идет о тестовых средах.

https://habr.com/ru/companies/haulmont/articles/909344/

#iframe #iframeприложения #java #spring #vaadin #jmix

I give up! I tried everything I could think of to put the embedded (in an #iframe) #vhx / #VimeoOTT video player in #fullscreen #programatically (without a click or keypress) in a #userscript via #FireMonkey and either the script is blocked by #CORS or the fullscreen request fails or nothing happens.
I have tried adding the script to the website (www.dropout.tv), to the iframe (embed.vhx.tv with @allFrames), using the player API or vanilla JavaScript, directly in the userscript or by appending a <script> element.
The furthest I got was running the focus() method of the iframe so I can press "f" without having to click on the player first.

I don't know if that's due to #FireMonkey or #Firefox's underlying #UserscriptsAPI but it seems like a #userscript will be prevented from accessing the content of an #iframe by the third party domain #CSP even though a script element added to the page DOM by the same userscript can access that very same iframe content. 😕

#webdev

«Danil OS» или локальные веб интерфейсы

Эта статья расскажет о моём эксперименте по оптимизации моего рабочего пространства в macOS. Примерно 10 лет назад я придумал одну идею — канбан-рабочий стол. Я понял, что иконки на рабочем столе были крутыми… в 1984 году. и втом числе поэтому 1984 не был как 1984) Но камон, за 40 лет кроме виджетов почти ничего не изменилось. Марк… 10 лет назад, узнав о системе канбан, я начал пользоваться Illustrator’ом и рисовал себе 4 колонки прямо на рабочем столе. Поверх них размещал стандартные стикеры, полностью отключив иконки рабочего стола. Прошло много лет. Я немного выучил веб, и теперь у нас есть опенсорсный софт, который помог мне сделать то же самое, но уже более серьёзно. Во-первых, Plash — программулька, которая ставит Chrome вместо бэкграунда. Я также сделал на Python с FastAPI и Jinja и запустил себе уже настроенный канбан-рабочий стол. Но как вы понимаете, на этом дело не кончилось. Гуляя по интернету, я нашёл несколько исходников с открытыми лицензиями, которые я использовал в своём проекте. Во-первых, Future Sticky Navigation with Glass Effect -от Benjamin Koehler. Это моя база: вертикальный слайдер с красивыми эффектами. Тут тоже пришлось внести доработки: — переход на православный CSS вместо Sass, — реализация snapping и закрытия при нажатии на backdrop, — добавление динамических ссылок в href и фреймов через Пока что всё храню в LocalStorage и реализовал возможность выгрузки и загрузки списка айфреймов с их ссылками и названиями. Потому что к этому моменту у меня уже было больше пяти локальных серверов, и я решил обойтись без бэкенда там, где это возможно.

https://habr.com/ru/articles/904598/

#desktop #macos #javascript #nextjs #python3 #fastapi #mongodb #lottie #iframe #webgl

Uno de los problemas mas frecuentes en wordpress, son las vulnerabilidades causadas por plugin. Estos pueden ser vulnerables, obsoletos o directamente maliciosos

No quisiera llamar a funa a este plugin pues me resulta súper útil y no se si haya algo documentado. De hecho, he buscado tratando de ver algo sobre el tema, pero aparte de no saber ni donde empezar a buscar, en lo poco que he visto, nadie parece hablar del tema.

Análisis de comportamiento del plugin

Tras una revisión de rutina, tuve curiosidad sobre cuales dominios llama mi sitio interlan.ec al momento de cargar pues mi sitio no destaca por su velocidad. Quiero optimizar todo lo que pueda para que esto no sea un fastidio de navegar y el llamado a múltiples dominios puede hacer irregular el tiempo de carga y entre los dominios que cargan, que son los de google, por el Sitekit y los de Jetpack, del que me quisiera deshacer pero no todavía, aparecen dos que nada tienen que ver con mi sitio. photoboxone.com y rarathemes.com (que no pongo con hipervinculos para que al menos por mi culpa, no terminen allí)

Dado que no tienen nada que ver en mi sitio y están cargando su propio js, css y hasta fuentes, busqué en la fuente para ver que parte los carga.

Como se puede ver, es un iframe incrustado en la imagen del logo de mi sitio. No estoy seguro de que gana con esto, pues no se ve por ningún lado, pero sin duda es un caso de backlinking, que dirige a su propia pagina web, la cual esta repleta de anuncios.

Conclusiones

Pregunté en un foro y me dijeron que es un comportamiento normal de algunos plugins, que tratan de monetizar de alguna forma, pero considero que es inapropiado hacer cosas a espaldas de los usuarios. Me dijeron también que este comportamiento podría estar en algún termino y condiciones de uso, pero al no encontrarlo, creo que solo me limitaré a desinstalarlo pues, es una herramienta que solo necesito de forma muy puntual.

https://interlan.ec/2025/04/25/seguridad-comportamiento-no-deseado-del-plugin-smtp-mail/

#backlinking #iframe #plugins #seguridad #wordpress

Exacerbating Cross-Site Scripting: The Iframe Sandwich

Demonstrates how embedding a vulnerable subdomain in an iframe can escalate XSS attacks to the main site context.

https://coopergyoung.com/exacerbating-cross-site-scripting-the-iframe-sandwich/

#XSS #Web #iframe

Today Im mostly looking at how to make the #ViewerJS #iframe at least partially responsive (have a better height re screensize maybe). So Im staring at SO a lot for hack ideas. This is their AI answer warning. Very interesting considering 'AI' takes everything we make but we don't want anything it gives back, at least not in the main tech forums. Uni's should take note of this, but probably dont even know.

#ai #GenAI #StackOverflow #academia #academicchatter

Переключение на элемент iframe на примере видео-плеера

Всем снова здравствуйте! С момента выхода моей предыдущей статьи прошло уже немало времени, поэтому пора разобраться со следующим аспектом тестирования встроенных элементов iframe. В прошлый раз мы рассмотрели, как можно без особых проблем выкатить рабочую страницу на GitHub Pages и попробовать встроить в страницу, например, плеер. Теперь самое время убедиться, что плеер работает и такую проверку можно автоматизировать!

https://habr.com/ru/articles/883040/

#iframe #селекторы #cypress #qa_automation #qa_testing

#Development #Guidelines
HTML iframes to embed arbitrary content · Why general page content is best kept out of iframes https://ilo.im/161lsm

_____
#Accessibility #ScreenReader #Keyboard #Scrolling #Iframe #Content #WebPage #WebDev #Frontend #HTML

#Development #Approaches
‘include-iframe’ web component · Versions of ‘HTML includes’ have evolved into a new take https://ilo.im/160elk

_____
#HtmlIncludes #Iframe #WebComponent #ProgressiveEnhancement #Browser #WebPerf #WebDev #Frontend #HTML #JavaScript