GAS web app 與 Google drive 的「防盜連機制」造成圖片無法顯示

直接回答:是。這不是傳統程式寫錯的 bug,而是 Google 的「防盜連機制」加上現代瀏覽器「阻擋第三方 Cookie」造成的。

你的 GAS 網頁(script.google.com)和圖片(drive.google.com)屬於不同網域。當網頁被包在 iframe 執行時,瀏覽器為了隱私,常會把 Google Drive 的驗證 Cookie 擋掉。結果就是:Google Drive 即使檔案是公開的,因為讀不到 Cookie 確認權限,或是發現請求來自外部網頁(Referrer),就直接拒絕顯示圖片(403 Forbidden)。

這裡有兩個不用改後端架構的快速解法,建議先試第二個,效果最好。

解法一:加入 Meta 標籤欺騙 Google Drive

這是最簡單的嘗試。在你的 HTML 檔案的 <head> 區域,加入下面這行程式碼。它的作用是告訴瀏覽器「請求圖片時,不要告訴 Google Drive 我是從哪裡來的」,這樣通常可以繞過防盜連檢查。

HTML

<meta name="referrer" content="no-referrer">

解法二:使用 lh3 專用連結(推薦)

Google Drive 其實有一個隱藏版的連結格式,專門用來讀取檔案內容,速度快且比較不會被擋。建議你修改 code.gs 裡面的 uploadPhoto 函式,把儲存的 URL 格式換掉。

原本的格式(容易被擋):

https://drive.google.com/uc?export=view&id=檔案ID

請改成這種格式(穩定):

https://lh3.googleusercontent.com/d/檔案ID

修改程式碼示範

請回到 code.gs,找到 uploadPhoto 函式,修改產生 viewUrl 的那一行:

JavaScript

// 原本的寫法 (註解掉或刪除)
// const viewUrl = "https://drive.google.com/uc?export=view&id=" + fileId; 

// 改成這樣
const viewUrl = "https://lh3.googleusercontent.com/d/" + fileId;

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *