深入聊聊前端限制用戶截圖的腦洞

做後台系統，或是版權比較重視的項目時，產品常會提出這樣的需求：能不能禁止使用者截圖？有經驗的開發不會直接拒絕產品，而是引導。

先了解初始需求是什麼？是內容資料過於敏感，嚴禁洩漏。還是內容洩漏後，需要溯源追責。不同的需求需要的方案也不同。來看看就限制用戶截圖，有哪些腦洞？ 【推薦：web前端教學】

有哪些腦洞

v站和某乎上的大佬給了不少腦洞，我又加了點思路。

• 1.基礎方案，阻止右鍵儲存和拖曳。

這個方案是最基礎，目前只能阻擋一些小白用戶。如果是瀏覽器，分鐘調出控制台，直接找到圖片url。也可以直接ctrl p，進入列印模式，直接儲存下來再裁減。

• 2.失焦後加遮罩層

這個方案有點意思，看敏感資訊時，必須滑鼠點在某個按鈕上，照片才完整顯示。如果失去焦點圖片顯示不完整或直接遮罩蓋住。

• 3.高速動態馬賽克

這個方案是可行的，並且在一些網站已經得到了應用，在影片或圖片上隨機插入像素點，動態跑來跑去，對客戶來說，每一時刻螢幕上顯示的都是完整的影像，靠使用者的視覺殘留看圖或影片。即時手機拍照也拍不完全。實際應用需要優化的點還蠻多的。例如用手機錄影就可以看到完整內容，只是增加了截圖成本。

下面是一個知乎上的方案效果。

原網址：https://www.zhihu.com/question/417108591/answer/1450568587

#正經需求vs方案

其實限制使用者截圖這個方案本身就不合理，除非整個裝置都是客製化的，在軟體上閹割截圖功能。為了這個需求增加更複雜的功能對於一些安全性沒那麼高的需求來說，有點本末倒置了。

######下面聊聊正經方案：#########1.對於後台系統敏感資料或圖片，主要是擔心洩漏出去，可以採用斜45度七彩浮水印，想要完全去掉幾乎不可能，就是觀感比較差。 ######2.對於圖片版權，可以使用現在主流的盲水印，之前看過騰訊雲提供的服務，當然成本比較高，如果版權需求較大，使用起來效果比較好。 ######3.視頻方案，tiktok下載下來的時候會有一個水印跑來跑去，當然這個是經過處理過的視頻，非原畫，畫質損耗也比較高。 Netflix等視頻網站採用的是服務端權限控制，走的視頻流，每次播放下載加密視頻，同時獲得短期許可，得到許可後在本地解密並播放，一旦停止播放後許可失效。 ######總之，除了類似Android提供的截圖API等底層功能，其他的功能實作都不完美。即使是底層控制了，一樣可以拍照錄影，沒有完美的方案。不過還是可以做的相對安全。 ###

以上是深入聊聊前端限制用戶截圖的腦洞的詳細內容。更多資訊請關注PHP中文網其他相關文章！