风云阁

本文完成于昨天，本打算今日检查一遍后发布的。让我最难以料掉的是，本文用于测试的示例页面竟然很巧合的在今日改版了，不再对密码图片进行隐藏了。也许某天他又会开始隐藏吧

我找了好久都未找到和这个一样的既带有隐藏又具有 referer 限制的页面。唉。无奈还是发布了，毕竟写了这么多了。不过相信有一些前端基础的朋友还是看得懂这篇关于 JavaScript 注入的日志的。

给朋友带来的阅读上的麻烦，深感抱歉~

前几天 Solrex 告诉我一个很有趣的密码公布方式。

该站是提供 Podcast 服务的，允许免费使用。但是免费用户需要向该站索取每n分钟更新一次的密码。可恶的是，获取密码的 Podcast password 链接按钮不停地在一个 Google Ad 前面漂浮。

为了避免不必要的麻烦，如广告嫌疑等等，我把图片的一些文字涂掉了！
点击那个按钮，就会显示出一个密码图片。但是有时候会一个不小心就点到广告。

个人觉得，提供了服务收取相应费用也是很正常的，但是用这种获取免费密码的方式来折腾别人，我只能联想到两个字——变态！我想必然有绕过点击过程的方法。

通过查看源代码，发现密码图片的地址为 http://podcast.overseakids.com/text2png/show_psw_png.php 。我把这个地址直接输入地址栏，直接跳转到了首页。这也是意料之中，我想也应该做了一个限制的，如 referer 的检测等等。

于是，我进一步看了下免费密码获取页面的源代码和CSS，即 http://drupal.overseakids.com/node/17 。发现这么两段 HTML 和 CSS，如下：

<div id="psw"> 
	<img src="http://podcast.overseakids.com/text2png/show_psw_png.php" /> 
</div>

#psw { margin-top: 49px; margin-left: 260px; display: none; z-index: -1; }

由上面的 display: none; 看以看到，显示密码图片的层仅仅是把隐藏了而已。其实只要把 display 属性改为 block ，然后做一些相应的位置调整就 OK 了。

比较便捷的方法，就是直接利用 JavaScript 修改这个页面。代码如下：

function()
{
	var psw=document.getElementById("psw");
	//使 psw 层以“块”形式显示
	psw.style.display="block";
	//层边界为0
	psw.style.margin="0";
}

但是要让这段代码在页面中起到作用还需要做了小小的处理，写成直接可以在地址栏运行的 JavaScript ，即为 JavaScript 植入。如下

javascript:(function(){var%20psw=document.getElementById("psw");psw.style.display="block";psw.style.margin="0";})();

值得注意的是空格，即” “，需要被转换为”%20″。

到目前为止，先进入刚刚那个免费密码获取页面，然后直接在地址栏输入上面这段 JavaScript 代码，密码图片就会出现在那个 Google Ad 下面了。偶尔该站会出现一些问题，密码图片会是空白。

如果各位觉得每次都要复制粘贴这个 JavaScript 代码太麻烦的话，可以新建一个书签，书签的 URL 就是这段代码。当进入免费密码获取页面之后点一下该书签就 OK 了。

可以看到上述的解决方法并不是很完美，如果能让最后仅仅显示一个密码图片的话，那就更整洁和方便了。

其实这个密码图片的地址仅仅做了对 referer 的限制。一般情况下，用 PHP 、 ASP 等服务端脚本可以很方便的自定义一个 referer ，referer限制的问题也就解决了，但是 JavaScript 是客户端脚本，奢望他能自定义一个 referer 简直是天方夜谭。目前我可以想到一个简单的解决方法就是，用 JavaScript 在免费密码获取页面生成一个到密码图片的链接，并进行一个模拟点击。

function()
{
	var psw=document.getElementById("psw");
	//使 psw 层以“块”形式显示
	psw.style.display="block";
	//将 psw 层的内容改为一个 id 为 haha 的链接，改链接指向密码图片的地址。
	psw.innerHTML="<a id=haha href=http://podcast.overseakids.com/text2png/show_psw_png.php>haha</a>";
	var haha=document.getElementById("haha");
	//接下来实现对链接的模拟点击
}

由于现在浏览器的种类太多，所以模拟点击的方法也不尽相同。不过大体还是分为 IE 和非 IE 两种。

1. IE 的方法很简单

   haha.click();

2. 非 IE 的需要新建事件

   //建立一个事件
   var evt=document.createEvent("HTMLEvents");
   //将该事件初始化为点击事件
   evt.initEvent("click",true,true);
   //针对 haha 链接，进行点击事件
   haha.dispatchEvent(evt);

加个浏览器的判断是很有必要的，目前我所知道的最简单的判断方法是

if("\v"=="v")
{
	//判断浏览器为 IE
}
else
{
	//非 IE
}

综上，结合一下，如下：

function()
{
	var psw=document.getElementById("psw");
	psw.style.display="block";
	psw.innerHTML="<a id=haha href=http://podcast.overseakids.com/text2png/show_psw_png.php>haha</a>";
	var haha=document.getElementById("haha");
	if("\v"=="v")
	{
		haha.click();
	}
	else
	{
		var evt=document.createEvent("HTMLEvents");
		evt.initEvent("click",true,true);
		haha.dispatchEvent(evt);
	}
}

修改为可植入 JavaScript 代码：

javascript:(function(){var%20psw=document.getElementById("psw");psw.style.display="block";psw.innerHTML="<a%20id=haha%20href=http://podcast.overseakids.com/text2png/show_psw_png.php>haha</a>";var%20haha=document.getElementById("haha");if("\v"=="v"){haha.click();}else{var%20evt=document.createEvent("HTMLEvents");evt.initEvent("click",true,true);haha.dispatchEvent(evt);}})();

这下大功告成，目前在 Chrome 和 IE 下，进入免费密码获取页面，然后再植入这段 JavaScript ，就会跳转到一个只有密码图片的页面，非常干净。

目前模拟点击在 Firefox 3.6以及比较高版本的 Firefox 3.5.X 我无法顺利实现。查看了 Mozilla 的开发文档，代码并未看出明显的错误。而且这个代码在老版本的 Firefox 是可以实现的。

我怀疑可能是 Mozilla 公司为了保证 Firefox 的安全性，把一些功能默认关闭了。需要用户自己去 about:config 来开启。
比方说如下代码如今无法关闭 Firefox 的窗口了。

window.close();

如果要是这个代码有效，需要打开 Firefox ，在地址栏输入 about:config ，找到 dom.allow_scripts_to_close_windows 这项并改为 true。

虽然 Firefox 相对安全了，这也反而造成了开发人员的困扰。

如果哪位朋友知道比较好的在 Firefox 中模拟点击事件的方法，不吝赐教！

Push

You don't feel like leaving comments? Please leave your palm-print.
懒得留言？那留下您的掌印吧。

Iron_FeetAnonymous(6)