Защита внешних ссылок – подтверждение выхода и доверительный шлюз

:information_source: Краткое описание Этот компонент темы добавляет настраиваемую защиту внешних ссылок в обработанных постах. Он применяет правила, основанные на уровнях доверия, опциональные перенаправления для входа и информации, визуальные индикаторы для доверенных доменов, а также настраиваемое модальное окно подтверждения выхода.
:eyeglasses: Предпросмотр https://discourse.theme-creator.io/theme/Don/external-link-shield
:hammer_and_wrench: Репозиторий https://github.com/VaperinaDEV/external-link-shield
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

Привет :waving_hand:

Хочу поделиться компонентом темы, который добавляет детальный контроль над внешними ссылками в обработанных постах, объединяя:

  • контроль доступа на основе уровней доверия
  • защиту для анонимных пользователей
  • настраиваемое модальное окно подтверждения выхода
  • визуальные индикаторы для доверенных и неизвестных доменов

Этот компонент разработан для сообществ, где внешние ссылки могут иметь юридические, безопасностные или доверительные последствия.


:sparkles: Возможности

:gear: Настраиваемые правила уровней доверия

Все функции, зависящие от уровня доверия, полностью настраиваются через параметры темы.

Вы можете независимо включать или отключать:

  • блокировку анонимных пользователей
  • информационную замену для TL0
  • требование ручного раскрытия для TL1
  • модальное окно подтверждения выхода для более высоких уровней доверия

Это позволяет компоненту адаптироваться к самым разным политикам сообществ: от строгой защиты ссылок до минимального вмешательства в работу пользователя.

:locked_with_key: Внешние ссылки с учетом уровня доверия

Поведение внешних ссылок зависит от уровня доверия пользователя:

  • Анонимные пользователи
    • Внешние ссылки заменяются ссылкой для входа или настраиваемым URL, указанным в параметрах.
  • TL0
    • Ссылки заменяются настраиваемым перенаправлением, например, на тему, объясняющую уровни доверия, или любой другой URL, указанный в параметрах.
  • TL1
    • Ссылки требуют ручного раскрытия (клик для просмотра), после чего при клике появляется модальное окно подтверждения выхода.
  • TL2+
    • Ссылки работают как обычно, но всегда показывают модальное окно подтверждения выхода.

:door: Модальное окно подтверждения выхода

Перед выходом с форума пользователи видят модальное окно, которое:

  • Четко сообщает, что они покидают сообщество
  • Показывает полный URL назначения в тегах <code>
  • Учитывает настройку пользователя external_links_in_new_tab

Это особенно полезно для:

  • сообществ с высокими требованиями к соответствию нормам
  • предотвращения фишинга
  • обучения менее опытных пользователей


:magnifying_glass_tilted_left: Поведение на основе домена через параметры

Компонент вводит два параметра темы:

internal_domains:
  type: list
  default: ""
  description: "Домены вашего форума и CDN (например, example.com|example-cdn.com). Для них НЕ будет отображаться иконка и НЕ будет модального окна."

excluded_domains:
  type: list
  default: ""
  description: "Доверенные внешние домены (например, youtube.com|google.com). Для них будет отображаться иконка ЗАМОКА, но модальное окно/защита будут пропущены."
  • Внутренние домены
    • Рассматриваются как внутренние → нет иконки, нет модального окна
  • Исключенные (доверенные) домены
    • Отображается иконка :locked: замка
    • Пропускается блокировка по уровню доверия и модальное окно
  • Все остальные внешние ссылки
    • Отображается иконка внешней ссылки
    • Блокируются и/или требуют подтверждения в зависимости от уровня доверия

:artist_palette: Визуальные индикаторы (SCSS)

Иконки добавляются исключительно через CSS:

  • Внешние неизвестные ссылки → иконка внешней ссылки
  • Внешние доверенные ссылки → иконка замка (цвет успеха)

Это сохраняет чистоту DOM и избегает внедрения иконок через JS.

На этом скриншоте показано, как компонент визуально различает:

  • Исключенные домены: доверенные внешние ссылки (иконка замка, без подтверждения выхода),
  • Внутренние домены: внутренние ссылки (без иконки, без подтверждения выхода),
  • неизвестные внешние ссылки (иконка внешней ссылки с подтверждением выхода).

:pushpin: Сценарии использования

Этот компонент полезен, если вы хотите:

  • Защитить пользователей от небезопасных или вводящих в заблуждение внешних ссылок
  • Обучить новых пользователей перед тем, как они покинут форум
  • Обеспечить прогрессивное развитие доверия в сообществе
  • Добавить юридические/соответствующие оговорки, не нарушая пользовательский опыт
12 лайков

Фантастический компонент темы!!!

Мы действительно создали что-то похожее, где также скрываем значки количества кликов и заменяем их на значки «верифицировано»/«опасно».

Мы в основном использовали это для наших проверенных/надежных поставщиков и продавцов, с которыми у нас есть партнерство по аффилированному маркетингу.

Кроме того, наше всплывающее окно также отображает промокоды, которые управляются через редактор настроек объектов компонента темы.

3 лайка

Это отличный компонент темы! Спасибо за твою публикацию!!!

1 лайк

Но незарегистрированные посетители могут открыть внешнюю ссылку напрямую (им разрешено открывать ссылки). Так и задумано, а информация/предупреждение показывается только пользователям с определённым уровнем доверия?

1 лайк

Щелкните правой кнопкой мыши, чтобы открыть новую вкладку и пропустить проверку внешних ссылок.

Можно ли ограничить эту часть?

Это здорово, Дон, спасибо, что создал и поделился этим!

Мне интересно, почему для доверенных внешних ссылок используется значок замка? Я имею в виду, что это можно воспринять как «заблокировано» :sweat_smile:, хотя они разрешены.

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

Как всегда, просто делюсь своими мыслями и буду рад, если это поможет улучшить TC.

2 лайка

Привет :waving_hand:

Я обновил компонент темы до v2.0 :tada:: DEV: Replace CSS-drawn link icons with configurable d-icon rendering; fix anonymous blocking crashAdd files via upload - Pull Request #1 - VaperinaDEV/external-link-shield - GitHub

В этом обновлении:

  • Заменены иконки mask-image в SVG, поддерживаемые вручную, на настоящие элементы <svg class="d-icon">, которые рендерятся через iconHTML() и вставляются рядом со ссылками с помощью secure-links.js

  • Добавлены настройки:

    • exit_confirmation_continue_icon
    • external_link_icon,
    • trusted_link_icon,
    • external_link_icon_color,
    • trusted_link_icon_color,
    • link_icon_position (до/после)
  • Исправлено падение, когда enable_anonymous_blocking отключено: currentUser.trust_level читался для анонимных пользователей (null), что вызывало ошибку и приводило к тому, что исходный <a> оставался необработанным/незащищенным; теперь анонимные посетители получают четко определенное прохождение (иконка + необязательное модальное окно подтверждения, без ограничения по уровню доверия)


> ./support --coffee :heart:

2 лайка

Предложение для v2.1: Использование типа настройки иконки

4 лайка

Круто, спасибо, поменял. :slightly_smiling_face:

3 лайка

Как я мог не знать о существовании этого компонента? Большое спасибо за поддержку, я его протестирую :heart_eyes:

2 лайка

Благодаря последним и быстрым улучшениям я могу подтвердить, что этот компонент Theme обрабатывает все сценарии использования, с которыми мы сталкивались при работе с внешними ссылками.

Респект великому Дону!

1 лайк

При предпросмотре темы в модальном окне «Предпросмотр темы» клик по изображению для его увеличения (открытие лайтбокса) также вызывает модальное окно «Подтверждение выхода» из компонента «Защита внешних ссылок» — хотя эти ссылки на изображения не являются внешними. Это локально загруженные изображения, которые обслуживаются с нашего собственного домена/CDN, а не подгружаются с внешних ресурсов.

Домен CDN отличается от домена вашего форума? Если да, вам также необходимо добавить домен CDN в настройку internal_domains.

2 лайка

Я добавил свой домен в настройку internal_domains, и это решило проблему.

2 лайка

Интересно, можно ли добавить эту замечательную функцию к ссылкам в боковой панели?

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

Меня интересует этот вопрос, потому что я пока не до конца понимаю сценарий использования.

Боковая панель уже позволяет назначать иконку для каждой ссылки, а ссылки, добавленные администратором, уже проверены. Пользовательские разделы боковой панели в этом плане похожи: пользователь явно добавляет ссылки, которые он уже знает и которым доверяет.

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

Ваша основная цель — просто визуально показать, что ссылка в боковой панели ведёт на внешний сайт, используя тот же стиль/иконку, что и у компонента?

1 лайк

Спасибо за рассмотрение этого вопроса. Да, именно это поведение и требуется: сообщить пользователям, что они перейдут на новую страницу.