Добавление виджета Trust Center в вашего агента ERC-8004

29 октября 2025

О чём этот пост

Краткое руководство «копировать-вставить», показывающее, как PR #5 добавляет виджет Trust Center в UI агента erc-8004-tee-agent, как включить его в VibeVM (env / docker-compose) и как протестировать поведение при включённом и выключенном состоянии. В этом руководстве PR используется как пример реализации, которую можно запустить в Phala Cloud VibeVM.

• Пример PR: https://github.com/Phala-Network/erc-8004-tee-agent/pull/5
• Trust Center (хостинг виджета): https://trust.phala.com
• Demo видео: https://youtu.be/xEM3oIeAVtU

TL;DR (30 секунд)

• PR добавляет плавающий виджет Trust Center + модальное окно с iframe на фронтенде и бэкенд-эндпоинт /api/trust-center-url, который возвращает настроенный URL виджета (или 404, если отключено).
• Включение через переменную окружения:

TRUST_CENTER_URL=https://trust.phala.com/widget/app/<dstack-app-id>

• Быстрое тестирование: через curl и загрузку UI приложения — виджет появляется, если включён, исчезает, если unset.

Зачем добавлять виджет Trust Center

Небольшой встроенный виджет даёт пользователям мгновенный доступ к информации о поощрениях/верификации (Trust Center) без выхода из приложения. Для агентов на TEE это улучшает UX и сигнал доверия: пользователи могут проверять аттестации, происхождение ключей и информацию о governance прямо из UI агента. Реализация является opt-in (переключение через env) и минимизирует поверхность атаки (iframe + backend echo endpoint).

Что изменилось в PR

Основные элементы PR #5:

• Бэкенд: новый маршрут /api/trust-center-url, который считывает TRUST_CENTER_URL из env и возвращает JSON { "trust_center_url": "<url>" } или 404, если не настроено.
• Фронтенд: компонент trust-center.js вставляет маленький плавающий виджет; при клике открывается модальное окно с iframe, который указывает на URL, возвращаемый /api/trust-center-url.
• Конфигурация: .env.example обновлён с placeholder TRUST_CENTER_URL; docker-compose.yml обновлён для передачи переменной окружения
• UI & CSS: минимальный стиль для плавающей кнопки и модального окна

(Посмотрите PR: https://github.com/Phala-Network/erc-8004-tee-agent/pull/5))

Быстрая настройка & фрагменты кода

.env (включение виджета)

# включить виджет Trust Center (prod/staging)
TRUST_CENTER_URL=https://trust.phala.com/widget/app/<dstack-app-id>

docker-compose.yml (передача env)

services:
  agent:
    image: ubuntu:22.04
    platform: linux/amd64
    container_name: erc8004-agent
    environment:
      - TRUST_CENTER_URL=${TRUST_CENTER_URL:-https://trust.phala.com/widget/app/${DSTACK_APP_ID}}
    ports:
      - "8000:8000"

Бэкенд (Python/Flask, концептуально)

from flask import Flask, jsonify, abort
import os

app = Flask(__name__)

@app.get("/api/trust-center-url")
def trust_center_url():
    url = os.getenv("TRUST_CENTER_URL", "").strip()
    if not url:
        abort(404)
    return jsonify({"trust_center_url": url})

Фронтенд (компонент виджета, концептуально)

async function fetchTrustUrl() {
  const res = await fetch("/api/trust-center-url");
  if (!res.ok) return null;
  const { trust_center_url } = await res.json();
  return trust_center_url;
}

async function initTrustWidget() {
  const url = await fetchTrustUrl();
  if (!url) return; // виджет выключен
  // отрисовать плавающую кнопку; клик -> модальное окно с <iframe src="{url}" sandbox="allow-scripts allow-same-origin">
}

Держите iframe в sandbox и, если возможно, используйте CSP, ограничивая origin iframe до trust.phala.com.

Развёртывание & воспроизведение (пошагово)

1. Перейдите в папку erc-8004-tee-agent и примените изменения локально в VibeVM:

cd erc-8004-tee-agent
git switch feat/trust-center

2. Включите виджет:

cp .env.example .env
# отредактировать .env -> установить TRUST_CENTER_URL=https://trust.phala.com

3. Установите зависимости и запустите локально в VibeVM:

pip install -e .
python deployment/local_agent_server.py

4. Проверьте работу бэкенда:

• Включено:

curl -sS http://<dstack-app-id>-8000.<dstack-gateway-domain>/api/trust-center-url
# {"trust_center_url":"https://trust.phala.com/widget/app/<dstack-app-id>"}

• Откройте URL в браузере и UI приложения:

5. Откройте интерфейс приложения (например, https://<dstack-app-id>-8000.<dstack-gateway-domain>):

• При установленной переменной TRUST_CENTER_URL убедитесь, что появляется плавающий виджет. Кликните по нему → откроется модальное окно с iframe на https://trust.phala.com.

• TRUST_CENTER_URL unset → виджет отсутствует

6. Проверка на staging

• Тестируйте через staging reverse proxy, чтобы CSP / frame-ancestors работали корректно.
• Endpoint /api/trust-center-url возвращает только конфигурацию сервера — никогда не принимает URL от клиента.

Чеклист безопасности & UX

• Sandbox iframe: используйте атрибут sandbox (allow-scripts только при необходимости), избегайте allow-top-navigation.
• CSP: frame-ancestors ‘self’ https://trust.phala.com и другие заголовки защиты.
• Контроль на сервере: endpoint возвращает только настроенный URL.
• Конфиденциальность: страницы Trust Center не должны перехватывать или раскрывать токены пользователей; виджет — это навигационная/доверительная поверхность, а не канал передачи данных.

Тесты

• Юнит: endpoint возвращает JSON, если установлен; 404, если пустой.
• Интеграция: виджет рендерится, если endpoint возвращает URL.
• Ручной: клик на виджет → iframe загружает trust.phala.com и отображает UI аттестаций.

Ресурсы & следующие шаги

• PR: https://github.com/Phala-Network/erc-8004-tee-agent/pull/5 — обзор, fetch, локальное тестирование
• Развёртывание VibeVM: https://cloud.phala.network/templates/VibeVM
• Trust Center: https://trust.phala.com (использовать как TRUST_CENTER_URL)
• Demo видео: https://youtu.be/xEM3oIeAVtU — пошаговое изменение и проверка

Call to action: добавьте больше доверия своим агентам и включите виджет Trust Center в VibeVM, запустив вышеуказанные тесты.

Оригинал: https://phala.com/posts/trust-center-widget-erc-8004