在查询 SSRF 漏洞相关文档的时候,找到一个网站,发现这个网站网页加了水印,觉得挺有意思。
于是读了它的代码,在此基础上稍加改进,与大家一起分享。
在分享之前,我们先看一下 Demo,以便对水印效果有个直观的印象。在 Demo 网页中,网页的背景上按照行列整齐地显示淡淡的水印文字,如下图。
(这里是图片)
实现的原理比较简单:这个页面的背景是由很多相同样式的水印文字排列而成的。先设计单个水印文字的样式(包括水印占的长度和宽度),然后根据屏幕大小,计算出屏幕中每行、每列水印的位置。然后在整个页面上打印所有的水印文字就可以了。
实现步骤如下:
- 先提取出每个水印文字的共同点,设定样式。在这里,我们把样式放到CSS 样式里面。
.text-div { transform: rotate(-25deg); visibility: visible; position: fixed; overflow: hidden; 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; }
这样,短短几十行代码就完成了,简单吧。完整的代码可参见 Demo 页面,F12即可。:)
参考资料
- 本文的代码实现参考了贫民窟的艺术家
请你留言