使用 preg_replace() 将图像占位符转换为 HTML 标记

我想用有效的 HTML 标记替换方括号图像占位符。

示例占位符可能如下所示：

[img:http://example.com/_data/025_img.jpg]

我想要的是改变它所说的部分[img: ... ] with <img>标记并得到如下结果：

<img src='http://example.com/_data/025_img.jpg' border='0' />

有关用户上传的与此任务相关的图像的其他信息：

1. 用户将图像上传到他们的个人资料
2. 图像名称存储在 db 中。
3. 它们列在具有文本区域的表单旁边
4. 在输入文本时，我想通过添加以下标签向用户提供一个或多个图像[img: ... ] where ...是单击用户图库中列出的图像时将复制的链接。
5. 我正在使用 Codeigniter 并将文本区域通过视图传递到控制器->模型中，在其中由助手对各种内容进行清理...sql/quotes 等。CI 上也启用了 XSS；
6. 然后我想扫描文本并查看用户在哪里[img: ... ]标记并将其交换为<img>使用图像和文本标记并呈现帖子。

因此，用户的实际输入将类似于：

The brown fox jumped over foo bar [img:http://example.com/_data/025_img.jpg] and then went to bed [img:http://example.com/_data/0277_img.jpg] while thinking about [img:http://example.com/_data/1115_img.jpg]

这就是我要求的原因preg_replace()， 而不是preg_match(). preg_match()不会使文本跟随图像。

让我们先把简单的事情解决掉。

/\[img:([^\]]+)\]/

That is:

• 字面意思[img:
• a capture group containing
  • a character class composed of
    • 不是字面意思的东西]
  • 至少重复一次
• 字面意思]

运行这个preg_match匹配数组中的元素 1 很可能是一个图像 URL，您可以轻松地将其插入到img tag.

但你不应该。不是马上。

首先，这是不安全的。当我写下这篇文章时会发生什么？

[img:javascript:alert(document.cookie);]

呃。那不会有什么好事。

You're probably想要确保用户声称是 URL 的东西确实是 URL。您可以尝试通过致电来执行此操作parse_url。它会返回一组 URL 组件。确保事物具有域和路径，并且通过 HTTP 或 HTTPS 提供服务。

好的，但是当用户输入时会发生什么this?

[img:http://www.example.com/foo.jpg" onmouseover="alert(document.cookie)"]

这是一个有效的...ish... URL，将被成功解构parse_url并且很可能通过基本的格式良好检查。过滤掉空格和引号（单anddouble) 将是一个很好的起点，但还有更多事情需要担心。

最重要的是，像这样的标记是一个向量XSS, or 跨站脚本漏洞.

You can probably通过传递 URL 来减轻一些威胁htmlspecialchars。这至少会破坏引号和括号，而且很难对那些被处理过的东西感到讨厌。请注意字符集的愚蠢之处，某些非 UTF-8 字符编码可能包含 ASCII 引号的内容...

You probably想要为此使用真正的标记语言（即使只是降价），并且您probably想要使用基于白名单的 HTML 过滤器，例如HTML 净化器关于结果。这将有助于保护您免受某种程度的精神错乱。

请记住，只有当他们aren't出来找你。网络上充满了愚蠢到恶意的人，以及恶意到愚蠢的人。