在查询 SSRF 漏洞相关文档的时候，找到一个网站，发现这个网站网页加了水印，觉得挺有意思。

于是读了它的代码，在此基础上稍加改进，与大家一起分享。

在分享之前，我们先看一下 Demo，以便对水印效果有个直观的印象。在 Demo 网页中，网页的背景上按照行列整齐地显示淡淡的水印文字，如下图。

实现的原理比较简单：这个页面的背景是由很多相同样式的水印文字排列而成的。先设计单个水印文字的样式（包括水印占的长度和宽度），然后根据屏幕大小，计算出屏幕中每行、每列水印的位置。然后在整个页面上打印所有的水印文字就可以了。

实现步骤如下：

• 先提取出每个水印文字的共同点，设定样式。在这里，我们把样式放到CSS 样式里面。

.text-div
{
	transform: rotate(-25deg);
	visibility: visible;
	position: fixed;
	z-index: 9999;
	opacity: 0.07;
	font-size: 20px;
	color: black;
	text-align: center;
	display: block;
}

在这段代码里，水印文字的切斜角度是 25 度；z-index 设为 9999，以便永远显示在最上面；不透明度设为 0.07，使其看起来很淡，不会影响文档的内容。

• 计算水印的行数、列数。

var height = screen.availHeight;
var width = screen.availWidth;

// calculate the counts of rows and columns seperately.
var columnCnt = Math.ceil( width / PER_WIDTH );
var rowCnt = Math.ceil( height / PER_HEIGHT );

在以上代码中，通过屏幕的宽度除以每个水印文字占用的宽度得到每行的水印个数（列数），通过屏幕的高度除以每个水印文字占用的高度得到水印的行数。数字向上取整。

• 遍历，打印所有的水印。

var wmDiv = document.createElement(‘div’);
for( var i = 0 ; i < rowCnt; i ++ ) { for( var j = 0; j < columnCnt; j ++ ) { var textDiv = drawText( i, j ); wmDiv.appendChild( textDiv ); } } document.body.appendChild(wmDiv); function drawText( i, j ) { var divDom = document.createElement('div'); var textDom = document.createTextNode( WM_TEXT ); divDom.appendChild( textDom ); var top = BASE_TOP + PER_HEIGHT * i; var left = BASE_LEFT + PER_WIDTH * j; divDom.classList.add("text-div"); var styleValue = divDom.style; styleValue.left = left + 'px'; styleValue.top = top + 'px'; return divDom; }[/JavaScript]

这样，短短几十行代码就完成了，简单吧。完整的代码可参见 Demo 页面，F12即可。:)

参考资料

• 本文的代码在贫民窟的艺术家基础上修改而成

| 2020年1 月14日 星期二 06:37:25| 代码共享| 添加评论|