Security 防止SVG容易进行反向工程

我刚开始在一家新公司工作，被要求做我认为不可能的事情，但我需要确认这一点。我公司的网站允许用户使用SVG以极高的分辨率查看图像。我们已经为这些图像构建了一个自定义查看器，允许您在图像周围缩放和滚动，并且效果良好。因此，图像格式“需要”保持为SVG。但是，我们需要在此图像中包含水印。我们现在的做法是将SVG和PNG水印传递给客户端，将水印插入SVG，并将其显示给用户。正如任何有客户端经验的人都知道的那样，这很容易被黑客攻击（这里的开发团队大多是较老的开发人员，没有太多的web经验）。即使原始SVG没有被截获，他们仍然可以从源代码中删除水印。我已经说服我的老板在服务器端注入水印，所以这只留下了SVG可由终端客户端编辑的问题

我想知道的是，这两件事中是否有一件是可能的：

1） 是否有另一种类似于SVG的图像格式可以用来保持这种高度可伸缩的图像，而不会丢失分辨率，也不会被终端客户机直接编辑？人们在web上讨论的唯一选项似乎是JPG、GIF、PNG和SVG。我已经看过Adobe Illustrator“.ai”文件和EPS（封装的PostScript）作为其他矢量选项，但是如果我可以在PHP中修改这些图像，我找不到任何地方，这是在服务器端代码中覆盖水印的关键

2） 有没有一种方法可以混淆原始SVG内容，使用户无法对其进行操作？我以前见过SVG里面有

标记，PNG表示为长而复杂的字符串。类似于

xlink:href=“data:image/png；base64…”

。我想知道是否有一种方法可以将SVG显示为这个字符串，这样就不能直接操作数据了。我相信有一种算法可以扭转这种局面，但只要我们坚持使用SVG，我就需要尽可能地确保安全，如果有人想窃取数据，我需要尽可能多地跳转

任何一种方式都是可以接受的，只要删除此水印比只点击F12并删除开发工具中的元素更复杂。

是否有类似于SVG的另一种图像格式可以用来保持此高度可伸缩的图像而不丢失分辨率，并且不被终端客户端直接编辑？ SVG是一种矢量格式，为了保持极高的可伸缩性，您需要坚持使用矢量，无论是哪种格式。但是，在这种情况下，始终可以删除属于水印的向量。当然，有些矢量格式存储为二进制，这会使最终用户更难解析和编辑，但这些格式在PHP中也不可编辑，而且兼容性差得多。所以你可能不想这么做

有没有一种方法可以混淆原始SVG内容，让用户无法去操作它？ 首先，它永远不会是“安全”的，因为如上所述，它始终可以从矢量图像中删除水印。（顺便说一句，与JPG等位图格式的唯一区别在于，位图中水印下面的内容实际上丢失了，而在SVG中它仍然存在。）

然而，取决于你希望它有多“好”，你可以做一些事情。我认为这里的“善良”意味着移除水印所需的努力，你可以相对容易地提高标准。您不必（而且可能无法合理地）混淆整个SVG

我想到的一件事是SVG基本上就是XML，它由

、

、

等标记组成。这些标记的顺序无关紧要（大多数情况下，当然也有例外）。因此，您可以将绘制水印的标签随机地缠绕在现有标签中。我的意思是随机的，所以不同的下载会产生不同的结果。如果你做得好（例如，你发现线标签“隐藏”了你的水印线标签，等等），它将很难自动删除水印，因为它是所有相关的数据，这是你的实际图像。当然，水印仍然可以在视觉上位于一个角落，这已经是一个弱点，任何绘制到角落的内容都可能被自动删除。我想，用任何一个像样的编辑器手动删除都很容易。因此，这取决于目的是什么

---

但我仍然认为，在许多情况下，这类事情可能会变得足够困难（在其他情况下则完全不够）。

这值得多提几点意见。1） 我将介绍PDF实时转换和PDF的DRM解决方案。维基百科上有一篇关于这一点的文章，未读。2） 格式是base64编码的。可以随时使用标准Javascript

atob（）

命令对其进行解码，或者只需将字符串复制到浏览器地址字段，即可构建打开的DOM。您可能应该将水印直接嵌入到图像中。就像谷歌地图一样。我看到过类似于你的浏览器使用STL（3D）文件所做的事情。他们的解决方案只是混淆客户端（Javascript）代码。我同意@ccprog。PDF可以做到这一点。