Add caution around endpoint security (#146)

Adds an important caution that client-side `/api/` endpoints need to be
protected, and updates advice in client fetch snippet.

Author: Xenc5

docs/capabilities/http-fetch.md

@@ -76,15 +76,15 @@ 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
 
 ```
 
 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');
 ```
 

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');
 ```
 

versioned_docs/version-0.12/capabilities/http-fetch.md

@@ -76,15 +76,15 @@ 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
 
 ```
 
 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');
 ```
 

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');
 ```
 

versioned_docs/version-0.13/capabilities/http-fetch.md

@@ -76,15 +76,15 @@ 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
 
 ```
 
 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');
 ```
 

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');
 ```