小丁的家

分類: 開發集成

  • 腦子系統 ISO 整合治理框架:6 篇收成 1 個合規可審計藍圖

    重點摘要(TL;DR)

    • 把腦子系統前六篇收成合乎 ISO 27001:2022 + ISO 42001:2023 的整合治理框架。雙標準有 ~40% 重疊,已 27001 認證可快 30-40% 取得 42001。
    • 多場景多用戶多工具的統一架構:5 個共用元件(Gateway / 分級表 / Audit log / Curator / KPI Dashboard)+ 4 類工具(Coding Agent / Chat-native / Bridge / Self-service HTML)+ 5 種角色(銷售 / 客服 / 採購 / RD / 管理層)。
    • 鄉村包圍踏實落地的 5 個 Phase Gate:每個階段過渡前要過硬條件,對應 ISO 稽核里程碑。沒過 Gate 不要硬上下一階段。
    • 月度健檢三個關鍵指標:覆蓋率(80%+)、合規 gap 減少率、稽核就緒度。月度報告 ≠ 一次性稽核 — 持續可量測。
    • 稽核準備 90% 自動化:從 git log / Gateway log / Audit DB / Curator review 自動 export,RD 投入時間從 1-2 個月降到 1-2 週。
    • 本文是腦子系統第七篇收尾。前六篇:Why / How / Scale / Tools / ERP / Self-Service。

    一、問題重述

    腦子系統六篇文章寫完後,有個關鍵問題沒明確收斂:

    1. 整套架構合不合 ISO 27001 + ISO 42001?哪些直接合、哪些有 gap?
    2. 第三篇的「鄉村包圍」策略講了大方向,但怎麼穩定踏實做完?哪些真實風險會讓計劃流產?
    3. 多場景(銷售/客服/RD/管理層)、多用戶(80 人 vs 萬人)、多 AI 工具(Claude Code / OpenCode / QwenPaw / Self-service HTML)— 怎麼用一套框架統一治理?
    4. 怎麼確保多方都得到正確、安全、合規、整合的資料?

    本文是腦子系統的收尾整合,把前六篇收成可審計、可執行、可量測的治理框架。

    二、ISO 範圍界定(事實驗證)

    2.1 適用標準三件套

    標準 範圍 關鍵內容
    ISO 27001:2022 資安管理(ISMS) Annex A 共 93 controls,4 themes(Organizational 37 / People 8 / Physical 14 / Technological 34)
    ISO 42001:2023 AI 管理(AIMS) Annex A 共 38 AI-specific controls,9 control objectives,Clauses 4-10 結構
    ISO 27701 個資管理(PIMS) 針對 GDPR / 個資法,腦子系統的脫敏管道對應這個

    2.2 雙標準的重疊與互補

    • ~40% 重疊:Annex A 的 Clauses 4-10 結構大部分一致(Context / Leadership / Planning / Support / Operation / Performance / Improvement),已 27001 認證可快 30-40% 取得 42001([來源])
    • 60% AI-specific:42001 的 Clause 8(Operation)幾乎沒重疊 — AI Risk Treatment / AI System Impact Assessment / AI System Lifecycle / Data Management 都是 27001 沒有的
    • 同樣 3 年認證週期,可整合 audit 降低 disruption

    實務建議:先 27001 → 再加 42001。如果並行做,跟同一個認證機構(Schellman / TÜV SÜD / BSI / DNV)約整合稽核,證據文件大量 reuse。

    三、六篇文章 × ISO 控制項映射

    每一篇對應到具體 ISO 控制項。標 ✅ 是文章已涵蓋,標 ⚠️ 是 gap 需要補。

    3.1 ISO 27001:2022 Annex A 對應

    Control 名稱 對應篇 狀態
    A.5.10 Acceptable use of information 第 1 篇 Iron Rules ✅
    A.5.12 / A.5.13 Classification / Labelling of information 第 1 篇 A/B/C 分級 ✅
    A.5.19-21 Supplier relationship 第 4 篇 OpenClaw 教訓 ✅
    A.5.34 PII protection 第 2 篇脫敏 pipeline ✅
    A.6.3 Awareness, education, training 第 1 篇 Layer 3 規則+教育 ✅
    A.8.3 Information access restriction 第 5 篇 iDempiere AD_Role ✅
    A.8.15 Logging 第 2 篇 Gateway audit log ✅
    A.8.20-23 Networks security / Web filtering 第 1 篇 Gateway 流量管制 ✅
    A.8.28 Secure coding 第 6 篇 LLM 產 HTML 安全規範 ⚠️ 部分
    A.8.32 Change management 第 2 篇 git PR review ✅
    A.5.7 Threat intelligence 未涵蓋 ⚠️ Gap
    A.5.30 ICT readiness for business continuity 未涵蓋 ⚠️ Gap
    A.7.x Physical controls(機房 / 進出管制) 未涵蓋 ⚠️ 範圍外

    3.2 ISO 42001:2023 Annex A 對應(關鍵 9 個 control objectives)

    42001 Annex A 範疇 對應篇 狀態
    AI 政策(AI Policy) 第 1 篇 Iron Rules + 第 2 篇 Working Group ✅
    AI 風險評估(AI Risk Assessment) 第 2 篇分級表 + 第 4 篇 OpenClaw 廠商風險 ✅
    AI 系統影響評估(AI Impact Assessment) 第 2 篇 Working Group 跨部門 ✅
    AI 系統生命週期(AI System Lifecycle) 第 2 篇 Phase 0-5 + 第 4 篇 Harness 修改 ✅
    資料治理(Data Management) 第 5 篇 iDempiere AD_Role + 分級表 ✅
    透明度與可解釋(Transparency) 第 4 篇三層漏斗(規則優先,LLM 兜底) ✅
    第三方關係(Third-party relationships) 第 4 篇 Enterprise 合約 + DPA ✅
    監控與量測(Monitoring & Measurement) 第 2 篇 KPI Dashboard ✅
    人為監督(Human Oversight) 第 2 篇 Curator + 第 6 篇預設 read-only ✅
    偏見緩解(Bias Mitigation) 未明確涵蓋 ⚠️ Gap
    事故管理(AI Incident Management) 部分(audit log 可追,但無 SOP) ⚠️ 部分

    四、Gap 補強方案

    對應前面標 ⚠️ 的條款,給每個 gap 具體補強做法:

    4.1 A.5.7 Threat intelligence

    • 定期收集 LLM 廠商安全公告(Anthropic / OpenAI / Microsoft 等)
    • 訂閱 prompt injection / jailbreak / model 漏洞情報源(OWASP Top 10 for LLM Applications)
    • 每季 working group 會議納入「AI 威脅情報」議程,新威脅進腦子的 brain markdown

    4.2 A.5.30 ICT readiness for business continuity

    • Gateway 高可用(HA)+ 失效時的降級策略(本地 LLM 接管)
    • 本地 Ollama 機器是 backup endpoint(雲端 frontier 掛時切回來)
    • BCM 演練每年 1 次:模擬 Anthropic API 全面斷掉,測員工是否能繼續工作

    4.3 A.8.28 Secure coding(LLM 產 HTML)

    • 第 6 篇講的「textContent 不用 innerHTML」、「不用 eval」是 prompt 規範,但需要 server side 驗證
    • Gateway 端加 HTML scanner:用 ESLint security rules 或 OWASP HTML Sanitizer 掃 LLM 產的 HTML
    • 不通過 scanner 的 HTML 不出 Gateway,改要員工重新 prompt

    4.4 ISO 42001 偏見緩解(Bias Mitigation)

    • 定期測試 LLM 對特定 prompt 的回應差異(性別、年齡、地區)
    • 建立 baseline test set:每季用同一組 prompt 測各廠 LLM,看 bias drift
    • Working Group 評估該 bias 是否影響業務,進腦子 brain markdown 註明

    4.5 AI 事故管理(Incident Management)

    • 定義「AI 事故」:LLM 產生危害內容、員工誤洩 A 級資料、Gateway 規則失效、模型 hallucination 造成業務錯誤等
    • SOP:發現 → 通報 CISO → audit log 凍結 → 影響評估 → 補救 → 事後檢討進 brain
    • 每年至少 1 次 incident 演練(tabletop exercise)

    五、鄉村包圍踏實落地的 5 個 Phase Gate

    第三篇講了大方向。本節補上「每個 Phase 過渡前的硬條件」,沒過 Gate 不要硬上下一階段。每個 Gate 同時對應 ISO 稽核里程碑。

    Gate 時機 硬條件 ISO 對應
    G0 啟動 M1 W1 CIO 簽核 3 條集團 Iron Rules + 任命準 CISO 42001 Clause 5 Leadership commitment
    G1 種子 M2 結束 至少 2 個 BU 各有 5 人在用、無重大 Iron Rules 違反事件 27001 A.6.3 Awareness 已生效
    G2 根據地 M4 結束 至少 2 BU 完成雙 Repo + 分級表 v0.1 + 脫敏字典 + Pre-commit hook 27001 A.5.12-13 + 42001 Data Management
    G3 包圍 M6 結束 Working Group v1 集團 CLAUDE.md + 集團分級表 + 三場核心會議全 done 42001 Clause 6 Planning + AI Policy 落地
    G4 進城 M9 結束 Gateway 上線、雙引擎接入、KPI Dashboard 跑、北極星比例 > 70% 27001 A.8.x + 42001 Clause 8 Operation
    G5 稽核就緒 M12 內部稽核完成、gap 補完、外部稽核機構 walk-through 通過 兩標準 stage 1 audit 通過

    5.1 過 Gate 的紀律

    • G1-G2 沒過,不要進 G3 包圍:沒實戰數據的 Working Group 會回到「法務全判 A 級」失敗模式
    • G3 沒過,不要急著裝 Gateway:沒分級表的 Gateway 是裝飾,只浪費 RD 時間
    • G4 沒過,不要排稽核:北極星 < 70% 表示員工沒採用,稽核員問「實際運作」會答不出來

    六、多場景統一治理框架

    6.1 五個共用元件(全公司一套)

    元件 角色 維護方
    LLM Gateway 所有 AI 流量必經(LLM call + ERP query) 中央 RD + IT
    分級對應表 A/B/C 級資料定義 Working Group 月度 patch
    Audit Log 全程紀錄(誰、何時、查什麼) 中央 SIEM
    Curator 制度 brain 品質把關 + 過時知識淘汰 每 BU 一名
    KPI Dashboard 月度健檢 + 北極星追蹤 中央 RD

    6.2 五種角色 × 四類工具的整合矩陣

    角色 \ 工具 Coding Agent Chat-native Bridge Self-Service HTML
    RD ✅ 主要 輔助 ✅ 出差/移動 輔助
    銷售 不適用 ✅ 主要 不適用 ✅ 主要
    客服 不適用 ✅ 主要 不適用 ✅ 主要
    採購 不適用 ✅ 主要 不適用 ✅ 主要
    管理層 不適用 輔助 不適用 ✅ 主要(儀表板)

    關鍵:不同角色用不同工具,但全部走同一個 Gateway。Gateway 那層的分級 / 脫敏 / audit / 路由規則,所有工具共用。

    6.3 確保「正確 / 安全 / 合規 / 整合」的四個機制

    • 正確:資料不來自 LLM 幻覺,而是來自 ERP via MCP/Gateway。LLM 只是把 ERP 資料整理 + 渲染,不產生資料
    • 安全:三層縱深 — 員工身分(SSO)、Gateway 規則(分級脫敏)、ERP 角色(AD_Role)
    • 合規:每個元件都對應 ISO 控制項,稽核證據自動 export
    • 整合:Single Source of Truth — 不同部門看到的資料一致(因為都來自同一個 ERP)、不同 AI 工具產的回應背後是同一個 Gateway

    七、月度健檢:踏實的可量測指標

    7.1 北極星(唯一最重要)

    本月 Gateway request 數 ÷ (Gateway + 偵測到的網頁版 LLM 流量)
目標: 90%+
< 70% = 拉力策略失敗,要查為什麼員工繞過

    7.2 三個關鍵健檢指標

    指標 定義 目標 頻率
    覆蓋率 月活使用 Gateway 員工 / 全公司 80%+ 月
    合規 gap 減少率 本季新發現 gap 數 vs 已修復 gap 數 修復 ≥ 新增 季
    稽核就緒度 90% 證據可從系統自動 export M9 後達標 季

    7.3 月度報告(高層用)

    不要丟一堆數字給高層,只回答三個問題:

    1. 「上個月 X% 員工選擇 Gateway over 網頁版」← 北極星
    2. 「員工繞過 Gateway 的 Top 3 原因」← 下個月修哪邊
    3. 「ISO 稽核就緒度 + 安全收益 + 雲端費用」← 投資回報

    八、稽核準備 90% 自動化

    傳統公司 ISO 稽核要花 1-2 個月補資料、做文件、開會。腦子系統的設計讓大部分證據自動產出:

    稽核需要的證據 來源 準備時間
    AI 政策文件 + 變更歷史 company-brain git log 0(隨時可拉)
    分級表執行紀錄 Gateway audit log 0(已存在)
    脫敏執行實證 Gateway pipeline log 0(已存在)
    員工訓練紀錄 HR 既有訓練系統 既有資料
    第三方供應商 DPA 合約管理系統 既有資料
    KPI 持續監控 Dashboard 0(自動產生)
    變更管理 git PR 紀錄 0(已存在)
    事故管理 SIEM ticket 系統 既有系統
    人為監督 Curator 月度 review log 0(已存在)

    結果:RD 投入稽核準備時間從 1-2 個月降到 1-2 週。準備重點變成「整理 + 解釋」,而不是「補資料」。

    九、12 個月時程(對應第三篇 + 本文)

    月 關鍵交付 Gate
    M1 Iron Rules 三條 + 準 CISO 任命 + 種子 BU 招募 G0
    M2 2 BU 種子員工開始用 AI G1
    M3-M4 BU 各自雙 Repo + 分級表 v0.1 + 脫敏字典 G2
    M5-M6 Working Group 三場核心會議 + 集團 v1 G3
    M7-M9 Gateway 上線 + 雙引擎 + Self-service HTML + iDempiere MCP G4
    M10-M11 Gap 補強 + 內部稽核 + 外部顧問 walk-through —
    M12 ISO 27001 + 42001 stage 1 audit G5

    對 80 人公司:可加速到 6-9 個月。對萬人集團:可能延長到 18 個月,但鄉村包圍策略讓每個 BU 看到自己的進度,而不是等全集團一起。

    十、結語:從 6 篇到 1 個治理框架

    前六篇是分散的拼圖:Why / How / Scale / Tools / ERP / Self-Service。本篇把它們收成一個整體。

    「合不合 ISO」答案是:大部分天然合,有 5 個 gap 要補強。「鄉村包圍怎麼踏實做完」答案是:5 個 Phase Gate + 月度健檢 + 北極星 KPI。「多場景多用戶多工具怎麼統一」答案是:5 個共用元件 + 角色×工具矩陣。

    真正讓系統「正確、安全、合規、整合」的不是任何一個元件,是所有元件都會合在 Gateway 那一層:那是員工、AI、ERP、稽核員看的同一個交集點。設計對了,後面都對。

    對企業 IT 主管的最後一個具體下一步:

    1. 把本文的 ISO 控制項對應表存成 git repo 一份檔,作為日後稽核 SoA(Statement of Applicability)的基礎
    2. 下一次 working group 會議,把本文的 5 個 Phase Gate 排進共享日曆
    3. 稽核機構初步接洽:Schellman / TÜV SÜD / BSI / DNV 任選一家,問整合 27001 + 42001 報價
    4. 北極星 KPI 上 dashboard,讓員工看得到(透明度本身是 ISO 42001 的要求)

    延伸閱讀:腦子系統七篇

    可運作的 Reference Links(2026/5 撰文時驗證)

    ISO 標準官方

    Annex A 控制項對照(實作指南)

    業界實戰

    OWASP Top 10 for LLM(對應 A.5.7 Threat Intelligence)

  • 給銷售的 AI 工具:LLM 產自助 HTML × ERP CRUD × 即時資訊圖

    重點摘要(TL;DR)

    • 銷售/業務人員在 Telegram 一句話「幫我畫上週每個客戶訂單金額長條圖」 → LLM 30 秒產出 self-contained HTML 檔案 → 員工瀏覽器點開 → 看到即時圖表。
    • HTML 是 standalone 純靜態,從 CDN 載 Chart.js + Tailwind,內含 JS 透過公司 Gateway 對接 iDempiere REST(不直連 ERP)。
    • 四層架構:Generation(LLM 產)/ Execution(瀏覽器跑)/ Data(Gateway proxy)/ Rendering(Chart.js 渲染)。
    • 混合模式:LLM 產 HTML 時 inline 一份預載資料(打開立即顯示),HTML 內按「重新整理」可主動 fetch 最新值。速度和即時性兼得。
    • 安全設計:HTML 不含 secrets、Gateway 認 SSO、LLM 產的 HTML 用 textContent 防 XSS、Gateway 校驗 OData filter 防 injection、員工只看到 AD_Role 允許的資料。
    • 本文是腦子系統的第六篇,前五篇:Why / How / Scale / Tools / ERP。

    一、使用情境

    銷售 Tom 在通勤路上滑手機,腦子裡想到「**等等開會要秀上週業績**」。

    傳統流程(沒有這個工具)

    1. 到公司打開電腦
    2. 登入 ERP
    3. 找到訂單視窗
    4. 篩選日期
    5. 匯出 Excel
    6. 用 PowerPoint / Excel 畫圖
    7. 合計花 30-60 分鐘

    新流程(本文設計)

    1. Telegram 對 bot 說:「上週每個客戶訂單金額長條圖」
    2. 30 秒後 bot 回 HTML 檔(或連結)
    3. 點開,圖表立刻渲染
    4. 開會時直接全螢幕秀
    5. 合計花 30 秒

    關鍵:銷售不需要學任何工具、不需要安裝 app、不需要 IT 部署任何東西。產出的 HTML 還可以分享給同事、存證、離線重看。

    二、四層架構

    銷售 Tom (Telegram chat)
   ↓
[Generation 層] LLM 看公司腦 + 員工 prompt
   ↓ 產 self-contained HTML
HTML 檔案 (Chart.js + Tailwind 從 CDN 載)
   ↓ Tom 在瀏覽器打開
[Execution 層] 瀏覽器跑 HTML 內 JS
   ↓ JS 對 https://gateway.example.com/erp/query 發 fetch
[Data 層] 公司 Gateway (LiteLLM + Portkey + 自製 ERP proxy)
   ↓ Gateway 帶 Tom 的 SSO 身份
   ↓ 呼叫 iDempiere MCP server / REST API
   ↓ iDempiere AD_Role 自動過濾資料
   ↓ 回 JSON
HTML 內 JS 接到 JSON
   ↓
[Rendering 層] Chart.js 渲染圖表 / 動態表格 / 資訊圖

    四層各自的職責清晰、可獨立替換:

    • Generation:換 LLM(Claude/GPT/本地 Qwen)不影響其他層
    • Execution:瀏覽器標準環境,任何裝置都能跑(Mac / Windows / iPhone Safari)
    • Data:Gateway 換成內部 service mesh、ERP 換成另一套都不影響 HTML
    • Rendering:換 Chart.js 為 ECharts / Plotly 只改前端,後端不動

    三、混合模式:預載 + 即時刷新

    LLM 產生 HTML 時面對一個取捨:

    模式 優點 缺點
    A 純 inline:LLM 把資料寫死進 HTML 簡單、離線可看、無 CORS 資料是快照,要新查就要重新產
    B 純 fetch:HTML 啟動才查 每次最新 打開時白屏 1-2 秒、需連線
    C 混合(推薦):預載 + 重新整理按鈕 立即顯示 + 隨時更新 + 離線可看快照 HTML 較大(包含初始資料)

    實務上 C 混合模式最佳。實作:LLM 在產 HTML 時順便呼叫一次 Gateway 拿初始資料,把 JSON 寫進 HTML 的 const initialData = [...],同時保留 refresh() 函數讓員工按按鈕主動更新。

    四、LLM 怎麼產 HTML — Prompt 設計

    給 LLM 的 system prompt 要包含五件事:

    1. HTML 模板骨架:固定的 head / body 結構,用哪個 CDN 圖表庫
    2. Gateway URL 與 API schema:fetch 要打哪、payload 格式
    3. 可用 ERP table 與欄位:從公司腦讀(C_Order / C_BPartner / M_Product 等的可查欄位)
    4. OData filter 語法:eq/neq/gt/contains 等(注意 iDempiere 用 neq 不是 ne)
    5. 安全規範:用 textContent 不用 innerHTML、不要 hardcode token、不要 eval()

    4.1 System Prompt 範例(精簡版)

    You are a HTML dashboard generator for sales staff.

CONTEXT (from company brain):
- Available ERP tables: C_Order, C_BPartner, M_Product, M_InOut
- Common columns for C_Order: GrandTotal, DateOrdered, C_BPartner_ID, IsSOTrx
- Filter syntax: OData (use 'neq' not 'ne')
- Gateway endpoint: https://gateway.example.com/erp/query
- Gateway auth: SSO cookies (credentials: 'include')

OUTPUT REQUIREMENTS:
1. Generate ONE complete self-contained HTML file
2. Use Chart.js via CDN (https://cdn.jsdelivr.net/npm/chart.js)
3. Use Tailwind via CDN (https://cdn.tailwindcss.com)
4. Include initial data inline (call Gateway once and embed JSON)
5. Provide a refresh() function for live update
6. Use textContent (NEVER innerHTML) when displaying data
7. Add a loading spinner during fetch
8. Style: clean, presentation-ready (用得上開會秀客戶)

USER QUERY: {{user_message}}

    五、產出 HTML 範例(完整可執行)

    下面是 LLM 看到「上週每個客戶訂單金額長條圖」這個 query 後產出的範例 HTML。這是真實可執行的 self-contained 檔案:

    <!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>上週訂單金額(by 客戶)</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-6 font-sans">

<div class="max-w-4xl mx-auto">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-bold">上週訂單金額(by 客戶)</h1>
    <button id="refreshBtn"
            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
      🔄 重新整理
    </button>
  </div>
  <p id="meta" class="text-sm text-slate-500 mb-4"></p>
  <canvas id="chart" height="120"></canvas>
  <table class="mt-6 w-full text-sm">
    <thead class="bg-slate-200">
      <tr><th class="text-left p-2">客戶</th><th class="text-right p-2">訂單數</th><th class="text-right p-2">金額</th></tr>
    </thead>
    <tbody id="tableBody"></tbody>
  </table>
</div>

<script>
// === 預載資料(LLM 產生時 inline 進來) ===
const initialData = [
  {customer: "客戶 A", orderCount: 5, amount: 1280000},
  {customer: "客戶 B", orderCount: 3, amount: 850000},
  {customer: "客戶 C", orderCount: 7, amount: 2100000},
  {customer: "客戶 D", orderCount: 2, amount: 420000}
];
const generatedAt = "2026-05-02 09:30";

// === Gateway 設定 ===
const GATEWAY_URL = "https://gateway.example.com/erp/query";
const QUERY = {
  table: "C_Order",
  filter: "DateOrdered ge '2026-04-25' and DateOrdered le '2026-05-01'",
  groupBy: "C_BPartner_ID",
  aggregate: ["count", "sum(GrandTotal)"]
};

// === 渲染函數 ===
let chart;
function render(data, ts) {
  // 注意:用 textContent 不用 innerHTML 防 XSS
  document.getElementById('meta').textContent = `資料時間:${ts}`;

  const tbody = document.getElementById('tableBody');
  tbody.textContent = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    tr.className = 'border-b';
    [row.customer, row.orderCount, row.amount.toLocaleString()].forEach((v, i) => {
      const td = document.createElement('td');
      td.className = i === 0 ? 'p-2' : 'p-2 text-right';
      td.textContent = v;
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });

  if (chart) chart.destroy();
  chart = new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels: data.map(d => d.customer),
      datasets: [{
        label: '訂單金額(NTD)',
        data: data.map(d => d.amount),
        backgroundColor: 'rgba(59, 130, 246, 0.6)'
      }]
    },
    options: {
      responsive: true,
      plugins: {legend: {display: false}}
    }
  });
}

// === 即時刷新 ===
async function refresh() {
  const btn = document.getElementById('refreshBtn');
  btn.disabled = true;
  btn.textContent = '⏳ 載入中...';
  try {
    const r = await fetch(GATEWAY_URL, {
      method: 'POST',
      credentials: 'include',  // 帶 SSO cookies
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(QUERY)
    });
    if (!r.ok) throw new Error(`Gateway error ${r.status}`);
    const data = await r.json();
    render(data.rows, new Date().toLocaleString('zh-TW'));
  } catch (e) {
    alert('刷新失敗:' + e.message);
  } finally {
    btn.disabled = false;
    btn.textContent = '🔄 重新整理';
  }
}

// === 初始化 ===
document.getElementById('refreshBtn').addEventListener('click', refresh);
render(initialData, generatedAt);
</script>

</body>
</html>

    這個檔案存成 orders.html,雙擊即可在瀏覽器打開。打開時看到預載資料(已渲染圖表 + 表格);按「重新整理」就 fetch 最新資料。整個檔案約 80 行,包含全部 logic。

    六、安全設計(必看)

    6.1 HTML 端

    • ❌ 絕不在 HTML 寫 token / API key:HTML 是員工拿到的檔案,寫 token 等於洩漏。所有認證在 Gateway server side
    • ✅ 用 fetch(..., {credentials: 'include'}) 帶員工 SSO cookies
    • ✅ 渲染用 textContent,不用 innerHTML(防 LLM 產的 XSS)
    • ✅ 不用 eval()、Function() 等動態 code 執行
    • ✅ Chart.js / Tailwind 從固定 CDN 載(版本鎖定),不從不可信來源載

    6.2 Gateway 端

    • SSO 認證:員工已登入公司,cookies 自動帶,Gateway 認 user identity
    • OData filter 校驗:LLM 產生的 filter 要過 Gateway 校驗(白名單欄位、operator 限制),防 SQL injection / 越權查詢
    • Rate limit:單一員工每分鐘最多 X 個 query,防 LLM 產的迴圈失控
    • Audit log:每個 query 記錄(誰、何時、查什麼、回傳幾筆),進 SIEM
    • CORS 白名單:Gateway 只允許指定 origin(若 HTML 託管在內網檔案分享伺服器,設定該 origin)

    6.3 ERP 端

    • iDempiere AD_Role 自動套:Gateway 帶員工 token 進 iDempiere,業務 Tom 看不到 CFO 才看的到的資料
    • 不直連 ERP:HTML 的 fetch 不直接打 iDempiere,一律走 Gateway proxy。理由:ERP 不該暴露在 internet,Gateway 才是受控邊界
    • Process call 限制:銷售工具預設 read-only,要寫資料(下單、修改)需要更高層審核或專用工具

    七、CORS / 認證的具體做法

    三條路徑分析:

    路徑 CORS 認證 推薦
    HTML → 直連 iDempiere REST 需開 iDempiere CORS 設定 JWT token 存 HTML(危險) ❌ 不要
    HTML → 公司 Gateway → iDempiere Gateway 設 CORS 白名單 SSO cookies 自動帶 ✅ 推薦
    HTML → MCP server → iDempiere MCP server 設 CORS MCP OAuth 2.1 ⚠️ 進階(複雜但可)