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

…Side #project? Sento che mi mancava un po’ lo spirito di esso, negli ultimi tempi, non andrò a mentire. Però non.,. non mi ricordo più perché mi serviva questa cosa che ho fatto oggi, uffa. Il cervellino vuole scrivere varietà miste di codice senza alcun motivo, forse. O forse è perché… non mi pare ci sia alcun sito, con una sola interfaccia sempre uguale, per visualizzare e ricondividere #video da infinite piattaforme: ☝️

• Figa la vista video in Bing e DuckDuckGo, ma entrambe non trovano i video da URL (anche quando nei risultati normali esce, lol, ma in ogni caso è problematico), e poi:
  • Quella di Bing è tutta castrata su mobile, e ha un feeling un po’ scattoso;
  • Quella di DuckDuckGo non prevede permalink (per la condivisione dei video ricercati).
• Belli tutti i #frontend open source, ma, a parte che quelli ben fatti per i video supportano sempre solo #YouTube, puntualmente si spaccano e bisogna fare il salto tra istanze, i link vecchi tendono a morire, ecc…
  • Tra l’altro, tutti che reimplementano sempre il componente player, quando quello funziona abbastanza bene, ed è invece tutto il resto del sito di condivisione video di turno che da le rogne.

Una volta, almeno per mostrare i video soltanto di YouTube senza bloat di mezzo c’era ViewPure; anche se dall’altro lato era estremamente scarno, dando solo un iFrame del video richiesto, e mi pare qualche informazione, proprio meh. Poi sparì nel nulla. E io ho nel frattempo trovato purify-video.github.io, con la stessa filosofia ma ancora più meh, e per giunta mi sembra senza tema scuro… abbastanza ovvio che, coi requisiti di sopra, comunque queste opzioni non sono adatte. 🥱️

Insomma, mi sono inventata la cosa mia, quindi. Copiando la filosofia, ho scelto il nome ViewUltra, perché… tipo #ViewPure, ma potenziato, perché voglio anche la ricerca integrata, i video correlati, e più dettagli possibili, minimizzando il bisogno di passare al sito originale del contenuto. Non potendo copiare codice, però, uso a scrocco le API private di Bing per far funzionare queste ultime funzioni… e io devo solo pensare a impaginare iFrame originali e metadati estratti. Non so se farò un dominio dedicato, ma per ora è su https://hlb0.octt.eu.org/ViewUltra.php! 🥰️

Effetto collaterale figo di guardare media in questo modo è che vengono, a dire il vero, bypassati molti ratelimit e muri di login, da quei siti abbastanza stupidi da implementarli senza ritegno in primo luogo… ma poi per fortuna finire a non applicarli per i link di #embed. In particolare, TikTok, che ha il sito desktop che chiede sempre login, e quello mobile che è estremamente spaccato, funziona una favola qua dentro. Di contro, però, per #TikTok non so come estrarre i metadati per mostrarli bellini nelle altre parti della pagina: non li mette con i tag #HTML standard, offusca tutto. 😵‍💫️

Sul lato tecnico: questo robino supporterebbe la visualizzazione di contenuti tramite #iFrame da qualsiasi fonte, specificando l’URL… ma nella pratica devo andare ad implementare in modo specifico l’handling per ogni piattaforma, perché per far andare l’embedding serve quasi sempre un endpoint secondario (che va conosciuto a priori, quindi non può essere estratto automaticamente), e perché (per motivi di sicurezza) sul backend ho una whitelist di domini che il server può contattare per estrarre #metadati e replicarli nell’HTML. Piano piano implemento tutti gli URL per i top siti mondiali… 👻️

https://octospacc.altervista.org/2024/10/01/ultravisiocto/

#embed #frontend #HTML #iFrame #metadati #PHP #project #TikTok #video #ViewPure #ViewUltra #web #WIP #YouTube

[Перевод] Как использовать YouTube для кражи файлов

Занимаясь исследованиями безопасности, я часто сталкиваюсь со странными причудами и поведением, которые могут пригодиться, разве что, в качестве весёлого фокуса на вечеринке. Тем не менее мне нравится их отслеживать. Кто знает, возможно, однажды что-то из этого окажется как раз тем самым недостающим элементом.

https://habr.com/ru/companies/ruvds/articles/845876/

#ruvds_перевод #безопасность #youtube #iframe #open_redirect #google

Qualcuno avrebbe sperato niente post stavolta? E invece no; semplicemente, c’era di mezzo la programmatio. Mi trovo così ancora una volta (altre volte in cui è successo, è successo, ma non ho scritto qui…) ad aggiornare #FramesBrowser, #webapp che manco a farlo apposta tocco precisamente ogni 6 mesi. Lavoro raro!!! 🤫️

Stavolta il problema era: devo catturare screenshot di certe pagine #web, per inviarli a parti (tradotto: i post che pubblico su Pixelfed, per fare lo spam bene, coff coff), ma… Se non le facessi ogni volta precise (voglio la larghezza uguale al letterale pixel) starei male dentro; peccato che, per fare ciò, devo impazzire col ridimensionare la finestra del browser precisimamentissimamente, su desktop. 🙄️

Risolverei facendo direttamente da mobile? Forse si, dato che lo schermo del telefono non si allarga o restringe da un giorno all’altro, però è palloso… e non ci ho comunque pensato prima di scriverlo adesso. Quindi, è molto meglio spendere delle ore per aggiungere al mio programma il ridimensionamento (a occhio e a numero) degli iFrame mostrati, e conseguentemente il tastino per fare #screenshot degli stessi. 😩️

Ovviamente, nella sua estrema saggezza, il Web non offre API per fare schermate di parti del DOM, ma, per fortuna conoscevo una libreria chiamata html2canvas, che usa della palese magia nera per aggirare questa mancanza. È figa, fa non so come il rendering “a mano” di tutte le cose, e le piazza appunto in un elemento Canvas, che invece i #browser permettono direttamente di trasformare in immagine raster. 🤓️

Nella mia estrema fortuna però, questa libreria non gestisce autonomamente gli #iFrame, quindi via ad implementare codice per iniettarla ed azionaria! Lo farei proprio tutti i giorni!!! 🥰️ (Estremamente divertente soprattutto la parte dove non posso iniettare codice arbitrario dentro la pagina caricata da un dominio, quindi la app si deve a mano scaricare l’HTML per patcharlo e caricarlo come data URL ed è un casino che non funzionerà mai col 100% dei siti mamma mia aiuto.)

Altre magagne? Avoja! Innanzitutto, o gli faccio in qualche modo caricare tutte le immagini della pagina con CORS (che vuol dire, in qualche modo, forzare l’uso del proxy in un punto di codice non mio), o altrimenti il #Canvas risulta tainted, e non può essere scaricato in automatico con .toDataURL()… ma non è la fine del mondo, perché posso banalmente piazzarlo a schermo, e a quel punto c’è sempre il menu contestuale del browser per salvare un PNG. E… grande cacca: con questa dipendenza da 200KB, non solo tutta la app è più lenta a caricare, ma anche le pagine nei frame (per via di tutta la codifica URL che #mannaggia). 🦧️

https://octospacc.altervista.org/2024/09/14/framionavigator-per-le-fotonze/

#browser #Canvas #FramesBrowser #iFrame #JavaScript #Mannaggia #screenshot #web #webapp

Claude.aiのArtifactsのプレビューは一体どういう仕組なの？
https://qiita.com/moritalous/items/a14a87b3653c348c758c?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #HTML #iframe #Artifacts #claude

How to Easily Embed iFrame Code in WordPress? https://www.youtube.com/watch?v=kpiJ2WcXX6U 💡🎬🚀 #Guide #Embed #iFrame #Code #WordPress

My friend the brilliant Terence Eden has been working out how to fix the problem of decaying Twitter embeds – more and more people are finally leaving the Musk propaganda machine that X has become1, and specifically, because he is against <iframe>s, which, I can understand. He’s published a script on GitHub that will allow you to convert Tweet IDs into semantic HTML with a screenshot fallback, which are better embed options at this point. Added bonus is that it also removes the tracking back to X.

OK gang! This is ready for you to test.

python tweet2html.py –css 1234

That will take a Twitter ID and return HTML and CSS for you to embed in your website with no calling back to Twitter.

Features:
🗣 Avatars inlined as Base64 WebP
📸 All attached photos inlined
🎥 Video poster inline, <video> to original source
🔗 Hyperlinks don't use t.co
#️⃣ Hashtags and @ mentions linked
🕰 Semantic time
♥ and 🗨 counts

Try it out at https://github.com/edent/Tweet2Embed

Feedback and pull requests very welcome!

— Terence Eden (@Edent) 2024-08-10T17:20:46.457Z

I deleted all of my accounts on that platform last year, and it has left a number of holes in my WordPress blog where I’d embedded content from over there.

Unfortunately, this has had two other results:

• I cannot use the result from Tweet2Embed to replace my old embeds, because they are no longer there for the script to go and rehydrate into those nice semantic HTML versions.
• my old account name has been taken by someone else, and that is not one of the other very fine Andy Pipers that I know, but a bit of a strange individual AFAICT. This was always a risk of completely deleting the account and not maintaining the existence of the username, but I really wanted to be completely off that platform, for Reasons.

When I deleted my accounts I knew that these were going to be issues but I simply ignored the embed issue2. As and when I can, I’m now going through older posts to look for those embeds (I think the “best” ? way seems to be searching for “[tweet” in the WordPress editor to look for posts that include the old shortcode). I do have my content archived and re-hosted on a GitHub Pages site, so I can at least drop the Tweet IDs in to that, and get the text of the original post. I’m going to manually screenshot and update the back posts as best I can.

Working on it! (apologies for any weirdly-delayed pingbacks as I update old posts…)

I noted that Terence also plans to make something similar for Mastodon embeds to avoid the default <iframe> option – I’m using Stefan Bohacek’s Fediverse Embeds plugin for WordPress to improve them on this blog already. YMMV!

1. If you’re on X, the fact that Musk is apparently posting direct attacks on the UK government and false information about recent events here, is yet another reason for you to leave it. Get out and start fresh somewhere better. I recommend Mastodon; Threads and Bluesky are alternatives you can also get value from; I’m on all three. ↩︎
2. Another embed decay issue is that the new owners have gutted the old content of things like the TwitterDev YouTube channel, so my videos from there are now no longer visible; I did manage to save a couple of those for myself to re-host, and I’m also going to try to re-embed those in older posts here. I have a personal policy now to always require a copy of videos of my talks, so that I can have them for the future in case an event chooses to delete older content. ↩︎

Like it? Share it -

• Click to share on Mastodon (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

https://andypiper.co.uk/2024/08/11/fixing-digital-holes/

#archive #blog #content #embed #github #Historical #HTML #iframe #Twitter #YouTube

MV3 Chrome extension with iframe, which embeds any site

https://safinaskar.writeas.com/mv3-chrome-extension-with-iframe-which-embeds-any-site

#chrome #chromium #extension #webextension #iframe