客戶需求，查詢到的圖片只能看，不能提供下載讓使用者自行儲存，那測試過一些工具，由於會有網頁行為產生，所以那些工具根本無法真正地阻擋下載成功，經過一些測試，發現可以透過網頁的 CSS, JS 的撰寫來達成部分功能。敘述如下：

測試命題：
利用網頁開一圖片，測試https://www.gss.com.tw/images/stories/news/gssnews20250725_2_1.jpg

並做禁止下列行為

測試狀況敘述如下：

1. 禁止下載 (滑鼠右鍵)

技術：JavaScript 事件監聽器

關鍵語法：document.addEventListener('contextmenu', function(e) { e.preventDefault(); });

這段程式碼的作用是「監聽」網頁上的「右鍵點擊」事件。當使用者在網頁上點擊右鍵時，事件監聽器會被觸發，而 e.preventDefault() 這行程式碼會立即執行，阻止瀏覽器彈出預設的右鍵選單。

由於右鍵選單通常包含「另存圖片」或「圖片另存新檔」等下載選項，阻止右鍵選單的出現，就能達到禁止下載圖片的目的。contextmenu 事件在使用者點擊滑鼠右鍵時觸發。

event.preventDefault();: 這是關鍵，它會阻止瀏覽器執行右鍵的預設行為（即彈出右鍵選單）。

2. 禁止列印

技術：CSS 媒體查詢與 JavaScript 事件

關鍵語法：@media print { ... } 和 window.onbeforeprint = function() { return false; };

這部分使用了兩種技術來確保列印功能失效：

CSS 媒體查詢 (@media print)：這是一個專為列印設計的 CSS 規則。當瀏覽器進入列印模式時，它會自動將 .image-container 的 display 屬性設置為 none，這會使圖片在列印預覽中完全隱藏。同時，它會在頁面中央顯示一個「禁止列印此頁面」的提示訊息。

JavaScript 事件 (onbeforeprint)：這個事件在瀏覽器即將開啟列印對話框時觸發。通過讓函式回傳 false，我們有效地取消了列印操作。這兩種方法相輔相成，即使其中一種失敗，另一種也能提供備援，確保列印功能被有效阻擋。

3. 禁止使用瀏覽器右上方的選單功能

技術：瀏覽器層級的限制

這是一個重要的概念：網頁程式碼無法直接禁用瀏覽器本身的 UI 功能，例如 Chrome 右上角的「...」選單。這些選單屬於瀏覽器應用程式的一部分，其功能（如下載、列印）是內建且無法被網頁腳本修改的。

因此，我們的網頁只能透過干預行為來達到目的。例如：

當使用者從選單點擊「列印」時，window.onbeforeprint 會生效並阻止列印。

當使用者從選單點擊「下載」時，由於圖片是作為背景圖片呈現，而不是一個可下載的 <img> 標籤，

且右鍵選單已被禁用，下載行為自然就無法成功。

4. 螢幕截圖

Print Screen（PrtScn）或 Windows 鍵 + Print Screen 鎖畫面或不讓你截圖

為什麼大部分網站做不到這件事？

1. JavaScript 無法真正監控截圖行為
   • 在網頁中，要偵測 Print Screen 鍵是可能的，可以用 keydown 監聽器讀取按鍵，但這只是偵測按鍵本身，無法保證截圖就真的成功，或強制阻止截圖。
   • 有些範例提到可監控剪貼簿內容（Clipboard API），但仍需用戶授權，且不穩定。
2. JavaScript 防截圖只能起到微量阻礙作用
   • 網頁可以用 JavaScript 掩蓋畫面（如下按鍵偵測後遮罩畫布），但用戶可輕易透過瀏覽器修改或關閉 JS，或使用像 Snipping Tool 這類外部截圖工具繞過。(本次測試有出現遮罩，但是時間太短，阻擋不了截圖，若把時間設定長一點，遮罩反而失效)
   • 也有用 JS 偵測 Print Screen 然後把畫面變暗，只是稍微增加困難度，無法真正防住。(本次測試同樣的稍稍微等一下時間便案處理就消失了)
3. DRM（數位權利管理技術）確實有效範例
   • 像 Netflix、Hulu 等串流平台使用 DRM、Encrypted Media Extensions (EME)、CDM（內容解密模組）等技術，在截圖時會出現黑畫面或完全截不到畫面。這是因為影片內容被加密，只能透過受控播放器才能顯示。
4. 多數普通網站不進行這類控制
   • 根據 2025 年的調查，絕大多數網站並不具備截圖偵測或阻止功能，因為它們並不需要，也沒有技術能力做到。(測試多次是真的擋不了，但想到兩年前測試好幾個網站他們都成功地擋住了螢幕截圖功能，回去看一下他們的程式是怎麼寫的，但發現兩年後的現在去測試當時被註記，鎖螢幕截圖的網頁，卻真的都鎖不住了，真的是時間會改變一切…)

5. 企業級 DRM／PDF 權限系統：比如 Safeguard PDF DRM，則在文件檢視時加裝防截圖功能，但不是對 Print Screen 按鍵偵測，而是整個系統設計阻

5. 前端保護的局限性

儘管網頁中實作了禁用右鍵和拖曳的功能，並嘗試禁用使用者選取，但這些都屬於客戶端 (Client-Side) 的保護措施。這意味著這些限制是在使用者的瀏覽器中執行的，有經驗的使用者仍然可以繞過這些限制，例如：

• 透過瀏覽器的開發者工具 (Developer Tools) 查看網頁原始碼，直接找到圖片的 URL 並下載。
• 使用瀏覽器的截圖功能。
• 某些瀏覽器擴充功能可能可以繞過這些限制。

因此，如果需要更強大的圖片保護，例如防止未經授權的下載或追溯圖片來源，則必須在伺服器端 (Server-Side) 實作更嚴格的權限驗證、動態圖片生成或數位浮水印等技術。