簡單來說
- 你發布的每個檔案,任何能開啟網站的人都讀得到,通行碼也不會改變這一點。請不要放入金鑰、密碼和客戶資料。
- 沒有伺服器不代表沒有風險。要留意貼上的金鑰、外部指令碼,以及用 innerHTML 插入的文字。
- 如果金鑰外洩,請先撤銷它。光是刪除檔案是不夠的。
哪些內容會公開
這是要記住的唯一規則。當你發布網站時,其中的每個檔案,任何知道網址的人都能下載。這包括沒有任何頁面連結到的檔案。用「壓縮」或「混淆」來隱藏程式碼,只是讓它更難讀,並不是變成機密。
| 檔案類型 | 是否公開? | 範例 |
|---|---|---|
| HTML、CSS、JavaScript | 有 | 輸入在 script.js 裡的 API 金鑰 |
| 圖片、PDF、下載檔 | 有 | 沒有任何頁面連結的價目表 PDF |
| 設定檔 | 有 | 裡面有權杖的 config.json |
.env 檔案 | 是,如果有上傳 | 放在專案旁邊的金鑰 |
原始碼對應檔(.map) | 是,如果有上傳 | 你原始程式碼的可讀副本 |
.git 資料夾 | 是,如果有上傳 | 裡面有「已刪除」金鑰的舊歷史紀錄 |
| 你沒有發布的檔案 | 無 | 筆記、草稿,以及專案的其餘部分 |
機密金鑰藏在哪裡
AI 工具很擅長讓東西能動。有時最快的方法,就是把金鑰直接貼進程式碼。請找找這些:
- JavaScript 中的金鑰。一個直接從網頁呼叫 AI 服務的聊天機器人小工具,金鑰就寫在程式碼裡。任何人都能複製那組金鑰,讓你的帳單暴增。
.env檔案。專案會把金鑰放在一個叫.env的檔案裡。它應該留在你的電腦上,但如果你發布整個專案資料夾,它就會被上傳。- 設定檔和建置檔案。設定檔、原始碼對應檔和遺留的測試檔,可能含有你不想分享的金鑰或路徑。
.git資料夾。這個隱藏資料夾保存著專案的完整歷史,包括很久以前就「刪除」的金鑰。
公開金鑰沒問題
有些金鑰就是設計放在網頁裡的:Stripe 的公開金鑰(pk_...)、限制只能用在你網域的地圖金鑰、分析 ID。服務的說明文件會寫明金鑰能否用在瀏覽器。如果寫著「機密」或「僅限伺服器端」,或以 sk_ 開頭,就絕不能放進你的網站。
如果某個功能需要機密
如果某個功能只能搭配機密金鑰運作,單純的網站無法自行安全地做到。你的選項:
- 使用專門的服務:聯絡表單用表單服務、約診用預約工具、付款用託管結帳。它們會幫你保管機密資訊。
- 把機密放在支援的服務上的小型伺服器函式後面,讓你的頁面去呼叫它。
- 暫時放棄這個功能。一個清楚的電子郵件連結,勝過一組外洩的金鑰。
直接問你的 AI:「這個網站有包含任何機密金鑰嗎?如果有,我們要怎麼做才能不把機密放進瀏覽器?」它通常一被問到就會發現問題。
從其他地方載入的指令碼
許多 AI 做的頁面會從其他網站載入指令碼:字型載入器、圖示包、分析工具、聊天小工具。每一個都以完整權限在你的頁面上執行,可以讀取訪客輸入的內容,也能改變他們看到的畫面。如果那個網站被駭,你的頁面也會跟著被駭。
- 少用一點。問問:「這個頁面真的需要每一個外部指令碼嗎?」
- 固定版本。使用
library@1.2.3,不要用「latest」,這樣檔案才不會在你不知情的情況下改變。 - 加上完整性檢查(函式庫有提供時)。這樣瀏覽器就會拒絕被竄改過的檔案。看起來像這樣:
<script src="https://cdn.example.com/lib@1.2.3/lib.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
- 檢查小工具。分析、聊天和預約小工具通常也會加入 Cookie 和追蹤。要清楚每一個在做什麼,並在隱私權頁面上說明。
安全地把文字放到頁面上
如果你的程式碼從網址列、表單欄位或訪客那裡取得文字,並用 innerHTML 放到頁面上,攻擊者就能夾帶程式碼,在其他人的瀏覽器中執行。這稱為跨站指令碼攻擊,或 XSS。安全的做法是用 textContent 插入純文字,它絕不會被當成程式碼執行。
Find every use of innerHTML, document.write and eval in my site. For each one, say where the text comes from. If it can come from the URL, a form or a visitor, change it to use textContent instead. Tell me what you changed.
你頁面上的聊天機器人
與 AI 對話的聊天框,需要金鑰來呼叫 AI 服務。那把金鑰屬於伺服器,絕不能放在你的頁面裡。另外還有兩件事要知道:
- 提示詞注入。訪客可以輸入指令,企圖騙機器人忽略你的指令。你無法完全阻止這種情況。
- 所以要限制損害。不要讓機器人持有任何機密,也不要讓它執行任何動作。如果它只根據公開文字回答問題,騙術也造成不了什麼傷害。
表單與個人資料
- 只蒐集你需要的。姓名和電子郵件通常就夠了。每多一個欄位,就多一份你必須保護的東西。
- 說明資料去哪裡。你的隱私權頁面應該說明誰會收到這些訊息,以及原因。
- 不要自己做儲存。單純的頁面無法安全地儲存訊息。請使用表單服務,或你的主機內建的功能。
在 Page Lemon,請你的 AI「在我的網站加上聯絡表單」。訊息會寄到你的電子郵件,並保存在你的帳號裡,不需要另外的表單服務。表單包含在付費方案中。請見聯絡表單。
授權與正確性
- 檢查授權。外部的函式庫、字型、圖示和圖片都有使用條款。有些需要署名,有些禁止商業使用。請你的 AI 列出你用了什麼,以及來源。
- 查證事實。AI 可能會捏造價格、評價和說法。發布的人是你。
- AI 寫的作品歸誰所有取決於國家,且仍在釐清中。這不是法律建議。如果事關重大,請諮詢專業人士。
不要貼給你的 AI 的內容
你的網站是公開的,但你的對話並不打算公開。請不要貼進去:
- 客戶名單、訂單或訊息,除非你清楚你的 AI 服務如何處理這些資料;
- 密碼、API 金鑰或登入驗證碼,因為 AI 可能會把它們寫進網站;
- 任何你不會印在傳單上的內容。
製作時請使用佔位名稱和「example@example.com」。真正的資料請自己替換進去。
分享連結前五分鐘的檢查
逐項勾選。或是用下面的提示詞,把掃描的部分交給你的 AI。
已完成 0 / 6
List every external script, key-like string, innerHTML use, form action and personal detail in my site, with the file and line for each. Don't change anything.
檢查沒問題之後,再走一遍網站上線檢查清單。
如果金鑰真的公開了
Page Lemon 如何幫忙
AI 做的網站,往往是由從沒想過這些問題的人發布的,所以我們設了幾道安全網:
.env檔案、.git、node_modules、原始碼對應檔和私密金鑰檔都會被略過,永遠不會對外提供。- 上傳時會檢查是否含有常見種類的機密金鑰和私密金鑰。如果發現,這次上傳的任何內容都不會發布,並會告訴你要修正哪個檔案、哪一行。