安全性

Remotion 在渲染過程中會啟動 Chromium 瀏覽器來執行你的 React 程式碼。這個架構帶來一些安全性考量，開發者必須妥善處理。

使用者輸入的風險

當你的影片接受外部輸入（例如透過 inputProps）來動態生成內容時，務必注意以下幾點：

• 切勿直接將使用者輸入渲染為 HTML：使用 dangerouslySetInnerHTML 可能導致 XSS 攻擊。
• 驗證所有輸入資料：使用 Zod 或其他 schema 驗證函式庫，確保傳入的資料格式正確。
• 避免動態執行程式碼：不要用 eval() 或 new Function() 來執行外部輸入的字串。

import { z } from "zod";
 
const PropsSchema = z.object({
  title: z.string().max(100),
  color: z.string().regex(/^#[0-9a-fA-F]{6}$/),
});
 
// 渲染前先驗證
const validated = PropsSchema.parse(inputProps);

保護敏感的環境變數

Remotion 使用 webpack 打包前端程式碼，因此所有在前端引用的環境變數都會被打包進去。請注意：

• 不要在 Remotion 元件中使用資料庫密碼或 API 金鑰。
• 只有以 REMOTION_ 開頭（或你自行設定的前綴）的環境變數才會被打包。
• 敏感的資料應該在伺服器端處理，透過 inputProps 傳入已處理好的結果，而非原始金鑰。

# .env — 不應打包進影片的變數
DB_PASSWORD=secret123          # 不安全，不要在元件裡用
 
# 可以在元件裡使用的變數
REMOTION_PUBLIC_BRAND_COLOR=#ff0000

Chromium 沙箱

Remotion 預設會以 --no-sandbox 旗標啟動 Chromium，這在 Docker 容器中是必要的，但在生產環境中請評估是否能開啟沙箱。

若在有完整系統權限的環境中執行，建議移除 --no-sandbox：

import { renderMedia } from "@remotion/renderer";
 
await renderMedia({
  // 不傳入 --no-sandbox，讓沙箱保持啟用
  chromiumOptions: {
    disableWebSecurity: false,
  },
});

限制渲染資源

在提供公開渲染服務時，應限制每個請求可使用的資源：

• 設定 --timeout 避免無限等待。
• 設定 --concurrency 限制同時渲染的數量。
• 使用 rate limiting 防止濫用 API。
• 考慮在沙箱環境（如 AWS Lambda 或 Cloud Run）中執行渲染工作。

await renderMedia({
  timeoutInMilliseconds: 30000, // 30 秒上限
  composition,
  serveUrl,
  codec: "h264",
  outputLocation: "out/video.mp4",
});

網路請求的安全性

若你的影片在渲染時需要發出網路請求（例如載入圖片或資料），請注意：

• 只允許來自可信來源的資源：避免從不受控制的 URL 載入資源。
• 使用 HTTPS：確保所有外部資源都透過加密連線取得。
• 設定 Content Security Policy：若透過 Remotion Studio 提供服務，可設定適當的 CSP 標頭。

稽核日誌

在生產環境中提供渲染服務時，建議記錄每次渲染的相關資訊：

• 請求來源（IP、使用者 ID）
• 傳入的 inputProps（排除敏感欄位）
• 渲染開始與結束時間
• 成功或失敗狀態

這有助於偵測異常行為與資源濫用。

小結