💯 網頁動態浮水印 (Watermark)
透過 Canvas 技術動態生成背景防護層，有效降低未經授權截圖的風險。
1. 動態溯源： 浮水印包含您的 IP (216.73.217.130) 與存取時間。
2. 點擊穿透： 完全不影響下方文字選取與按鈕點擊。
3. 防刪除監控： 內建 MutationObserver，嘗試刪除元件將觸發頁面重整。
2ns.org 公司內部機密文件
這是一份包含敏感資訊的網頁內容。為了防止未經授權的截圖或外洩，本頁面已啟用動態浮水印防護。
安全日誌 (WAF Log)
- Access User IP: 216.73.217.130
- Security Level: Medium High
- Protection Protocol: HTTP/2 (SSL Encrypted)
⚠️ 警告：此頁面內容受機密協議保護，嚴禁以任何形式翻拍或轉傳。
|
網頁動態浮水印原始碼 |
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>2ns.org網頁動態浮水印範例</title>
<style>
/* 1. 基礎頁面樣式 */
body {
font-family: "Microsoft JhengHei", sans-serif;
line-height: 1.6;
padding: 20px;
color: #333;
}
.content-box {
max-width: 800px;
margin: 0 auto;
border: 1px solid #ddd;
padding: 30px;
background: #fff;
}
/* 2. 防護層 CSS (防止使用者點擊到浮水印) */
#watermark-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999; /* 確保在最上層 */
pointer-events: none; /* 關鍵：讓滑鼠點擊穿透到下方內容 */
background-repeat: repeat;
}
</style>
</head>
<body>
<!-- 浮水印容器 -->
<div id="watermark-container"></div>
<!-- 網頁內容區 -->
<div class="content-box">
<h1>2ns.org公司內部機密文件</h1>
<p>這是一份包含敏感資訊的網頁內容。為了防止未經授權的截圖或外洩，本頁面已啟用動態浮水印防護。</p>
<hr>
<h3>日誌資訊說明</h3>
<p>目前的系統監控顯示，所有存取行為皆會被記錄在 Web Application Firewall (WAF) 日誌中。</p>
<ul>
<li>動作 (Action): Passthrough</li>
<li>安全性等級: 中等</li>
<li>監控協定: HTTP/HTTPS</li>
</ul>
<p>請遵守公司資訊安全規範。</p>
</div>
<script>
/**
* 產生浮水印的函式
* @param {string} text1 - 第一行文字 (如：使用者姓名)
* @param {string} text2 - 第二行文字 (如：日期或 IP)
*/
function createWatermark(text1, text2) {
const canvas = document.createElement('canvas');
canvas.width = 400; // 浮水印方塊寬度
canvas.height = 300; // 浮水印方塊高度
const ctx = canvas.getContext('2d');
// 設定文字樣式
ctx.font = '18px "Microsoft JhengHei"';
ctx.fillStyle = 'rgba(180, 180, 180, 0.5)'; // 數值越大，顏色越深
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 移動畫布中心並旋轉
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-25 * Math.PI / 180); // 旋轉 -25 度
// 繪製文字 (可繪製多行)
ctx.fillText(text1, 0, -10);
if(text2) {
ctx.font = '14px Arial';
ctx.fillText(text2, 0, 15);
}
// 將畫布轉為 Base64 圖片並套用至容器背景
const base64Url = canvas.toDataURL();
const container = document.getElementById('watermark-container');
container.style.backgroundImage = `url(${base64Url})`;
}
// 執行產生浮水印：帶入自定義資訊
const now = new Date().toLocaleString();
createWatermark('2ns.org內部機密secrts：secrts User', 'Access Time: ' + now);
// 進階：防止使用者透過 F12 刪除容器 (簡易防範)
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.removedNodes.length) {
mutation.removedNodes.forEach(function(node) {
if (node.id === 'watermark-container') {
location.reload(); // 如果浮水印標籤被刪除，就自動重整頁面
}
});
}
});
});
observer.observe(document.body, { childList: true });
</script>
</body>
</html>