INTEGRITY Документация

← Cloudflare One / cloudflare-one / tutorials

Создание и защита обёртки AI-агента с помощью AI Gateway и Zero Trust

В этом руководстве описано, как использовать Cloudflare AI Gateway и Zero Trust, чтобы создать функциональную и безопасную веб-оболочку для AI агента. Администраторы Cloudflare Zero Trust могут защитить доступ к этой оболочке с помощью Cloudflare Access. Кроме того, вы можете принудительно применить Политики Gateway чтобы управлять тем, как ваши пользователи взаимодействуют с ИИ-агентами, включая выполнение ИИ-агентов в изолированном браузере с Browser Isolation, применяя Data Loss Prevention профили, чтобы запретить пользователям делиться конфиденциальными данными, а также сканировать содержимое, чтобы предотвращать ответы ИИ-агентов, нарушающие внутренние корпоративные правила. Создание обёртки для ИИ-агента также эффективно для применения контроля на уровне арендатора, если у вас есть тарифный план Enterprise у конкретного поставщика ИИ, например ChatGPT Enterprise.

В этом руководстве ChatGPT используется в качестве примера ИИ-агента.

Перед началом работы

Убедитесь, что у вас есть:

1. Создайте AI gateway

Сначала создайте AI gateway для управления своим приложением ИИ.

  1. В Панель управления Cloudflare ↗, перейдите в AI Gateway страницу.

    Перейдите в AI Gateway ↗

  2. Выберите Create Gateway.

  3. Назовите шлюз.

  4. Выберите Создание.

  5. Настройте нужные вам параметры шлюза.

  6. Подключите своего поставщика ИИ для проксирования запросов к выбранному вами ИИ-агенту через ваш AI Gateway.

  7. (Необязательно) Включите Аутентифицированный Gateway. Функция Authenticated Gateway обеспечивает безопасный вызов вашего AI Gateway, требуя токен в виде заголовка запроса cf-aig-authorization.

    1. Перейдите в AI > AI Gateway.
    2. Выберите свой AI gateway, затем перейдите в Настройки.
    3. Включите Аутентифицированный Gateway, затем выберите Подтверждение.
    4. Выберите Создать токен аутентификации, затем выберите Создать токен аутентификации AI Gateway.
    5. Настройте свой токен и скопируйте его значение. При создании своего Worker вам нужно будет передавать этот токен при вызове своего AI gateway.

Подробнее см. в Начало работы с AI Gateway.

2. (Необязательно) Используйте Guardrails для блокировки небезопасного или неприемлемого контента

Guardrails это встроенная функция безопасности AI Gateway, которая позволяет Cloudflare выявлять небезопасный или неприемлемый контент в промптах и ответах на основе выбранных категорий.

  1. На панели управления Cloudflare перейдите к разделу AI Gateway страницу.

    Перейдите в AI Gateway ↗

  2. Выберите свой AI gateway.

  3. Перейдите в Guardrails.

  4. Включите Guardrails.

  5. Выберите Изменение чтобы настроить категории, которые нужно фильтровать как для промптов, так и для ответов.

3. Создайте Worker для обслуживания wrapper

1. Создайте Worker

Чтобы собрать Worker, нужно выбрать, будете ли вы собирать его локально с помощью Wrangler или удалённо с помощью панель управления ↗.

  1. В терминале войдите в свою учетную запись Cloudflare:

    wrangler login

  2. Инициируйте проект локально:

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

  3. Создайте файл конфигурации Wrangler:

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

[vars]
# Add any environment variables here

  4. Добавьте API-ключ своего поставщика ИИ как secret:

    wrangler secret put <OPENAI_API_KEY>

Теперь Worker можно собрать с помощью index.js файл, созданный Wrangler.

  1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

    Перейдите в Workers & Pages ↗

  2. Выберите Создание.

  3. В Workers, выберите Hello world шаблон.

  4. Назовите worker, затем выберите Развернуть.

  5. Выберите свой Worker, затем перейдите в Настройки на вкладке.

  6. Перейдите в Переменные и секреты, затем выберите Add.

  7. Выберите Секрет в качестве типа и укажите имя своего secret (например, OPENAI_API_KEY), и введите значение ключа API вашего поставщика ИИ в Значение.

Теперь Worker можно собрать в онлайн-редакторе кода, выбрав Изменить код на странице вашего Worker.

2. Создайте Worker

Ниже приведён пример стартового Worker, который обслуживает простой фронтенд, позволяющий пользователю взаимодействовать с поставщиком ИИ через AI Gateway. В этом примере в качестве поставщика ИИ используется 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>`;

Обратите внимание, что в конечной точке AI Gateway необходимо заменить ID аккаунта и ID шлюза. Их можно добавить как переменные окружения или секреты в Workers. Если при создании AI Gateway вы выбрали использование Authenticated Gateway, обязательно добавьте свой токен как секрет и передайте его значение в AI Gateway в cf-aig-authorization заголовок.

3. Опубликуйте Worker

После завершения кода Worker нужно сделать Worker доступным по имени хоста, управляемому Cloudflare Access.

Измените конфигурационный файл Wrangler и добавьте указанную ниже информацию, чтобы Worker был доступен только через пользовательское имя хоста:

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

Чтобы опубликовать worker, выполните wrangler deploy.

Если вы собрали Worker удаленно с помощью редактор кода доступного в панели управления Cloudflare, вы можете развернуть его, выбрав Развернуть.

Чтобы Worker был доступен только через пользовательское имя хоста:

  1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

    Перейдите в Workers & Pages ↗

  2. Выберите свой Worker.

  3. Перейдите в Настройки.

  4. В пределах Domains & Routes, выберите Add.

  5. Выберите Пользовательский домен.

  6. Введите желаемое пользовательское доменное имя.

  7. Выберите Добавить домен.

Теперь Worker находится за адресуемым публичным именем хоста. Обязательно отключите оба workers.dev и Preview URLs чтобы Worker был доступен только через свой пользовательский домен.

4. Защитите wrapper с помощью Access

Чтобы защитить AI agent wrapper и гарантировать, что доступ к нему будет только у доверенных пользователей:

  1. В Панель управления Cloudflare ↗, перейдите в Zero Trust > Контроль доступа > Приложения.
  2. Выберите Создать новое приложение.
  3. Выберите Самостоятельный хостинг и конфиденциальность.
  4. Выберите Добавьте общедоступное имя хоста и введите собственный домен, который вы указали для своего Worker.
  5. Настройте своё приложение Access для вашего Worker.
  6. Добавить Политики доступа чтобы управлять тем, кто может подключаться к вашему приложению.

Теперь доступ к вашей обёртке ИИ (AI wrapper) есть только у пользователей, которые соответствуют вашим политикам Access.

5. Заблокируйте доступ к публичным ИИ-агентам с помощью Gateway

Теперь вы можете заблокировать доступ ко всем несанкционированным публичным ИИ-агентам с помощью политики Gateway Политика HTTP.

  1. В Панель управления Cloudflare ↗, перейдите в Zero Trust > Политики трафика > Политики Firewall > HTTP.

  2. Выберите Добавление политики.

  3. Добавьте следующую политику:

    Селектор Оператор Значение Действие
    Content Categories in Искусственный интеллект Block

  4. Выберите Создать политику.

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

Как вариант, можно запретить пользователям использовать публичные ИИ-агенты, отображая пользовательское сообщение о блокировке, перенаправление, или уведомление пользователя направляя пользователей на AI agent wrapper.

6. Внедрите Data Loss Prevention и Clientless Browser Isolation

Теперь, когда у вас есть полный контроль над доступом к обёртке ИИ-агента (AI agent wrapper), вы можете применять дополнительные меры безопасности, такие как предотвращение утечки данных (DLP) и Clientless Web Isolation, чтобы защищать и контролировать данные, передаваемые ИИ-агенту.

Применить профили Data Loss Prevention

Вы можете использовать Data Loss Prevention (DLP) и запретите пользователям отправлять конфиденциальные данные ИИ-агенту.

  1. В Панель управления Cloudflare ↗, перейдите в Zero Trust > Предотвращение потери данных > Профили.

  2. Убедитесь, что Профили DLP которые вы хотите применить, настроены правильно.

  3. Добавьте политику HTTP, чтобы применить профиль DLP к имени хоста вашего wrapper. Например:

    Селектор Оператор Значение Логика Действие
    Host является ai-wrapper.example.com И Block
    Профиль DLP in профиль AI DLP

  4. Выберите Создать политику.

Дополнительные сведения о создании политик DLP см. в Сканирование HTTP-трафика.

Выполнить в изолированном браузере без клиента

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

  1. В Cloudflare One ↗, перейдите в Browser Isolation > Настройки Browser Isolation.
  2. Включите Разрешить пользователям открывать удалённый браузер без клиента на устройстве.
  1. Перейдите в Контроль доступа > Политики.
  2. Выберите Добавление политики.
  3. Задайте Действие к Allow.
  4. В Добавить правила, добавьте правила идентификации, чтобы определить, для кого приложение должно быть изолировано.
  5. В Дополнительные настройки (необязательно), включите Изолировать приложение.

После создания политики Access вы можете прикрепить её к своему wrapper.

  1. Перейдите в Контроль доступа > Приложения.
  2. Выберите приложение-обёртку, затем нажмите Настройте.
  3. В Политики, выберите Выберите существующие политики.
  4. Выберите политику Access, которую вы создали ранее.
  5. Выберите Подтверждение, затем выберите Save.

Поскольку трафик Clientless Web Isolation обрабатывается согласно вашим HTTP-политикам Gateway, настроенные профили DLP также будут применяться к изолированным сессиям.

Дополнительные сведения об изоляции приложения Access см. в Изолировать самостоятельно размещённое приложение.

Дополнительные преимущества

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

Видимость

Zero Trust будет регистрировать все События Access и Обнаружения DLP. Кроме того, AI Gateway предоставляет видимость в промпты пользователя, ответы модели, использование токенов и затраты.

Журналы можно экспортировать внешним поставщикам с помощью Logpush.

Настраиваемость

Вы можете настроить обёртку для использования другой поставщик ИИ или предоставьте пользователям возможность выбирать между несколькими поставщиками ИИ, включая модели ИИ, которые выполняются непосредственно в глобальной сети Cloudflare с помощью Workers AI. Это позволяет контролировать расходы, связанные с использованием ИИ, или переходить на новые модели, не затрагивая пользователей и уже настроенные элементы управления доступом.