diff --git a/docs/capabilities/http-fetch.md b/docs/capabilities/http-fetch.md index b6388dbb..a62722ca 100644 --- a/docs/capabilities/http-fetch.md +++ b/docs/capabilities/http-fetch.md @@ -76,7 +76,7 @@ console.log('External API response:', data); Client-side fetch has different restrictions: - **Domain limitation**: Can only make requests to your own webview domain -- **Endpoint requirement**: All requests must target endpoints that start with /api +- **Endpoint requirement**: All requests must target endpoints that start with /api/ - **Authentication**: Handled automatically \- no need to manage auth tokens - **No external domains**: Cannot make requests to external domains from client-side code client/index.ts @@ -84,7 +84,7 @@ Client-side fetch has different restrictions: ``` const handleFetchData = async () => { - // Correct: fetching your own webview's API endpoint + // ✅ Correct: Fetching your own webview's API endpoint const response = await fetch("/api/user-data", { method: "GET", headers: { @@ -96,10 +96,10 @@ const handleFetchData = async () => { console.log("API response:", data); }; -// Incorrect: cannot fetch external domains from client-side +// ❌ Incorrect: Cannot fetch external domains from client-side // const response = await fetch('https://external-api.com/data'); -// Incorrect: endpoint must start with /api +// ❌ Incorrect: Endpoint must start with /api/ // const response = await fetch('/user-data'); ``` diff --git a/docs/capabilities/server/http-fetch.mdx b/docs/capabilities/server/http-fetch.mdx index 16284f81..769617ee 100644 --- a/docs/capabilities/server/http-fetch.mdx +++ b/docs/capabilities/server/http-fetch.mdx @@ -70,13 +70,17 @@ Client-side fetch has different restrictions and can only make requests to your **Client-side restrictions:** - **Domain limitation**: Can only make requests to your own webview domain -- **Endpoint requirement**: All requests must target endpoints that end with `/api` +- **Endpoint requirement**: Client-side fetches to your app server must target paths that start with `/api/` - **Authentication**: Handled automatically - no need to manage auth tokens - **No external domains**: Cannot make requests to external domains from client-side code +:::caution +Do not treat `/api/` endpoints as private. Any user who can load your app will be able to call them directly. When changing Redis, content, settings, moderator state, or other persistent data, first check that the user has permission in your server logic. Apps with unprotected endpoints will be rejected during review. +::: + ```tsx title="client/index.ts" const handleFetchData = async () => { - // Correct: fetching your own webview's API endpoint + // ✅ Correct: Fetching your own webview's API endpoint const response = await fetch("/api/user-data", { method: "GET", headers: { @@ -88,10 +92,10 @@ const handleFetchData = async () => { console.log("API response:", data); }; -// Incorrect: cannot fetch external domains from client-side +// ❌ Incorrect: Cannot fetch external domains from client-side // const response = await fetch('https://external-api.com/data'); -// Incorrect: endpoint must end with /api +// ❌ Incorrect: Endpoint must start with /api/ // const response = await fetch('/user-data'); ``` diff --git a/versioned_docs/version-0.12/capabilities/http-fetch.md b/versioned_docs/version-0.12/capabilities/http-fetch.md index f9d8c253..4931820c 100644 --- a/versioned_docs/version-0.12/capabilities/http-fetch.md +++ b/versioned_docs/version-0.12/capabilities/http-fetch.md @@ -76,7 +76,7 @@ console.log('External API response:', data); Client-side fetch has different restrictions: - **Domain limitation**: Can only make requests to your own webview domain -- **Endpoint requirement**: All requests must target endpoints that start with /api +- **Endpoint requirement**: All requests must target endpoints that start with /api/ - **Authentication**: Handled automatically \- no need to manage auth tokens - **No external domains**: Cannot make requests to external domains from client-side code client/index.ts @@ -84,7 +84,7 @@ Client-side fetch has different restrictions: ``` const handleFetchData = async () => { - // Correct: fetching your own webview's API endpoint + // ✅ Correct: Fetching your own webview's API endpoint const response = await fetch("/api/user-data", { method: "GET", headers: { @@ -96,10 +96,10 @@ const handleFetchData = async () => { console.log("API response:", data); }; -// Incorrect: cannot fetch external domains from client-side +// ❌ Incorrect: Cannot fetch external domains from client-side // const response = await fetch('https://external-api.com/data'); -// Incorrect: endpoint must start with /api +// ❌ Incorrect: Endpoint must start with /api/ // const response = await fetch('/user-data'); ``` diff --git a/versioned_docs/version-0.12/capabilities/server/http-fetch.mdx b/versioned_docs/version-0.12/capabilities/server/http-fetch.mdx index 16284f81..769617ee 100644 --- a/versioned_docs/version-0.12/capabilities/server/http-fetch.mdx +++ b/versioned_docs/version-0.12/capabilities/server/http-fetch.mdx @@ -70,13 +70,17 @@ Client-side fetch has different restrictions and can only make requests to your **Client-side restrictions:** - **Domain limitation**: Can only make requests to your own webview domain -- **Endpoint requirement**: All requests must target endpoints that end with `/api` +- **Endpoint requirement**: Client-side fetches to your app server must target paths that start with `/api/` - **Authentication**: Handled automatically - no need to manage auth tokens - **No external domains**: Cannot make requests to external domains from client-side code +:::caution +Do not treat `/api/` endpoints as private. Any user who can load your app will be able to call them directly. When changing Redis, content, settings, moderator state, or other persistent data, first check that the user has permission in your server logic. Apps with unprotected endpoints will be rejected during review. +::: + ```tsx title="client/index.ts" const handleFetchData = async () => { - // Correct: fetching your own webview's API endpoint + // ✅ Correct: Fetching your own webview's API endpoint const response = await fetch("/api/user-data", { method: "GET", headers: { @@ -88,10 +92,10 @@ const handleFetchData = async () => { console.log("API response:", data); }; -// Incorrect: cannot fetch external domains from client-side +// ❌ Incorrect: Cannot fetch external domains from client-side // const response = await fetch('https://external-api.com/data'); -// Incorrect: endpoint must end with /api +// ❌ Incorrect: Endpoint must start with /api/ // const response = await fetch('/user-data'); ``` diff --git a/versioned_docs/version-0.13/capabilities/http-fetch.md b/versioned_docs/version-0.13/capabilities/http-fetch.md index 4dc1fdf9..d7eaf7fd 100644 --- a/versioned_docs/version-0.13/capabilities/http-fetch.md +++ b/versioned_docs/version-0.13/capabilities/http-fetch.md @@ -76,7 +76,7 @@ console.log('External API response:', data); Client-side fetch has different restrictions: - **Domain limitation**: Can only make requests to your own webview domain -- **Endpoint requirement**: All requests must target endpoints that start with /api +- **Endpoint requirement**: All requests must target endpoints that start with /api/ - **Authentication**: Handled automatically \- no need to manage auth tokens - **No external domains**: Cannot make requests to external domains from client-side code client/index.ts @@ -84,7 +84,7 @@ Client-side fetch has different restrictions: ``` const handleFetchData = async () => { - // Correct: fetching your own webview's API endpoint + // ✅ Correct: Fetching your own webview's API endpoint const response = await fetch("/api/user-data", { method: "GET", headers: { @@ -96,10 +96,10 @@ const handleFetchData = async () => { console.log("API response:", data); }; -// Incorrect: cannot fetch external domains from client-side +// ❌ Incorrect: Cannot fetch external domains from client-side // const response = await fetch('https://external-api.com/data'); -// Incorrect: endpoint must start with /api +// ❌ Incorrect: Endpoint must start with /api/ // const response = await fetch('/user-data'); ``` diff --git a/versioned_docs/version-0.13/capabilities/server/http-fetch.mdx b/versioned_docs/version-0.13/capabilities/server/http-fetch.mdx index 16284f81..769617ee 100644 --- a/versioned_docs/version-0.13/capabilities/server/http-fetch.mdx +++ b/versioned_docs/version-0.13/capabilities/server/http-fetch.mdx @@ -70,13 +70,17 @@ Client-side fetch has different restrictions and can only make requests to your **Client-side restrictions:** - **Domain limitation**: Can only make requests to your own webview domain -- **Endpoint requirement**: All requests must target endpoints that end with `/api` +- **Endpoint requirement**: Client-side fetches to your app server must target paths that start with `/api/` - **Authentication**: Handled automatically - no need to manage auth tokens - **No external domains**: Cannot make requests to external domains from client-side code +:::caution +Do not treat `/api/` endpoints as private. Any user who can load your app will be able to call them directly. When changing Redis, content, settings, moderator state, or other persistent data, first check that the user has permission in your server logic. Apps with unprotected endpoints will be rejected during review. +::: + ```tsx title="client/index.ts" const handleFetchData = async () => { - // Correct: fetching your own webview's API endpoint + // ✅ Correct: Fetching your own webview's API endpoint const response = await fetch("/api/user-data", { method: "GET", headers: { @@ -88,10 +92,10 @@ const handleFetchData = async () => { console.log("API response:", data); }; -// Incorrect: cannot fetch external domains from client-side +// ❌ Incorrect: Cannot fetch external domains from client-side // const response = await fetch('https://external-api.com/data'); -// Incorrect: endpoint must end with /api +// ❌ Incorrect: Endpoint must start with /api/ // const response = await fetch('/user-data'); ```