防止 SVG 容易被逆向工程

Question

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

我想知道的是这两种情况之一是否可行：

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

2) 有没有办法混淆原始 SVG 内容，使用户无法去操作它？我已经看到 SVG 内部有 <image ...> 标签，而 PNG 之前表示为长而复杂的字符串。像xlink:href="data:image/png;base64..." 这样的东西。我想知道是否有办法将 SVG 显示为这个字符串，这样就不能直接操作数据。我确信有一种算法可以逆转这些，但只要我们坚持使用 SVG，如果有人想窃取数据，我需要通过尽可能多的箍来确保它尽可能安全。

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

Answer 1

是否有另一种类似于 SVG 的图像格式可用于保持这种高度可扩展的图像而不会降低分辨率，并且不会被最终客户端直接编辑？

SVG 是一种矢量格式，为了保持极高的可扩展性，您需要坚持使用矢量，无论是任何格式。但是，在这种情况下，始终可以删除属于您的水印的矢量。当然，也有存储为二进制的矢量格式，这会使最终用户更难解析和编辑，但这些格式在 PHP 中也无法编辑，而且兼容性也差很多。所以你可能不想这样做。

有没有办法混淆原始 SVG 内容，让用户无法去操作它？

首先，如上所述，从某种意义上说，它永远不会是“安全的”，始终可以从矢量图像中删除水印。 （顺便说一句，与 JPG 等位图格式的唯一区别是位图中水印下方的内容实际上是缺失的，而在 SVG 中它仍然存在。）

但是，根据您希望它有多“好”，您可以做一些事情。我认为这里的“善”是指去除水印所需的努力，并且您可以相对轻松地提高标准。您不必（而且您可能无法合理地）混淆整个 SVG。

想到的一件事是 SVG 基本上只是 XML，它由 <rect>、<line>、<circle> 等标签组成。这些标签的顺序并不重要（大多数情况下，有例外当然）。因此，您可以将绘制水印的标签几乎随机地缠绕在现有标签中。我的意思是真的随机，所以不同的下载会产生不同的结果。如果你做得好（例如，你找到线标签来“隐藏”你的水印线标签，等等），将很难自动删除水印，因为它是所有相关数据是你的真实形象。当然，水印在视觉上仍然可以在角落里，这已经是一个弱点，任何被绘制到角落的东西都有可能被自动删除。我想用任何像样的编辑器都可以很容易地手动删除它。所以这取决于目的是什么。

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