Как функционирует «медиаэлемент» в новом редакторе Хабра?

Как медиаэлемент в редакторе Хабра определяет, какие ссылки на <i>codepen</i> и <i>codesandbox</i> преобразовывать в <i>iframe</i>, а какие оставлять в виде обычных ссылок (например, при вставке ссылки на google.com)? <br/><br/> Использует ли он специальные теги в head для этого или существует белый список доменов? <br/> Возможно ли загрузить ссылку на собственный сервис и отобразить его в <i>iframe</i>?
  • 11 января 2025 г. 19:43
Ответы на вопрос 1
Медиаэлемент в новом редакторе Хабра работает на основе распознавания и обработки ссылок на определенные внешние сервисы, такие как CodePen и CodeSandbox. Он анализирует вставляемые ссылки и принимает решение о том, нужно ли превращать их в `iframe` или оставить в виде обычных ссылок, на основании нескольких факторов.

1. **Белый список доменов**: Обычно такие системы используют белый список доменов. Это значит, что редактор имеет заранее определенный набор разрешенных доменов (например, `codepen.io`, `codesandbox.io`), и если вставленная ссылка принадлежит к этому перечню, она будет преобразована в `iframe`. Если домен не присутствует в списке, с ним ничего не будет сделано — он останется обычной ссылкой.

2. **Обработка ссылок**: При вставке ссылки редактор может использовать регулярные выражения или другие методы парсинга для определения, какие именно ссылки соответствуют нужному формату. Это позволяет точно выделить нужные части URL и решить, как с ними поступить.

3. **Использование тегов в head**: Обычно это не является необходимым для определения медиаэлементов. В большинстве случаев для обработки внешних ссылок не используются специальные метатеги в `head`. Главное, чтобы ссылки были правильно распознаны на уровне логики редактора.

4. **Поддержка собственных сервисов**: В общем случае, чтобы поддерживать вложение собственного сервиса в `iframe`, этот сервис должен быть добавлен в белый список редактора. Если это не так, то придется прибегать к дополнительным мерам, например, редактированию кода редактора или обращению к разработчикам с предложением добавить поддержку вашего сервиса.

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