验证 base64 编码的图像 [英] Validating base64 encoded images

问题描述

我正在构建一个应用程序，允许用户POST HTML5 画布数据，然后以 base64 编码并显示给所有用户.我正在考虑将数据解析为实际的 .png 文件并存储在服务器上，但 base64 路由允许我将图像存储在数据库中并最小化请求.图片独特，数量少，页面不会经常刷新.

I'm building an application that allows the user to POST HTML5 canvas data that is then encoded in base64 and displayed to all users. I am considering parsing the data into an actual .png file and storing on the server, but the base64 route allows me to store the images in a database and minimize requests. The images are unique, few, and the page won't be refreshed often.

一些 jQuery 将获取画布数据，data:image/png;base64,iVBORw... 并将其传递给一个 PHP 脚本，该脚本将其包装如下:<img src="$data"></img>

A bit of jQuery will take the canvas data, data:image/png;base64,iVBORw... and passes it along to a PHP script that wraps it like so: <img src="$data"></img>

但是，安全是基石，需要验证 base64 画布数据以防止在 POST 请求中传递恶意数据.我主要关心的是防止外部 URL 被注入到 <img> 标签中并在页面加载时被请求.

However, security is cornerstone and need to validate the base64 canvas data to prevent passing malicious data in the POST request. My primary concern is to prevent external URLs from being injected into the <img> tag and being requested on page load.

我目前有这样的设置:

$data = (isset($_POST['canvas']) && is_string($_POST['canvas'])) ? $_POST['canvas'] : null;
$base = str_replace('data:image/png;base64,', '', $data);
$regx = '~^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$~'

if ((substr($data, 0, 22)) !== 'data:image/png;base64,')
{
  // Obviously fake, doesn't contain the expected first 22 characters.
  return false;
}

if ((base64_encode(base64_decode($base64, true))) !== $base64)
{
  // Decoding and re-encoding the data fails, something is wrong
  return false;
}

if ((preg_match($regx, $base64)) !== 1) 
{
  // The data doesn't match the regular expression, discard
  return false;
}

return true;

我想确保我当前的设置足够安全以防止将外部 URL 插入到 <img> 标记中，如果没有，可以采取什么措施进一步验证图像数据?

I want to make sure my current setup is safe enough to prevent external URLs from being inserted into the <img> tag, and if not, what can be done to further validate the image data?

推荐答案

这样做的一种方法是从 base64 数据实际创建一个图像文件，然后使用 PHP 验证图像本身.可能有一种更简单的方法可以做到这一点，但这种方法肯定会奏效.

One way of doing this would be to actually create an image file from the base64 data, then verify the image itself with PHP. There might be a simpler way of doing this, but this way should certainly work.

请记住，这仅适用于 PNG，如果您打算允许更多文件类型(GIF、JPG)，则需要添加一些逻辑.

Keep in mind that this only really works for PNGs, you'll need to add some logic if you're planning on allowing more file types (GIF, JPG).

<?

$base64 = "[insert base64 code here]";
if (check_base64_image($base64)) {
    print 'Image!';
} else {
    print 'Not an image!';
}

function check_base64_image($base64) {
    $img = imagecreatefromstring(base64_decode($base64));
    if (!$img) {
        return false;
    }

    imagepng($img, 'tmp.png');
    $info = getimagesize('tmp.png');

    unlink('tmp.png');

    if ($info[0] > 0 && $info[1] > 0 && $info['mime']) {
        return true;
    }

    return false;
}

?>

这篇关于验证 base64 编码的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！