在JPEG图片中嵌入HTML

已于 2024-01-20 14:24:44 修改
阅读量247 收藏
点赞数
文章标签： html 前端 css
于 2023-02-23 13:56:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzqxwzoe/article/details/129180197
版权

最近看到一个有趣的网页：lcamtuf.coredump.cx/squirrel/，或者说一张有趣的图片——因为用网络浏览器打开它看到的是一个网页，用图片浏览器打开它看到的又是一张图片。

在服务端要对同一个请求地址实现不同响应是十分简单的，比如通过请求头Accept来判断：

  • Accept=text/html则返回超文本；

  • Accept=image/*则返回图片；

  • ……

可是lcamtuf.coredump.cx/squirrel/这个网页（或者说图片）在脱离服务端的情况下，依然能够呈现出网页和图片两种文件内容，这是怎样实现的呢？

在前端没有秘密，打开网络浏览器的开发者工具查看一下网址的响应内容：

响应内容中有熟悉HTML标签，也有一大堆乱码。这堆乱码应该是图片文件的字符读码，但是为什么在网页上看不到呢？ 原来HTML中使用了body { visibility: hidden; }样式和<!--注释标签（浏览器自动补全），乱码部分就这样被隐藏了。

HTML内容：

<html><body><style>body { visibility: hidden; } .n { visibility: visible; position: absolute; padding: 0 1ex 0 1ex; margin: 0; top: 0; left: 0; } h1 { margin-top: 0.4ex; margin-bottom: 0.8ex; }</style><div class=n><h1><i>Hello, squirrel fans<img src="http://lcamtuf.coredump.cx/squirrel/">Click here!</a></xmp><xmp><img src="http://lcamtuf.coredump.cx/squirrel/"></xmp><p>No server-side hacks involved - the magic happens in your browser. Let's try embedding the current page as an image right now (INCEPTION!):<p><img src="#" style="border: 1px solid crimson"><p>Pretty radical, eh? Send money to: lcamtuf@coredump.cx<!--" style="margin: auto" />

然而在查看图片的时候，也没看到HTML的内容，又是为什么呢？

JPEG相关

首先可以确定这张图片是JPEG格式，因为内容开头有明显的JFIF标记（JFIF，是JPEG最常见的文件存储格式，也是标准的JPEG文件转换格式）。 JPEG格式定义了一系列标记码，都是以0xFF开头，常见的有：

  • 0xFFD8，SOI（Start Of Image），图片开始标记；

  • 0xFFD9，EOI（End Of Image），图片结束标记；

  • 0xFFDA，SOS（Start Of Scan），扫描开始标记；

  • 0xFFDB，DQT（Define Quantization Table），定义量化表；

  • 0xFFC4，DHT（Define Huffman Table），定义哈夫曼表；

  • 0xFFEn，APPn（Application Specific），应用程序信息；

  • 0xFFFE，COM（Comment），注释；

  • ……

图片的注释内容不会展示，很显然我们可以把HTML隐藏在图片注释中。 用十六进制读取这张图片，可以看到：

这张图片中使用了注释标记0xFFFE，标记后面跟着0x0372。0x0372转成十进制是882，而HTML内容的长度刚好是880个字节（0x0372本身占2个字节），所以可以知道，HTML内容就是写在这张图片注释中。

代码实现

下面用PHP代码简单实现一个将HTML内容嵌入JPEG中的函数：

<?php
function embedHtmlInJpeg($jpeg_file, $html_str, $html_file) {$length = strlen($html_str) + 2;if ($length > 256 * 256 - 1) {return false;}$content = '';$reader= fopen($jpeg_file, 'rb');$writer= fopen($html_file, 'wb');$content = fread($reader, 2); // read 0xFFD8fwrite($writer, $content); // write 0xFFD8$header= 'FFFE' . sprintf('%04X', $length);$header= pack('H*', $header);$content = $header . $html_str;fwrite($writer, $content); // write 0xFFFEwhile (!feof($reader)) {$content = fread($reader, 8192);fwrite($writer, $content); // write else}fclose($reader);fclose($writer);return true;
}
​
// call it
embedHtmlInJpeg('lena.jpg','<html><body><style>body { visibility: hidden; } .n { visibility: visible; position: absolute; padding: 0 1ex 0 1ex; margin: 0; top: 0; left: 0; } h1 { margin-top: 0.4ex; margin-bottom: 0.8ex; }</style><div class=n><h1><i>This image is a page.</i></h1>Just open it in new tab.<p><img src="#" style="border: 1px solid crimson"><!--','lena.html');

这张图片是一个网页，不信你就在新标签页中打开它

点击这里体验。

实际应用

将一段HTML文本嵌入到一张图片中，实际上，还没什么应用，哈哈哈😂。 如果能将JS或Shell脚本藏在图片中，并能后期执行，那就有意思了；而且本身是一个图片文件，可以避过一些安全软件的检查。

网络安全入门学习路线

其实入门网络安全要学的东西不算多，也就是网络基础+操作系统+中间件+数据库，四个流程下来就差不多了。

1.网络安全法和了解电脑基础

其中包括操作系统Windows基础和Linux基础，标记语言HTML基础和代码JS基础，以及网络基础、数据库基础和虚拟机使用等...

别被这些看上去很多的东西给吓到了，其实都是很简单的基础知识，同学们看完基本上都能掌握。计算机专业的同学都应该接触了解过，这部分可以直接略过。没学过的同学也不要慌，可以去B站搜索相关视频，你搜关键词网络安全工程师会出现很多相关的视频教程，我粗略的看了一下，排名第一的视频就讲的很详细。 当然你也可以看下面这个视频教程仅展示部分截图： 学到http和https抓包后能读懂它在说什么就行。

2.网络基础和编程语言

3.入手Web安全

web是对外开放的，自然成了的重点关照对象，有事没事就来入侵一波，你说不管能行吗！ 想学好Web安全，咱首先得先弄清web是怎么搭建的，知道它的构造才能精准打击。所以web前端和web后端的知识多少要了解点，然后再学点python，起码得看懂部分代码吧。

最后网站开发知识多少也要了解点，不过别紧张，只是学习基础知识。

等你用几周的时间学完这些，基本上算是具备了入门合格渗透工程师的资格，记得上述的重点要重点关注哦！ 再就是，要正式进入web安全领域，得学会web渗透，OWASP TOP 10等常见Web漏洞原理与利用方式需要掌握，像SQL注入/XSS跨站脚本攻击/Webshell木马编写/命令执行等。

这个过程并不枯燥，一边打怪刷级一边成长岂不美哉，每个攻击手段都能让你玩得不亦乐乎，而且总有更猥琐的方法等着你去实践。

学完web渗透还不算完，还得掌握相关系统层面漏洞，像ms17-010永恒之蓝等各种微软ms漏洞，所以要学习后渗透。可能到这里大家已经不知所云了，不过不要紧，等你学会了web渗透再来看会发现很简单。

其实学会了这几步，你就正式从新手小白晋升为入门学员了，真的不算难，你上你也行。

4.安全体系

不过我们这个水平也就算个渗透测试工程师，也就只能做个基础的安全服务，而这个领域还有很多业务，像攻防演练、等保测评、风险评估等，我们的能力根本不够看。

所以想要成为一名合格的网络工程师，想要拿到安全公司的offer，还得再掌握更多的网络安全知识，能力再更上一层楼才行。即便以后进入企业，也需要学习很多新知识，不充实自己的技能就会被淘汰。

从时代发展的角度看，网络安全的知识是学不完的，而且以后要学的会更多，同学们要摆正心态，既然选择入门网络安全，就不能仅仅只是入门程度而已，能力越强机会才越多。

尾言

因为入门学习阶段知识点比较杂，所以我讲得比较笼统，最后联合CSDN整理了一套【282G】网络安全从入门到精通资料包，需要的小伙伴可以点击链接领取哦！ 网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！

程序员小强_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML开发王
01-03
8.1.2 了解jpeg格式图片 8.1.3 了解png格式图片 8.1.4 创建图片 8.2 链入图片(img元素) 8.2.1 图片的源地址(src属性) 8.2.2 图片的幅面大小(width属性和height属性) 8.2.3 图片的说明(alt属性、longdesc属性) 8.2.4 ...
Htmltoimage[html2img]绿色注册版_html网页转图片
08-06
Html To Image(html2img,htmltoimage)可以容易、快捷地将任意的html页转换成图片或缩略图。最新的特征：可直接将给定网址的网页保存成bmp、...嵌入IE浏览器的前后关联菜单中。网站缩略图生成，可以批量将网页转换成图片
如何把图片嵌到html中,自给自足，轻松将图片图片内嵌到HTML
weixin_33250808的博客
06-04 2631
自给自足，轻松将图片图片内嵌到HTML1.为什么要将图片内嵌到HTML？针对于这个问题，我们有如下几种答案1)能减少并发请求，适合且合理的使用，能提高网站的访问速度2)便于分享，完全可以将需要的图片，样式，JS与内容放到一个HTML页中，而不会有零零碎碎的大量文件。3)在某些网站发表文章时，不需要第三方图床也可以发表图片。2.如何将图片内嵌到HTML？我们的这种用法，被称做Data URI sch...
html语言显示jpg图片,javascript怎么显示图片？
weixin_31445091的博客
05-31 2408
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript可以直接使用document.write方法显示图片：document.write("");示例：JavaScript显示图片的方法document.write(""...
HTML基础-05-图片（引用图片src=“图片地址“、图片位置 align=“位置“、浮动图片 style=“float:位置“、图片链接 href=“目标url“、图形映射）
运维玄德公
03-16 2092
1. 引用图片（src="图片地址"） 语法示例 完整示例 2. 图片的位置（align="位置"） 语法示例 完整示例 3. 浮动图片（style="float:xxx"） 语法示例 完整示例 4. 图片的链接（href="目标url"） 语法示例 完整示例 5. 创建图形映射 语法示例 完整示例...
手把手教你如何将图片“嵌入”网页中
热门推荐
Han的小站
01-03 3万+
将图片“嵌入”网页中
OpenCV：将视频流式传输到网页浏览器/HTML页面
张伟的专栏
01-12 9931
在本教程中，您将学习如何通过Flask和Python使用OpenCV将视频从网络摄像头流式传输到网页浏览器/HTML页面。 您的车被偷过吗? 我的车在周末就被偷了。让我告诉您，我很生气。 我不能透露太多的细节，因为这个案件还在调查中，但以下是我可以告诉您的: 大约六个月前，我和妻子从康涅狄格州的诺沃克搬到了宾夕法尼亚州的费城。我有一辆车，我不经常开，但还是留着它以备不时之需...
Htmltoimage[html2img]2008特别版_html转图片工具
08-06
HtmlToImage可以容易、快捷地将任意的html页转换成图片或缩略图。最新的特征：可直接将给定网址的网页保存成bmp、jpeg、tiff、gif、png格式的图片；由大图像生成缩略图；...嵌入IE浏览器的前后关联菜单中。
Bootstrap-Portfolio:作业2a
05-25
“关于”页面上有图片和简历Portfolio页面上有一些带有标题的项目的jpegs 单击jpeg，链接到该项目的已解聚版本单击标题，链接到GitHub存储库联系人页面上有一个mailto按钮关键或新技能媒体查询的响应能力嵌入了img...
OpenCV –将视频流传输到Web浏览器/ HTML页面
newbeixue的博客
11-06 1万+
https://www.pyimagesearch.com/2019/09/02/opencv-stream-video-to-web-browser-html-page/ https://translate.google.com.hk/translate?hl=zh-TW&sl=en&tl=zh-CN&u=https%3A%2F%2Fwww.pyimagesearch.c...
html添加图片教程,HTML: <img> 标签
weixin_35636570的博客
06-07 721
HTML: 标签HTML 标签在HTML文档中定义图像。此标签通常也称为 元素。在线示例如何插入图像：示例html>基础教程网(nhooo.com)测试看看 ‹/›浏览器兼容性IEFirefoxOperaChromeSafari所有主流浏览器都支持 标签。图像alt 与 title 属性区别：图片中的 alt 属性是在图片不能正常显示时出现的文本提示。图片中的 title 属性是在鼠标在...
html 图片显示的几种方式
beny
08-03 3万+
1，直接访问： 2，间接访问： 需要CGI配合，返回的数据为图片数据 重点在这：Content-type: image/jpeg 3，直接给数据： 说明： data:,                                           文本数据 data:text/plain,                             文本数据
html5图片格式有什么,jpeg是什么？
weixin_34548449的博客
06-04 961
jpeg是什么？JPEG(Joint Photographic Experts Group)是JPEG标准的产物,该标准由国际标准化组织(ISO)制订，是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式，后缀名为.jpg或.jpeg。JPEG压缩技术十分先进，它可以用有损压缩方式去除冗余的图像数据，换句话说，就是可以用较少的磁盘空间得到较好的图像品质。而且JPEG是一种很灵活...
html 插入图像占位符代码,DW插入图像/图像占位符和互动图像的实例教程
weixin_33417371的博客
06-02 2175
Dreamweaver中如何插入图像、图像占位符和互动图像1、首先插入图像时，我们需要建立一个站点作为基本所需2、建立的站点名称为“今日心事”3、随后将插入面板设置为“常用”选项4、点击“图像”按钮，向网页中插入图像5、选择一个图片作为插入图像的所需图片6、点击“确定”按钮即可完成插入。7、插入图像之后，在我们的代码部位，我们是可以看到新出来的一段代码选项的8、同样这里我们是可以将其调整为“设计”...
java发送html邮件base64格式图片中文乱码
最新发布
05-25
发送带有base64格式图片的HTML邮件，可以按照以下步骤进行： 1. 将base64格式的图片解码为字节数组。 2. 使用JavaMail API创建MimeMultipart对象。 3. 创建MimeBodyPart对象，并设置内容为HTML文本，同时将图片以附件形式添加到MimeBodyPart对象中。 4. 将MimeBodyPart对象添加到MimeMultipart对象中。 5. 使用JavaMail API发送邮件。 下面是一个示例代码，用于发送带有base64格式图片的HTML邮件： ```java import javax.activation.DataHandler; import javax.activation.DataSource; import javax.activation.FileDataSource; import javax.mail.*; import javax.mail.internet.*; import java.io.ByteArrayInputStream; import java.io.IOException; import java.io.InputStream; import java.util.Properties; public class MailSender { public static void main(String[] args) throws Exception { String host = "smtp.gmail.com"; String port = "587"; String username = "你的邮箱地址"; String password = "你的邮箱密码"; Properties props = new Properties(); props.put("mail.smtp.host", host); props.put("mail.smtp.port", port); props.put("mail.smtp.auth", "true"); props.put("mail.smtp.starttls.enable", "true"); props.put("mail.smtp.ssl.trust", host); Session session = Session.getDefaultInstance(props, new Authenticator() { protected PasswordAuthentication getPasswordAuthentication() { return new PasswordAuthentication(username, password); } }); String toEmail = "收件人邮箱地址"; String subject = "测试邮件"; String htmlContent = "<html><body><h1>这是一张图片</h1><br><img src='cid:image'/></body></html>"; String imageBase64 = "base64编码的图片"; MimeMultipart multipart = new MimeMultipart("related"); MimeBodyPart htmlPart = new MimeBodyPart(); htmlPart.setContent(htmlContent, "text/html;charset=UTF-8"); multipart.addBodyPart(htmlPart); byte[] imageData = decodeBase64(imageBase64); DataSource ds = new ByteArrayDataSource(imageData, "image/jpeg"); MimeBodyPart imagePart = new MimeBodyPart(); imagePart.setDataHandler(new DataHandler(ds)); imagePart.setHeader("Content-ID", "<image>"); multipart.addBodyPart(imagePart); Message message = new MimeMessage(session); message.setFrom(new InternetAddress(username)); message.setRecipients(Message.RecipientType.TO, InternetAddress.parse(toEmail)); message.setSubject(subject); message.setContent(multipart); Transport.send(message); } private static byte[] decodeBase64(String base64) { try { InputStream stream = new ByteArrayInputStream(base64.getBytes()); return javax.mail.util.Base64.decodeBase64(stream); } catch (IOException e) { throw new RuntimeException(e); } } private static class ByteArrayDataSource implements DataSource { private final byte[] data; private final String type; public ByteArrayDataSource(byte[] data, String type) { this.data = data; this.type = type; } public InputStream getInputStream() throws IOException { return new ByteArrayInputStream(data); } public OutputStream getOutputStream() throws IOException { throw new IOException("Not supported"); } public String getContentType() { return type; } public String getName() { return "ByteArrayDataSource"; } } } ``` 在上面的代码中，我们使用了JavaMail API发送邮件，并使用了MimeMultipart、MimeBodyPart等类来创建HTML邮件，并将base64格式的图片嵌入到HTML中。同时，我们还使用了javax.mail.util.Base64类对图片进行解码，并使用了ByteArrayDataSource类将字节数组包装成DataSource对象，以便将图片作为附件添加到邮件中。 如果HTML邮件中的中文出现乱码，可以尝试将邮件内容的编码方式设置为UTF-8，如下所示： ```java htmlPart.setContent(htmlContent, "text/html;charset=UTF-8"); ``` 同时，可以将邮箱客户端的编码方式设置为UTF-8，以便正确显示邮件内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值