Tạo và secure AI agent wrapper using AI Gateway và Zero Trust Create and secure an AI agent wrapper using AI Gateway and Zero Trust
Hướng dẫn chi tiết đồng bộ từ docs Cloudflare — mỗi section có backlink tới đúng vị trí trên trang gốc. Detailed guide synced from Cloudflare docs — each section links to the matching anchor on the official page.
← Danh mục ← CatalogGiải thích nhanh Quick context
Thuộc Cloudflare One — Zero Trust, truy cập an toàn và kiểm soát traffic người dùng/thiết bị. Tutorial «Tạo và secure AI agent wrapper using AI Gateway và Zero Trust» giúp bạn làm quen luồng triển khai thật — phù hợp đọc trước khi mở tài liệu gốc tiếng Anh. Docs gốc chia khoảng 5 bước chính; bản tóm tắt dưới đây giúp bạn nắm khung trước khi làm theo từng lệnh.
This tutorial explains how to use Cloudflare AI Gateway and Zero Trust to create a functional and secure website wrapper for an AI agent.
Lưu ý trước khi làm Notes before you start
- Đây là bản tóm tắt trên Orange Cloud Learning Hub — không thay thế tài liệu chính thức. This is a summary on Orange Cloud Learning Hub — it does not replace the official documentation.
- Luôn mở liên kết «Tài liệu gốc» bên dưới khi cần lệnh CLI, snippet code và ảnh minh họa đầy đủ. Open the Official docs link below for CLI commands, code snippets, and full screenshots.
- Zero Trust thường cần quyền admin trên tenant Cloudflare One và IdP đã kết nối. Zero Trust typically requires Cloudflare One tenant admin access and a connected IdP.
- Docs Cloudflare cập nhật thường xuyên — đối chiếu ngày «Rà soát lần cuối» trên trang gốc khi triển khai production. Cloudflare docs change frequently — verify the Last reviewed date on the official page before production use.
Tài liệu gốc — rà soát lần cuối: about 1 year ago Official docs — last reviewed: about 1 year ago
Tổng quan Overview
Tutorial này hướng dẫn cách use Cloudflare AI Gateway and Zero Trust to create a functional and secure website wrapper for an AI agent. Cloudflare Zero Trust administrators can protect access to the wrapper with Cloudflare Access . Additionally, you can enforce Gateway polic…
Read the "Overview" section below — open the official docs link for full screenshots and configuration tabs.
This tutorial explains how to use Cloudflare AI Gateway and Zero Trust to create a functional and secure website wrapper for an AI agent. Cloudflare Zero Trust administrators can protect access to the wrapper with Cloudflare Access. Additionally, you can enforce Gateway policies to control how your users interact with AI agents, including executing AI agents in an isolated browser with Browser Isolation, enforcing Data Loss Prevention profiles to prevent your users from sharing sensitive data, and scanning content to avoid answers from AI agents that violate internal corporate guidelines. Creating an AI agent wrapper is also an effective way to enforce tenant control if you have an enterprise plan for a specific AI provider, such as ChatGPT Enterprise.
This tutorial uses ChatGPT as an example AI agent.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
Before you begin Before you begin
Phần «Before you begin» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Before you begin" section below — open the official docs link for full screenshots and configuration tabs.
Make sure you have:
- A Cloudflare Zero Trust organization.
- An API key for your desired AI provider, such as an OpenAI API key ↗ for ChatGPT.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
1. Tạo AI gateway 1. Create an AI gateway
Phần «Tạo AI gateway» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "1. Create an AI gateway" section below — open the official docs link for full screenshots and configuration tabs.
First, create an AI gateway to control your AI app.
- In the Cloudflare dashboard ↗, go to the AI Gateway page.
- Select Create Gateway.
- Name your gateway.
- Select Create.
- Configure your desired options for the gateway.
- Connect your AI provider to proxy queries to your AI agent of choice using your AI gateway.
- (Optional) Turn on Authenticated Gateway. The Authenticated Gateway feature ensures your AI gateway can only be called securely by enforcing a token in the form of a request header
cf-aig-authorization.
1. Go to AI \> AI Gateway. 2. Select your AI gateway, then go to Settings. 3. Turn on Authenticated Gateway, then choose Confirm. 4. Select Create authentication token, then select Create an AI Gateway authentication token. 5. Configure your token and copy the token value. When creating your Worker, you will need to pass this token when calling your AI gateway.
For more information, refer to Getting started with AI Gateway.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
2. (Optional) Use Guardrails to block unsafe or inappropriate content 2. (Optional) Use Guardrails to block unsafe or inappropriate content
Phần «(Optional) Use Guardrails to block unsafe or inappropriate content» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "2. (Optional) Use Guardrails to block unsafe or inappropriate content" section below — open the official docs link for full screenshots and configuration tabs.
Guardrails is an built-in AI Gateway security feature that allows Cloudflare to identify unsafe or inappropriate content in prompts and responses based on selected categories.
- In the Cloudflare dashboard, go to the AI Gateway page.
- Select your AI gateway.
- Go to Guardrails.
- Turn on Guardrails.
- Select Change to configure the categories you would like to filter for both prompts and responses.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
1. Tạo Worker 1. Create the Worker
Phần «Tạo Worker» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "1. Create the Worker" section below — open the official docs link for full screenshots and configuration tabs.
In order to build the Worker, you will need to choose if you want to build it locally using Wrangler or remotely using the dashboard ↗.
- In a terminal, log in to your Cloudflare account:
Terminal window
wrangler login- Initiate the project locally:
Terminal window
mkdir ai-agent-wrapper
cd ai-agent-wrapper
wrangler init- Create a Wrangler configuration file:
name = "ai-agent-wrapper"
main = "src/index.js"
compatibility_date = "2023-10-30"
[vars]
# Add any environment variables here- Add your AI provider's API key as a secret:
Terminal window
wrangler secret put <OPENAI_API_KEY>You can now build the Worker using the index.js file created by Wrangler.
- In the Cloudflare dashboard, go to the Workers & Pages page.
- Select Create.
- In Workers, choose the Hello world template.
- Name your worker, then select Deploy.
- Select your Worker, then go to the Settings tab.
- Go to Variables and Secrets, then select Add.
- Choose Secret as the type, name your secret (for example,
OPENAIAPIKEY), and enter the value of your AI provider's API key in Value.
You can now build the Worker using the online code editor by selecting Edit code on your Worker page.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
2. Build Worker 2. Build the Worker
Phần «Build Worker» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "2. Build the Worker" section below — open the official docs link for full screenshots and configuration tabs.
The following is an example starter Worker that serves a simple front-end to allow a user to interact with an AI provider behind AI Gateway. This example uses OpenAI as its AI provider:
JavaScript
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">
177 collapsed lines
<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;Note that the account ID and gateway ID need to be replaced in the AI Gateway endpoint. You can add these as environment variables or secrets in Workers. If you chose to use Authenticated Gateway when creating your AI gateway, make sure to also add your token as a secret and pass its value to the AI gateway in the cf-aig-authorization header.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
3. Publish Worker 3. Publish the Worker
Phần «Publish Worker» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "3. Publish the Worker" section below — open the official docs link for full screenshots and configuration tabs.
Once the Worker code is complete, you need to make the Worker addressable using a hostname controllable by Cloudflare Access.
Edit the Wrangler configuration file and add the following information to ensure that the Worker is only accessible using the custom hostname:
TOML
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 hereTo publish the worker, run wrangler deploy.
If you built your Worker remotely using the code editor available in the Cloudflare dashboard, you can deploy it by selecting Deploy.
To ensure that the Worker is only accessible from the custom hostname:
- In the Cloudflare dashboard, go to the Workers & Pages page.
- Select your Worker.
- Go to Settings.
- Within Domains & Routes, select Add.
- Choose Custom domain.
- Enter your desired custom domain name.
- Select Add domain.
The Worker is now behind an addressable public hostname. Make sure to turn off both workers.dev and Preview URLs so that the Worker can only be accessed with its custom domain.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
4. Bảo mật wrapper với Access 4. Secure the wrapper with Access
Phần «Bảo mật wrapper với Access» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "4. Secure the wrapper with Access" section below — open the official docs link for full screenshots and configuration tabs.
To secure the AI agent wrapper to ensure that only trusted users can access it:
- In the Cloudflare dashboard ↗, go to Zero Trust \> Access controls \> Applications.
- Select Create new application.
- Select Self-hosted and private.
- Select Add public hostname and enter the custom domain you set for your Worker.
- Configure your Access application for your Worker.
- Add Access policies to control who can connect to your application.
Now your AI wrapper can only be accessed by your users that successfully match your Access policies.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
5. Block access to public AI agents với Gateway 5. Block access to public AI agents with Gateway
Phần «Block access to public AI agents với Gateway» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "5. Block access to public AI agents with Gateway" section below — open the official docs link for full screenshots and configuration tabs.
You can now block access to all unauthorized public AI agents with a Gateway HTTP policy.
- In the Cloudflare dashboard ↗, go to Zero Trust \> Traffic policies \> Firewall policies \> HTTP.
- Select Add a policy.
- Add the following policy:
| Selector | Operator | Value | Action | | ------------------ | -------- | ------------------------- | ------ | | Content Categories | in | Artificial Intelligence | Block |
- Select Create policy.
This ensures that public AI agents are not accessible using a managed endpoint.
Alternatively, you can prevent users from using public AI agents by displaying a custom block message, redirect, or a user notification directing users to the AI agent wrapper.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
6. Enforce Data Loss Prevention và Clientless Browser Isolation 6. Enforce Data Loss Prevention and Clientless Browser Isolation
Phần «Enforce Data Loss Prevention và Clientless Browser Isolation» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "6. Enforce Data Loss Prevention and Clientless Browser Isolation" section below — open the official docs link for full screenshots and configuration tabs.
Now that you have full control over access to your AI agent wrapper, you can enforce extra security methods such as Data Loss Prevention (DLP) and Clientless Web Isolation to protect and control data shared with the AI agent.
Apply Data Loss Prevention profiles Apply Data Loss Prevention profiles
Phần «Apply Data Loss Prevention profiles» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Apply Data Loss Prevention profiles" section below — open the official docs link for full screenshots and configuration tabs.
You can use Data Loss Prevention (DLP) to prevent your users from sending sensitive data to the AI agent.
- In the Cloudflare dashboard ↗, go to Zero Trust \> Data loss prevention \> Profiles.
- Ensure that the DLP profiles you want to enforce are properly configured.
- Add an HTTP policy to enforce the DLP profile for the hostname for your wrapper. For example:
| Selector | Operator | Value | Logic | Action | | ----------- | -------- | ---------------------- | ----- | ------ | | Host | is | ai-wrapper.example.com | And | Block | | DLP Profile | in | AI DLP profile | | |
- Select Create policy.
For more information on creating DLP policies, refer to Scan HTTP traffic.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
Execute in clientless isolated browser Execute in a clientless isolated browser
Phần «Execute in clientless isolated browser» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Execute in a clientless isolated browser" section below — open the official docs link for full screenshots and configuration tabs.
Because you published your wrapper as a self-hosted Access application, you can execute it in an isolated session for your users by creating an Access policy and configuring it for your application.
- In Cloudflare One ↗, go to Browser isolation \> Browser isolation settings.
- Turn on Allow users to open a remote browser without the device client.
- Go to Access controls \> Policies.
- Select Add a policy.
- Set the Action to Allow.
- In Add rules, add identity rules to define who the application should be isolated for.
- In Additional settings (optional), turn on Isolate application.
Once the Access policy has been created, you can attach it to your wrapper.
- Go to Access controls \> Applications.
- Choose your wrapper application, then select Configure.
- In Policies, select Select existing policies.
- Choose the Access policy you previously created.
- Select Confirm, then select Save.
Because Clientless Web Isolation traffic applies your Gateway HTTP policies, your configured DLP profiles will apply to isolated sessions.
For more information on isolating an Access application, refer to Isolate self-hosted application.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
Additional benefits Additional benefits
Phần «Additional benefits» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Additional benefits" section below — open the official docs link for full screenshots and configuration tabs.
Organizations that adopt Cloudflare to secure access to AI agents will benefit from improved visibility and configurability.
Visibility Visibility
Phần «Visibility» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Visibility" section below — open the official docs link for full screenshots and configuration tabs.
Zero Trust will log all Access events and DLP detections. In addition, AI Gateway provides visibility into user prompts, model response, token usage, and costs.
Logs can be exported to external providers with Logpush.
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
Configurability Configurability
Phần «Configurability» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Configurability" section below — open the official docs link for full screenshots and configuration tabs.
You can configure your wrapper to use a different AI provider or give your users the option to choose between multiple AI providers, including AI models running directly on Cloudflare's global network with Workers AI. With this, you can control costs related to AI usage or adopt newer models without impacting your users or the access controls already put in place.
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/cloudflare-one/","name":"Cloudflare One"}},{"@type":"ListItem","position":3,"item":{"@id":"/cloudflare-one/tutorials/","name":"Tutorials"}},{"@type":"ListItem","position":4,"item":{"@id":"/cloudflare-one/tutorials/ai-wrapper-tenant-control/","name":"Create and secure an AI agent wrapper using AI Gateway and Zero Trust"}}]}Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs)
Xem bản đầy đủ trên developers.cloudflare.com (ảnh, tab cấu hình). View the full guide on developers.cloudflare.com (images, config tabs).
Tài liệu gốc ↗ Official docs ↗