INTEGRITY Dokumentace

← Cloudflare One / cloudflare-one / tutorials

Vytvoření a zabezpečení AI agent wrapperu pomocí AI Gateway a Zero Trust

Tento návod vysvětluje, jak používat Cloudflare AI Gateway a Zero Trust k vytvoření funkčního a zabezpečeného webového obalu pro AI agenta. Administrátoři Cloudflare Zero Trust mohou přístup k tomuto obalu chránit pomocí Cloudflare Access. Navíc můžete vynutit Zásady Gateway řídit, jak vaši uživatelé komunikují s AI agenty, včetně spouštění AI agentů v izolovaném prohlížeči s Browser Isolation, vynucující Data Loss Prevention profily, které zabraňují uživatelům sdílet citlivá data, a skenování obsahu, které brání odpovědím AI agentů porušujícím interní firemní zásady. Vytvoření wrapperu pro AI agenta je také účinný způsob, jak vynutit kontrolu tenantu, pokud máte enterprise plán u konkrétního poskytovatele AI, jako je ChatGPT Enterprise.

Tento návod používá ChatGPT jako příklad AI agenta.

Než začnete

Ujistěte se, že máte:

1. Vytvořte AI Gateway

Nejprve vytvořte AI Gateway pro řízení své AI aplikace.

  1. V Cloudflare dashboard ↗, přejděte do AI Gateway stránce.

    Přejděte na AI Gateway ↗

  2. Vyberte Create Gateway.

  3. Pojmenujte gateway.

  4. Vyberte Vytvořit.

  5. Nakonfigurujte požadované možnosti brány.

  6. Připojte svého poskytovatele AI a proxovat dotazy do vámi zvoleného AI agenta pomocí vaší AI gateway.

  7. (Volitelné) Zapněte Autentizovaná Gateway. Funkce Authenticated Gateway zajišťuje, že vaši AI gateway lze volat pouze zabezpečeně, a to vynucením tokenu ve formě hlavičky požadavku cf-aig-authorization.

    1. Přejděte na AI > AI Gateway.
    2. Vyberte svou AI Gateway a poté přejděte na Nastavení.
    3. Zapněte Autentizovaná Gateway, poté vyberte Potvrdit.
    4. Vyberte Vytvořit ověřovací token, pak vyberte Vytvořit autentizační token AI Gateway.
    5. Nakonfigurujte token a zkopírujte jeho hodnotu. Při vytváření Workeru jej budete muset předávat při volání AI gateway.

Další informace najdete v tématu Začínáme s AI Gateway.

2. (Volitelné) Použijte Guardrails k blokování nebezpečného nebo nevhodného obsahu

Guardrails je vestavěná bezpečnostní funkce AI Gateway, díky které Cloudflare dokáže na základě vybraných kategorií rozpoznávat nebezpečný nebo nevhodný obsah v promptech a odpovědích.

  1. V dashboardu Cloudflare přejděte na AI Gateway stránce.

    Přejděte na AI Gateway ↗

  2. Vyberte svou AI Gateway.

  3. Přejděte na Guardrails.

  4. Zapněte Guardrails.

  5. Vyberte Změna nakonfigurovat kategorie, které chcete filtrovat jak pro prompty, tak pro odpovědi.

3. Sestavte Worker pro obsluhu wrapperu

1. Vytvořte Worker

Chcete-li Worker sestavit, musíte zvolit, zda ho chcete sestavit lokálně pomocí Wrangler nebo vzdáleně pomocí dashboard ↗.

  1. V terminálu se přihlaste ke svému účtu Cloudflare:

    wrangler login

  2. Inicializujte projekt lokálně:

    mkdir ai-agent-wrapper
cd ai-agent-wrapper
wrangler init

  3. Vytvořte konfigurační soubor Wrangler:

    name = "ai-agent-wrapper"
main = "src/index.js"
compatibility_date = "2023-10-30"

[vars]
# Add any environment variables here

  4. Přidejte klíč API svého poskytovatele AI jako secret:

    wrangler secret put <OPENAI_API_KEY>

Nyní můžete Worker sestavit pomocí index.js soubor vytvořený Wranglerem.

  1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

    Přejděte na Workers & Pages ↗

  2. Vyberte Vytvořit.

  3. V Workers, vyberte Hello world šablona.

  4. Pojmenujte worker a poté vyberte Nasadit.

  5. Vyberte svého Workera a poté přejděte na Nastavení kartě.

  6. Přejděte na Proměnné a tajné klíče, pak vyberte Přidat.

  7. Vyberte Secret jako typ a pojmenujte svůj secret (například OPENAI_API_KEY), a zadejte hodnotu klíče API vašeho poskytovatele AI do Hodnota.

Nyní můžete Worker sestavit v online editoru kódu výběrem Upravit kód na stránce vašeho Workeru.

2. Sestavte Worker

Následuje příklad úvodního Workeru, který obsluhuje jednoduché uživatelské rozhraní umožňující interakci s poskytovatelem AI za AI Gateway. Tento příklad používá jako poskytovatele AI OpenAI:

export default {
	async fetch(request, env) {
		if (request.url.endsWith("/api/chat")) {
			if (request.method === "POST") {
				try {
					const { messages } = await request.json();

					const response = await fetch(
						"https://gateway.ai.cloudflare.com/v1/$ACCOUNT_ID/$GATEWAY_ID/openai/chat/completions",
						{
							method: "POST",
							headers: {
								"Content-Type": "application/json",
								Authorization: `Bearer ${env.OPENAI_API_KEY}`,
							},
							body: JSON.stringify({
								model: "gpt-4o-mini",
								messages: messages,
							}),
						},
					);

					if (!response.ok) {
						throw new Error(`AI Gateway Error: ${response.status}`);
					}

					const result = await response.json();
					return new Response(
						JSON.stringify({
							response: result.choices[0].message.content,
						}),
						{
							headers: { "Content-Type": "application/json" },
						},
					);
				} catch (error) {
					return new Response(JSON.stringify({ error: error.message }), {
						status: 500,
						headers: { "Content-Type": "application/json" },
					});
				}
			}
			return new Response("Method not allowed", { status: 405 });
		}

		return new Response(HTML, {
			headers: { "Content-Type": "text/html" },
		});
	},
};

const HTML = `<!DOCTYPE html>
  <html lang="en" data-theme="dark">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ChatGPT Wrapper</title>
      <style>
          :root {
              --background-color: #1a1a1a;
              --chat-background: #2d2d2d;
              --text-color: #ffffff;
              --input-border: #404040;
              --message-ai-background: #404040;
              --message-ai-text: #ffffff;
          }

          body {
              font-family: system-ui, sans-serif;
              margin: 0;
              padding: 20px;
              background: var(--background-color);
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 20px;
              color: var(--text-color);
          }

          .chat-container {
              width: 100%;
              max-width: 800px;
              background: var(--chat-background);
              border-radius: 10px;
              box-shadow: 0 2px 10px rgba(0,0,0,0.1);
              height: 80vh;
              display: flex;
              flex-direction: column;
          }

          .chat-header {
              padding: 15px 20px;
              border-bottom: 1px solid var(--input-border);
              background: var(--chat-background);
              border-radius: 10px 10px 0 0;
              text-align: center;
          }

          .chat-messages {
              flex-grow: 1;
              overflow-y: auto;
              padding: 20px;
          }

          .message {
              margin-bottom: 20px;
              padding: 10px 15px;
              border-radius: 10px;
              max-width: 80%;
          }

          .user-message {
              background: #007AFF;
              color: white;
              margin-left: auto;
          }

          .ai-message {
              background: var(--message-ai-background);
              color: var(--message-ai-text);
          }

          .input-container {
              padding: 20px;
              border-top: 1px solid var(--input-border);
              display: flex;
              gap: 10px;
          }

          input {
              flex-grow: 1;
              padding: 10px;
              border: 1px solid var(--input-border);
              border-radius: 5px;
              font-size: 16px;
              background: var(--chat-background);
              color: var(--text-color);
          }

          button {
              padding: 10px 20px;
              background: #007AFF;
              color: white;
              border: none;
              border-radius: 5px;
              cursor: pointer;
              font-size: 16px;
          }

          button:disabled {
              background: #ccc;
          }

          .error {
              color: red;
              padding: 10px;
              text-align: center;
          }
      </style>
  </head>
  <body>
      <div class="chat-container">
          <div class="chat-header">
              <h2>AI Assistant</h2>
          </div>
          <div class="chat-messages" id="messages"></div>
          <div class="input-container">
              <input type="text" id="userInput" placeholder="Type your message..." />
              <button onclick="sendMessage()" id="sendButton">Send</button>
          </div>
      </div>

      <script>
          let messages = [];
          const messagesDiv = document.getElementById('messages');
          const userInput = document.getElementById('userInput');
          const sendButton = document.getElementById('sendButton');

          userInput.addEventListener('keypress', (e) => {
              if (e.key === 'Enter') sendMessage();
          });

          async function sendMessage() {
              const content = userInput.value.trim();
              if (!content) return;

              userInput.disabled = true;
              sendButton.disabled = true;

              messages.push({ role: 'user', content });
              appendMessage('user', content);
              userInput.value = '';

              try {
                  const response = await fetch('/api/chat', {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' },
                      body: JSON.stringify({
                          messages
                      })
                  });

                  if (!response.ok) {
                      throw new Error('API request failed');
                  }

                  const result = await response.json();
                  const aiMessage = result.response;

                  messages.push({ role: 'assistant', content: aiMessage });
                  appendMessage('ai', aiMessage);
              } catch (error) {
                  appendMessage('ai', 'Sorry, there was an error processing your request.');
                  console.error('Error:', error);
              }

              userInput.disabled = false;
              sendButton.disabled = false;
              userInput.focus();
          }

          function appendMessage(role, content) {
              const messageDiv = document.createElement('div');
              messageDiv.className = 'message ' + role + '-message';
              messageDiv.textContent = content;
              messagesDiv.appendChild(messageDiv);
              messagesDiv.scrollTop = messagesDiv.scrollHeight;
          }
      </script>
  </body>
  </html>`;

Upozorňujeme, že v endpointu AI Gateway je nutné nahradit ID účtu a ID brány. Můžete je přidat jako proměnné prostředí nebo secrets ve Workers. Pokud jste při vytváření AI gateway zvolili použití Authenticated Gateway, nezapomeňte token přidat také jako tajný klíč a jeho hodnotu předat do AI gateway v cf-aig-authorization hlavička.

3. Publikujte Worker

Jakmile je kód Workeru hotový, musíte Worker zpřístupnit pomocí hostname, který lze řídit prostřednictvím Cloudflare Access.

Upravte konfigurační soubor Wrangler a přidejte následující informace, aby byl Worker přístupný pouze přes vlastní hostname:

name = "ai-agent-wrapper"
main = "src/index.js"
compatibility_date = "2023-10-30"
workers_dev = false

+# Replace with your custom domain
+routes = [
+  { pattern = "<YOUR_CUSTOM_DOMAIN>", custom_domain = true }
+]

[vars]
# Add any environment variables here

Chcete-li publikovat worker, spusťte wrangler deploy.

Pokud jste svůj Worker sestavili vzdáleně pomocí editor kódu dostupné v dashboardu Cloudflare, můžete ho nasadit výběrem Nasadit.

Aby byl Worker dostupný jen z vlastního hostname:

  1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

    Přejděte na Workers & Pages ↗

  2. Vyberte svůj Worker.

  3. Přejděte na Nastavení.

  4. V rámci Domains & Routes, vyberte Přidat.

  5. Vyberte Vlastní doména.

  6. Zadejte požadovaný vlastní název domény.

  7. Vyberte Přidat doménu.

Worker se nyní nachází za adresovatelným veřejným hostname. Nezapomeňte vypnout obě možnosti workers.dev a Preview URLs tak, aby k Worker bylo možné přistupovat pouze přes jeho vlastní doménu.

4. Zabezpečte wrapper pomocí Access

Chcete-li zabezpečit AI agent wrapper tak, aby k němu měli přístup pouze důvěryhodní uživatelé:

  1. V Cloudflare dashboard ↗, přejděte na Zero Trust > Řízení přístupu > Aplikace.
  2. Vyberte Vytvořit novou aplikaci.
  3. Vyberte Vlastní hosting a soukromé.
  4. Vyberte Přidejte veřejný hostname a zadejte vlastní doménu, kterou jste nastavili pro Worker.
  5. Nakonfigurujte svou aplikaci Access pro váš Worker.
  6. Přidejte Zásady Access řídit, kdo se může připojit k vaší aplikaci.

K vašemu AI wrapperu se nyní dostanou pouze uživatelé, kteří splní vaše zásady Access.

5. Blokujte přístup k veřejným AI agentům pomocí Gateway

Přístup ke všem neautorizovaným veřejným agentům AI nyní můžete zablokovat pomocí zásady Gateway Zásada HTTP.

  1. V Cloudflare dashboard ↗, přejděte na Zero Trust > Zásady provozu > Zásady brány firewall > HTTP.

  2. Vyberte Přidat zásadu.

  3. Přidejte následující zásadu:

    Selektor Operátor Hodnota Akce
    Content Categories v Umělá inteligence Block

  4. Vyberte Vytvořit zásadu.

Tím je zajištěno, že veřejní AI agenti nejsou dostupní přes spravovaný endpoint.

Případně můžete uživatelům zabránit v používání veřejných AI agentů zobrazením vlastní blokovací zpráva, přesměrování, nebo oznámení pro uživatele která uživatele nasměruje na AI agent wrapper.

6. Vynuťte Data Loss Prevention a Clientless Browser Isolation

Jakmile máte plnou kontrolu nad přístupem ke svému AI agent wrapperu, můžete vynutit další bezpečnostní metody, například Data Loss Prevention (DLP) a Clientless Web Isolation, abyste ochránili data sdílená s AI agentem a měli nad nimi kontrolu.

Použít profily Data Loss Prevention

Můžete použít Data Loss Prevention (DLP) a zabránit tomu, aby uživatelé odesílali citlivá data do AI agenta.

  1. V Cloudflare dashboard ↗, přejděte na Zero Trust > Data Loss Prevention > Profily.

  2. Ujistěte se, že Profily DLP chcete vynutit, jsou správně nakonfigurovány.

  3. Přidejte zásadu HTTP, která pro hostname vašeho wrapperu vynutí profil DLP. Například:

    Selektor Operátor Hodnota Logika Akce
    Host je ai-wrapper.example.com And Block
    Profil DLP v profil AI DLP

  4. Vyberte Vytvořit zásadu.

Další informace o vytváření zásad DLP najdete v Kontrola HTTP provozu.

Spustit v bezklientském izolovaném prohlížeči

Protože jste svůj wrapper publikovali jako self-hosted aplikaci Access, můžete jej spouštět v izolovaná relace pro vaše uživatele vytvořením Zásada Access a nakonfigurujte ji pro svou aplikaci.

  1. V Cloudflare One ↗, přejděte na Browser isolation > Nastavení Browser isolation.
  2. Zapněte Umožňuje uživatelům otevřít vzdálený prohlížeč bez klienta zařízení.
  1. Přejděte na Řízení přístupu > Zásady.
  2. Vyberte Přidat zásadu.
  3. Nastavte Akce na Allow.
  4. V Přidat pravidla, přidejte pravidla identity, která určí, pro koho má být aplikace izolována.
  5. V Další nastavení (volitelné), zapněte Izolovat aplikaci.

Jakmile je zásada Access vytvořena, můžete ji připojit ke svému wrapperu.

  1. Přejděte na Řízení přístupu > Aplikace.
  2. Zvolte svou wrapper aplikaci a poté vyberte Konfigurovat.
  3. V Zásady, vyberte Vyberte existující zásady.
  4. Zvolte zásadu Access, kterou jste dříve vytvořili.
  5. Vyberte Potvrdit, pak vyberte Save.

Provoz Clientless Web Isolation se řídí vašimi HTTP zásadami Gateway, proto se na izolované relace budou vztahovat i vaše nakonfigurované profily DLP.

Další informace o izolaci aplikace Access najdete v Izolovat samostatně hostovanou aplikaci.

Další výhody

Organizace, které pro zabezpečení přístupu k AI agentům využijí Cloudflare, získají lepší přehled a možnosti konfigurace.

Viditelnost

Zero Trust bude protokolovat všechny Události Access a Detekce DLP. AI Gateway navíc poskytuje viditelnost do promptů uživatelů, odpovědí modelu, využití tokenů a nákladů.

Protokoly lze exportovat k externím poskytovatelům pomocí Logpush.

Konfigurovatelnost

Svůj wrapper můžete nakonfigurovat tak, aby používal jiný poskytovatel AI nebo umožnit svým uživatelům vybrat si mezi více poskytovateli AI, včetně modelů AI běžících přímo v globální síti Cloudflare s Workers AI. Díky tomu můžete kontrolovat náklady související s používáním AI nebo přejít na novější modely, aniž by to ovlivnilo vaše uživatele nebo již zavedené řízení přístupu.