|
如果你有在使用 AI 開發 WordPress 外掛,並且要設計一些自訂的後台管理介面時,一定遇過資料送出時無法正確儲存,或是儲存後被導向到奇怪的頁面。 根據我的經驗,這十之八九是 Nonce 的問題,AI 在處理 Nonce 這一塊常常會出錯,為了讓 AI 更好地理解該怎麼處理 Nonce,這篇文章就來分享 Nonce 的作用,以及如何讓 AI 不要再犯這種錯。 Nonce 是為了擋 CSRF 而生的所謂的 Nonce,最主要的功能是要防止跨站請求偽造(也就是俗稱的 CSRF)。 CSRF 主要的攻擊方式,是攻擊者誘導已經登入受害者的瀏覽器,自動發送請求到你的網站,也就是說,攻擊者不需要入侵你的網站,只要你的瀏覽器在登入狀態下點擊了惡意網址,攻擊就會開始。 舉個例子:
另一種方式,是用 JavaScript 自動提交表單來攻擊。只要你的分頁沒關、進入惡意網址,而惡意網址又知道你的後台位置,它就能進行跨站請求偽造,達成攻擊,而 WordPress 的後台網址你知、我知、獨眼龍也知,因此非常容易用釣魚的手法誘使受害者點擊。 Nonce 怎麼擋住 CSRF為了解決這個問題,WordPress 設計了 Nonce 機制,用來確保每一個請求都是從自己的網站送出的。Nonce 的全名是 Number Used Once,也就是只用一次的數字,但這個名字其實有點誤導,因為它預設的有效期限是 12 到 24 個小時。 它的運作原理適當使用者載入網站的某個介面(後台、設定頁、表單頁)時,伺服器會用 當使用者按下按鈕觸發操作時,前端會把這個 Nonce 跟其他資料一起送回伺服器。伺服器收到後,用 它能擋住 CSRF 是因為計算 Nonce 的時候帶了 Secret Key(存在 但光有 Nonce 還不夠WordPress 的前台與後台雖然都有 Nonce,但光靠 Nonce 其實是不夠的。 關鍵點在假設今天攻擊者註冊成為你的網站會員(例如訂閱者),當他登入後打開外掛的某個前台頁面,伺服器就會為他產生一個合法的 Nonce,這時他拿到這個 Nonce,就可以放到自己準備的請求中,藉此發送一個「合法的」跨站偽造請求。 所以,除了 Nonce 之外,我們還要檢查身分權限,確保目前的使用者真的有權限執行當下的行為。 基本原則是:如果要防止 CSRF,同時也防止低權限使用者拿到 Nonce 來偷襲,記得除了驗證 Nonce 之外,還必須檢查使用者權限,尤其是當後台操作會修改資料庫,或查詢敏感機密資料時,都要做到 Nonce 與使用者權限的雙重檢查。 一張票進 VIP 廳?想像電影院的剪票口換個方式理解這件事——想像你去看電影:
回到 WordPress: 電影院WordPress 對應API防什麼票nonce 兩道防線缺一不可:
AI 寫 Nonce 最常犯的錯:名稱對不上一個 AI 常犯的問題是它在埋入表單頁面的 Nonce 名稱,跟後端驗證時用的名稱常常不一致,一個頁面中可能同時有多個表單操作行為,AI 很容易搞混特定的 Nonce 應該用在哪一個動作上。 比較好的做法是:
簡單舉例,可以請 AI 先列出像這樣的對照表再開始寫程式碼: 表單行為Nonce action 名稱Nonce 欄位名驗證點儲存設定 把這張表給 AI 當「規格」,再讓它寫程式碼就能大幅降低 Nonce 名稱錯亂的機率。 接案者的自我檢查清單接到的案子要稽核安全,或自己用 AI 寫的時候要避雷,可以照這個清單檢查每一個
四個都做到,才算「我加了 nonce 啊」這句話真的成立。 如果想看完整的 WordPress 外掛安全稽核流程,可以接著看逆向走一次 WordPress 外掛漏洞,學會資安稽核的攻擊者思維;如果是 XSS 那一塊還沒讀過,WordPress XSS 攻擊:漏洞成因與真實 CVE 攻擊案例會把另一條漏洞線補上。整站層級的弱密碼、檔案竄改、XML-RPC 防護則整理在WordPress 安全防護實戰這篇。 — 用 AI 寫 WordPress 外掛踩到坑想找人聊聊?如果你正在用 AI 開發 WordPress 外掛或客製化網站,但每次遇到 Nonce、權限、漏洞這類安全問題就卡住,或者寫出來的程式碼自己也不確定有沒有藏雷——歡迎來聊聊。 我提供兩種服務:
不取代你開發,而是讓你的 AI 開發流程不會踩到因為 Nonce 而造成的卡關。 歡迎到 WordPress AI 開發顧問服務 看完整方案,或與我聯絡聊聊你的案子。 |
大家端午快樂,這週分享一下我目前的主力開發工具~ 開發工具的使用歷程 在 AI 時代前,我都是使用 PhpStorm。PHPStorm 確實順手——跳到函式定義、儲存時自動格式化和檢查,這些功能讓開發效率提升不少。 進入 AI 時代後,我用了 Cursor 好幾個月。自動補全和聊天介面加速了不少開發流程。但用了一段時間,我發現自己還是需要理解程式碼的能力,最後回到 PHPStorm 搭配 Claude Code 的組合。 後來也試過 Google 的 Antigravity。除了免費額度以外,用起來跟 VS Code 差不多。直到某天我打開系統監控,發現 Antigravity 的記憶體佔用竟然到了 40 幾 GB。 40 幾 GB,只為了一個程式碼編輯器。 程式碼視窗還重要嗎? 這讓我開始重新思考一個問題:傳統 IDE 的設計核心是「程式碼」。整個介面以程式碼編輯器為主體,側邊欄、終端機、除錯面板都是輔助角色。 但我現在的開發流程已經變了。大部分時間我在跟 Claude Code 對話,描述需求、確認方向、審查它產出的結果。真正需要自己打開檔案逐行閱讀的時候,一天可能不到三成。...
前陣子,我教會一位朋友使用 Claude Code。他完全不會寫程式,連終端機是什麼都沒聽過。但他有一個很清楚的產品想法,一直找不到工程師幫他做。 兩週後,他把那個產品完整地實作出來了。 不是原型、不是 wireframe,是一個可以實際運作的產品。他全程沒有寫過任何一行程式碼——他只是用中文描述他要什麼功能,Claude Code 就幫他把程式寫出來、跑起來、除完錯。 你可能會想:那它跟 ChatGPT 到底差在哪? 一、你說中文,它寫程式 大部分人聽到「Claude Code」就先退了一步。Code,程式碼,那不是工程師的事嗎? 試試看跟它說這句話:「幫我把這個資料夾裡所有 PDF 的檔名,整理成一份清單。」 它會自己寫一段程式碼、跑完、把清單生出來。你完全不需要看懂那段程式碼。同樣的事在 ChatGPT 上做,它會把程式碼貼給你看,然後你得自己想辦法找地方執行。 你需要學的不是程式語言,而是怎麼把需求講清楚。但光是能下指令還不夠——如果它每次只能做一件事就停下來等你,那跟比較聰明的 Siri 也沒什麼兩樣。 二、它不是聊天機器人,它是 Agent 用過 ChatGPT 或...
這禮拜的主題比較硬一點,但如果你有在用 AI 開發外掛然後想讓自己的 Antigravity 或是 Claude Code 讀到網站的內容像是查訂單,這篇教學就非常適合貼給 AI 請它幫你開發~ 話說之前做 DWP 的 LINE 聊天機器人查 WooCommerce 訂單,會員可以直接在 LINE 裡問訂單狀態、查活動,背後是 OpenAI 的 Function Call 在跑。整個架子是自己刻的——每一個會員問句能對應到的後端動作,要自己定義一份 JSON Schema 告訴模型「這個工具吃什麼參數、回什麼結構」,再寫一個 dispatcher 收到 model 的 tool_calls 之後手動 routing 到對應的 WP 函式,回傳值也要自己塞回對話 context。 換一家模型供應商就要重做一次 schema 格式(OpenAI、Anthropic、Gemini 的欄位名稱都不一樣),漏處理一個錯誤路徑 LINE 那邊就吐出一堆奇怪的字。一份「查訂單狀態」的能力,被綁死在這個 LINE Bot 專案裡,搬不到別處用。 直到 WordPress 6.9 把...