注：为了防止网站本身的过滤不被触发，所有的敏感字符我都换成了*号

最近看了一篇很有意思的博文

http://www.perucrack.net/2014/07/haciendo-un-xss-en-plugin-prettyphoto.html

西班牙文的，看不懂，通过图基本理解了意思，结合google搜索，有了这篇文章

首先标题中的几个单词解释一下

1、JQuery

简而言之，就是一个开源的JS库。维基百科（https://zh.wikipedia.org/wiki/JQuery）的解释是：jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。因为它的流行，出现了很多基于JQuery的扩展插件，prettyPhoto就是其中一种。

2、prettyPhoto

这个是我们今天的主角，国内对它的中文解释很少，只是说它是一款基于JQuery的图片播放浏览插件，不仅支持图片，还同时支持视频、flash、YouTube、iframe和ajax，最新版在这https://github.com/scaron/prettyphoto/blob/master/js/jquery.prettyPhoto.js，已经是3.1.6了。

3、DOM型XSS

区别于存储型与反射型的XSS，服务端不参与XSS的形成，一个直观的现象是，使用BurpSuite抓包，响应包里找不到DOM型的XSS POC。即HTTP响应的本身是不改变的，但是包含在页面中的客户端代码以“意外”的方式执行导致DOM环境的恶意篡改，从而在受害者的浏览器执行了攻击者希望的脚本。这里的客户端代码就是prettyPhoto，如何“意外”执行我们下面娓娓道来。

再次回到那篇博文，很快找到了XSS POC，我将它修改成国内熟悉的弹窗形式，如下

URL/ #prettyPho*to[ga*llery]/1,<a onclick="a*lert(/xss/);">/

原文说影响范围是3.1.4和3.1.5，并给出了google搜索关键字进行搜索

inurl:/wp-content/plugins/prettyPhoto

因为WordPress是有插件使用它的，但是可能由于已经过去很长时间了，我通过这个关键字没有找到可以作为演示的真实网站，于是在百度换了一种新的姿势

inurl: prettyPhoto

运气不错，果然被我找到一个

Chrome F12调试，查看文件jquery.prettyPhoto.js，是3.1.5版本

下断点，F10/F11单步执行，找到触发弹窗的语句，可以推测trigger() 方法触发触发click，即执行alert(/xss/)，导致弹窗

前面这一串翻译过来就是执行了

$("a[r*el^='pre*ttyPhoto[ga*llery]']:eq(1,<a on*click=aler*t(/xss/);>")

最后输入的是

[<a oncl*ick="al*ert(/xss/);"></a>]

了解jQuery的都知道，$()是构造了一个jQuery对象，这里是在html里构造了一个标签，因为对jQuery底层函数并不熟悉，这里就不再深入下去了。

知道了触发原理，我们再来看一下修复

https://github.com/scaron/prettyphoto/commit/36463d4ab412d9f499b14abdb4dde30727e0042c

hashtag = hashtag.replace(/<|>/g,\'\');

/g匹配所有的子串，将url的hash中所有尖括号<和>替换为空，避免了XSS

所以修复方法就将jquery.prettyPhoto.js升级为3.1.6

通过搜索，国内还有不少网站使用未升级的jquery.prettyPhoto.js，不乏一些大网站，而各大漏洞平台是不收这种XSS的，在国内也没有搜索到关于prettyPhoto漏洞的文章，所以结合对这个漏洞的了解水了一篇文章，希望站长们看到这篇文章能及时升级。

参考文献：

http://www.perucrack.net/2014/07/haciendo-un-xss-en-plugin-prettyphoto.html

https://github.com/scaron/prettyphoto/

https://www.saotn.org/prettyphoto-dom-based-xss/

【via@whoamisb】 本文系投稿文章，转载请注明出处。