vd.getVideoLinks = function(node) {
    // console.log(node);
    var videoLinks = [];
    $(node)
        .find('a')
        .each(function() {
            var link = $(this).attr('href');
            var videoType = vd.getVideoType(link);
            if (videoType) {
                videoLinks.push({
                    url: link,
                    fileName: vd.getLinkTitleFromNode($(this)),
                    extension: '.' + videoType
                });
            }
        });
    $(node)
        .find('video')
        .each(function() {
            // console.log(this);
            var nodes = [];
            // console.log($(this).attr('src'));
            $(this).attr('src') ? nodes.push($(this)) : void 0;
            // console.log(nodes);
            $(this)
                .find('source')
                .each(function() {
                    nodes.push($(this));
                });
            nodes.forEach(function(node) {
                var link = node.attr('src');
                if (!link) {
                    return;
                }
                var videoType = vd.getVideoType(link);
                videoLinks.push({
                    url: link,
                    fileName: vd.getLinkTitleFromNode(node),
                    extension: '.' + videoType
                });
            });
        });
    return videoLinks;
};

从上面的代码中可以发现videoLinks和视频元素，并且在请求返回之前将信息收集到videoLinks数组中。 我们控制的videoLinks元素属性是url（从href属性中提取）和fileName（通过获取title属性、alt属性或节点的内部文本来拉取）。

由函数vd.findVideoLinks调用：

vd.findVideoLinks = function(node) {
    var videoLinks = [];
    switch (window.location.host) {
        case 'vimeo.com':
            vd.sendVimeoVideoLinks();
            break;
        case 'www.youtube.com':
            break;
        default:
            videoLinks = vd.getVideoLinks(node);
    }
    vd.sendVideoLinks(videoLinks);
};

此调用发生在页面的加载过程：

vd.init = function() {
    vd.findVideoLinks(document.body);
};

vd.init();

获取到所有的链接后，它们将通过vd.sendVideoLinks函数并发送到扩展程序的后台页面。 以下是在扩展的后台页面中声明的消息监听器：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    switch (request.message) {
        case 'add-video-links':
            if (typeof sender.tab === 'undefined') {
                break;
            }
            vd.addVideoLinks(request.videoLinks, sender.tab.id, sender.tab.url);
            break;
        case 'get-video-links':
            sendResponse(vd.getVideoLinksForTab(request.tabId));
            break;
        case 'download-video-link':
            vd.downloadVideoLink(request.url, request.fileName);
            break;
        case 'show-youtube-warning':
            vd.showYoutubeWarning();
            break;
        default:
            break;
    }
});

我们的例子关于add-video-links选项。在例子中，我们的send.tab没有未定义，因此它调用vd.addVideoLinks并删除之前删除的视频链接。 以下是addVideoLinks的代码：

vd.addVideoLinks = function(videoLinks, tabId, tabUrl) {
    ...trimmed for brevity...
    videoLinks.forEach(function(videoLink) {
        // console.log(videoLink);
        videoLink.fileName = vd.getFileName(videoLink.fileName);
        vd.addVideoLinkToTab(videoLink, tabId, tabUrl);
    });
};

上面的代码检查它是否已经存储了此tabId的链接数据。 如果不是，它会创建一个新对象。 每条链接数据的fileName属性并通过vd.getFileName函数运行，该函数包括以下代码：

vd.getFileName = function(str) {
    // console.log(str);
    var regex = /[A-Za-z0-9()_ -]/;
    var escapedStr = '';
    str = Array.from(str);
    str.forEach(function(char) {
        if (regex.test(char)) {
            escapedStr += char;
        }
    });
    return escapedStr;
};

上述函数通过链接数据的fileName属性破坏了获取DOM-XSS的机会。 它将删除任何与正则表达式[A-Za-z0-9()_ -]不匹配的字符，但是其并不包括用于连接HTML中的属性的字符"。

videoLink被发送到vd.addVideoLinkToTab函数，该函数如下：

vd.addVideoLinkToTab = function(videoLink, tabId, tabUrl) {
    ...trimmed for brevity...
    if (!videoLink.size) {
        console.log('Getting size from server for ' + videoLink.url);
        vd.getVideoDataFromServer(videoLink.url, function(videoData) {
            videoLink.size = videoData.size;
            vd.addVideoLinkToTabFinalStep(tabId, videoLink);
        });
    } else {
        vd.addVideoLinkToTabFinalStep(tabId, videoLink);
    }
};

该脚本检查数据是否具有size属性。在未设置大小的情况下，它通过vd.getVideoDataFromServer获取链接位置处文件的大小：

vd.getVideoDataFromServer = function(url, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState === 2) {
            callback({
                mime: this.getResponseHeader('Content-Type'),
                size: this.getResponseHeader('Content-Length')
            });
            request.abort();
        }
    };
    request.open('Get', url);
    request.send();
};

上面的代码只是触发XMLHTTPRequest请求以获取指定链接上的文件头，并提取Content-Type和Content-Length头。 返回此数据，Content-Length标头的值用于设置videoLinks元素的size属性。 完成此操作后，结果将传递给vd.addVideoLinkToTabFinalStep：

vd.addVideoLinkToTabFinalStep = function(tabId, videoLink) {
    // console.log("Trying to add url "+ videoLink.url);
    if (!vd.isVideoLinkAlreadyAdded(
            vd.tabsData[tabId].videoLinks,
            videoLink.url
        ) &&
        videoLink.size > 1024 &&
        vd.isVideoUrl(videoLink.url)
    ) {
        vd.tabsData[tabId].videoLinks.push(videoLink);
        vd.updateExtensionIcon(tabId);
    }
};

在这里，我们开始遇到一些困难。我们希望将URL附加到vd.tabsData[tabId].videoLinks数组，然而这只会在我们传递以下条件时发生：

!vd.isVideoLinkAlreadyAdded(
    vd.tabsData[tabId].videoLinks,
    videoLink.url
) &&
videoLink.size > 1024 &&
vd.isVideoUrl(videoLink.url)

vd.isVideoLinkAlreadyAdded是一个简单的检验操作，以查看该URL是否已记录在vd.tabsData[tabId].videoLinks数组中。 第二项检查是videoLink.size大于1024。根据前文，这个值取自检索到的Content-Length标头。 为了通过此检查，我们创建了一个基本的Python Tornado服务器并创建了一个通配符路由并返回响应：

...trimmed for brevity...
def make_app():
    return tornado.web.Application([
        ...trimmed for brevity...
        (r"/.*", WildcardHandler),
    ])

...trimmed for brevity...
class WildcardHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_header("Content-Type", "video/x-flv")
        self.write( ("A" * 2048 ) )
...trimmed for brevity...

现在我们已经链接了那条路线。此时，无论我们的链路具体是什么，它总是会路由到一个返回>1024字节的页面。 这为我们提供了绕过过滤的方法。

下一项检查要求vd.isVideoUrl函数返回true，该函数的代码如下：

vd.videoFormats = {
    mp4: {
        type: 'mp4'
    },
    flv: {
        type: 'flv'
    },
    mov: {
        type: 'mov'
    },
    webm: {
        type: 'webm'
    }
};

vd.isVideoUrl = function(url) {
    var isVideoUrl = false;
    Object.keys(vd.videoFormats).some(function(format) {
        if (url.indexOf(format) != -1) {
            isVideoUrl = true;
            return true;
        }
    });
    return isVideoUrl;
};

这项检查相当简单。 它将检查内容确保URL中包含mp4，flv，mov或webm。我们可以通过将.flv附加到我们的url的payload的末尾来绕过此检查。

由于我们已成功满足条件的所有要求，因此我们的url会附加到vd.tabsData[tabId].videoLinks数组中。

跳转到包含上面显示的易受攻击函数的原始popup.js脚本，我们看到以下内容：

$(document).ready(function() {
    var videoList = $("#video-list");
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function(tabs) {
        console.log(tabs);
        vd.sendMessage({
            message: 'get-video-links',
            tabId: tabs[0].id
        }, function(tabsData) {
            console.log(tabsData);
            if (tabsData.url.indexOf('youtube.com') != -1) {
                vd.sendMessage({
                    message: 'show-youtube-warning'
                });
                return
            }
            var videoLinks = tabsData.videoLinks;
            console.log(videoLinks);
            if (videoLinks.length == 0) {
                $("#no-video-found").css('display', 'block');
                videoList.css('display', 'none');
                return
            }
            $("#no-video-found").css('display', 'none');
            videoList.css('display', 'block');
            videoLinks.forEach(function(videoLink) {
                videoList.append(vd.createDownloadSection(videoLink));
            })
        });
    });
    $('body').on('click', '.download-button', function(e) {
        e.preventDefault();
        vd.sendMessage({
            message: 'download-video-link',
            url: $(this).attr('href'),
            fileName: $(this).attr('data-file-name')
        });
    });
});

单击扩展程序的浏览器图标时会触发上述代码。 该扩展程序会在Chrome扩展程序API中查询当前标签的元数据。 此选项卡的ID取自元数据，get-video-links调用将发送到后台页面。 这个代码只是sendResponse（vd.getVideoLinksForTab（request.tabId））; 它返回我们上面讨论的视频链接数据。

在处理视频链接并将每个视频链接传递给本文开头所示的vd.createDownloadSection函数后。我们会看到HTML构建了一个使用jQuery的.append()函数附加到DOM的字符串。将带有用户输入的原始HTML传递给append()是xss的具体应用点。

看来我们可以相对比较容易的将我们的payload发送到主机系统。然而 我们还有另一个需要克服的问题存在：CSP。

CSP

有趣的是，此扩展的内容安全策略在其script-src指令中没有不安全的eval。 以下是扩展的详情：

script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com https://apis.google.com https://ajax.googleapis.com; style-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src *; object-src 'self'

从上面的内容安全策略（CSP）中我们可以看到script-src如下：

script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com https://apis.google.com https://ajax.googleapis.com

此政策阻止我们访问任意网站，并禁止我们进行内联JavaScript声明（例如<script>alert('XSS')</script>。我们执行JavaScript的唯一方法是从以下某个网站获取资源：