一文了解如何将JavaScript隐藏在PNG图片中来绕过CSP

将一个恶意的JavaScript库隐藏到一个PNG图片中，并在twitter上发布，然后利用XSS攻击绕过其内容安全策略(CSP)，将其包含在一个易受攻击的网站中。是不是觉得很科幻，本文我就将详细解锁这个过程。

使用HTML Canvas可以将任何JavaScript代码或整个库隐藏到一个PNG图片中，方法是将每个源代码字符转换为一个像素。然后，可以将图片上传到受信任的网站（如Twitter或Google）（通常由CSP列入白名单）最后将其作为远程图片加载到HTML文档中。最后，通过使用canvas getImageData方法，可以从图片中提取“隐藏的JavaScript”并执行它。有时这可能会导致绕过内容安全策略，使攻击者能够获取整个外部JavaScript库。

canvas元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。canvas 可以实现对图像的像素操作，这就要说到 getImageData() 方法了。 ImageData 对象用来描述 canvas 区域隐含的像素数据，奇热这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。

canvas getImageData() 方法的浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 getImageData() 方法。注意Internet Explorer 8 或更早的浏览器不支持。

canvas getImageData() 方法的定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)；

G - 绿色 (0-255)；

B - 蓝色 (0-255)；

A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)；

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

注意在操作完成数组中的 color/alpha 信息之后，你可以使用 putImageData() 方法将图像数据复制到画布上。

由于Content-Security-Policy响应头在防止XSS、clickjacking和其他代码注入攻击方面的效率，它被越来越多地使用。然而，许多网站配置laxy策略来避免误报和白名单整个域，而不是特定的资源，或使用不安全的内联或不安全的eval指令，这可能导致策略绕过。

在此，我推荐大家阅读Mike Parsons的一篇文章，他在这篇文章中详细展示了如何使用HTML Canvas将JavaScript代码“存储”到一个PNG图片中，在我看来，这可能是完美的CSP绕过技术，包括利用XSS的邪恶的JavaScript外部库脆弱性。全部使用CanvasRenderingContext2D方法putImageData和getImageData并使用String.charCodeAt表示隐藏文本字符串的每个字符。

Canvas 2D API的CanvasRenderingContext2D.putImageData（）方法将给定ImageData对象中的数据绘制到画布上。如果提供了脏矩形（dirty rectangle ），则仅绘制该矩形中的像素，此方法不受画布转换矩阵的影响。

Canvas 2D API的CanvasRenderingContext2D方法getImageData（）返回一个ImageData对象，该对象表示画布的指定部分的基础像素数据。此方法不受画布转换矩阵的影响，如果指定的矩形延伸到画布的边界之外，则画布外的像素在返回的ImageData对象中为透明的黑色。

使用Canvas在PNG图片中隐藏文本

下面是一个示例，你可以复制并粘贴到浏览器的JavaScript控制台，以从给定字符串开始创建一个PNG图片，例如:“Hello, World!”打开一个新标签页，转到about:blank，然后打开JavaScript控制台，粘贴以下代码:

(function() {
    function encode(a) {