Dodaj widget Trust Center do swojego agenta ERC-8004

29 października 2025

Co to jest ten post

Krótki, „kopiuj-wklej” przewodnik techniczny pokazujący, jak PR #5 dodaje widget Trust Center do UI agenta erc-8004-tee-agent, jak go włączyć w VibeVM (env / docker-compose) i jak przetestować zachowanie włączone vs wyłączone. Ten przewodnik używa PR jako przykładu implementacji, którą możesz uruchomić w Phala Cloud VibeVM.

• Przykładowy PR: link
• Trust Center (host widgetu): https://trust.phala.com
• Demo wideo: https://youtu.be/xEM3oIeAVtU

TL;DR (30s)

• PR dodaje pływający widget Trust Center + modalne iframe w frontendzie oraz endpoint backendowy /api/trust-center-url, który zwraca skonfigurowany URL widgetu (lub 404, gdy wyłączony).
• Włącz przez zmienną środowiskową:

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

• Szybkie testy: curl i ładowanie UI aplikacji — widget pojawia się, gdy włączony, znika, gdy unset.

Dlaczego warto dodać widget Trust Center

Mały widget w aplikacji daje użytkownikom natychmiastowy, łatwo dostępny dostęp do informacji o poświadczeniach/weryfikacji (Trust Center) bez wychodzenia z aplikacji. Dla agentów wspieranych przez TEE poprawia to UX i sygnały zaufania: użytkownicy mogą sprawdzić poświadczenia, pochodzenie kluczy i informacje o governance bezpośrednio z UI agenta. Implementacja jest opt-in (przełącznik env) i minimalizuje powierzchnię ataku (iframe + backend echo endpoint).

Co zmieniło się w PR

Kluczowe elementy PR #5:

• Backend: nowa ścieżka /api/trust-center-url, która odczytuje TRUST_CENTER_URL z env i zwraca JSON { "trust_center_url": "<url>" }lub 404, jeśli nie skonfigurowano.
• Frontend: komponent trust-center.js wstrzykuje mały pływający widget; kliknięcie otwiera modal z iframe ustawionym na wartość zwracaną przez /api/trust-center-url.
• Konfiguracja:.env.example zaktualizowany o placeholder TRUST_CENTER_URL; docker-compose.yml zaktualizowany, by przekazywać zmienną środowiskową.
• UI & CSS: minimalny styl dla pływającego przycisku i modalu.

(Zobacz PR: link)

Szybka konfiguracja & fragmenty kodu

.env (włączenie widgetu)

# włącz widget Trust Center (prod/staging)
TRUST_CENTER_URL=https://trust.phala.com/widget/app/<dstack-app-id>

docker-compose.yml (przekazanie 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"

Backend (Python/Flask, konceptualnie)

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})

Frontend (komponent widgetu, konceptualnie)

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; // widget wyłączony
  // renderuj pływający przycisk; klik -> modal z <iframe src="{url}" sandbox="allow-scripts allow-same-origin">
}

Zachowaj sandbox iframe i jeśli możliwe, wymuś CSP ograniczając origin iframe do trust.phala.com.

Deploy & reprodukcja (krok po kroku)

1. Przejdź do folderu erc-8004-tee-agent i zastosuj zmiany lokalnie w VibeVM:

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

2. Włącz widget:

cp .env.example .env
# edytuj .env -> ustaw TRUST_CENTER_URL=https://trust.phala.com

3. Zainstaluj zależności i uruchom lokalnie w VibeVM:

pip install -e .
python deployment/local_agent_server.py

4. Sprawdź działanie backendu:

• Włączony:

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>"}

• Otwórz URL w przeglądarce i UI aplikacji:

• TRUST_CENTER_URL ustawiony → widget pojawia się, klik → modal otwiera iframe.

• TRUST_CENTER_URL unset → widget nieobecny.

6. Kontrole staging

• Testuj za staging reverse proxy, aby CSP / frame-ancestors działało poprawnie.
• Endpoint /api/trust-center-url zwraca tylko konfigurację serwera — nigdy nie akceptuje URL od klienta.

Checklist bezpieczeństwa & UX

• Sandbox iframe: używaj atrybutu sandbox (allow-scripts tylko jeśli konieczne), unikaj allow-top-navigation.
• CSP: frame-ancestors ‘self’ https://trust.phala.com i inne nagłówki ochronne.
• Kontrola po stronie serwera: endpoint zwraca tylko skonfigurowany URL.
• Prywatność: strony Trust Center nie powinny przechwytywać ani ujawniać tokenów użytkowników; widget to powierzchnia nawigacyjna/zaufania, nie kanał danych.

Testy

• Jednostkowe: endpoint zwraca JSON, gdy ustawiony; 404, gdy pusty.
• Integracyjne: widget renderuje się, gdy endpoint zwraca URL.
• Manualne: kliknij widget → iframe ładuje trust.phala.com i pokazuje UI poświadczeń.

Zasoby & następne kroki

• PR: https://github.com/Phala-Network/erc-8004-tee-agent/pull/5 — przegląd, fetch, test lokalnie.
• Deploy VibeVM: https://cloud.phala.network/templates/VibeVM
• Trust Center: https://trust.phala.com (użyj jako TRUST_CENTER_URL)
• Demo video: https://youtu.be/xEM3oIeAVtU — krok po kroku zmiany i weryfikacja

Call to action: dodaj więcej zaufania swoim agentom i włącz widget Trust Center w swoim VibeVM, uruchom powyższe testy.

Oryginał: https://phala.com/posts/trust-center-widget-erc-8004