JavaScript检查有效的base64图像

Question

有没有一种简单的方法来检查base64图像URL是否有效？我正在通过ajax / xhr从服务器获取base64网址，并希望避免在我的网站上使用xss。

Answer 1

我不确定您是否正在尝试验证图像本身或 URL。验证图像可能很棘手。我首先会针对已知的 base64 MIME 类型进行检查。

'/' 表示 jpeg。

'i' 的意思是 png。

“R”表示 gif。

'U' 表示 webp。

let data = //suspectedBase64Image
    
    
function isImage(data){
    let knownTypes = {
      '/': 'data:image/jpg;base64,',
      'i': 'data:image/png;base64,',
      /*ETC*/
      }
      
      let image = new Image()
      
      if(!knownTypes[data[0]]){
        console.log("encoded image didn't match known types");
        return false;
      }else{
        image.src = knownTypes[0]+data
        image.onload = function(){
          //This should load the image so that you can actually check
          //height and width.
          if(image.height === 0 || image.width === 0){
            console.log('encoded image missing width or height');
            return false;
          }
      }
      return true;
}

这是您可以使用的一些基本健全性检查。

您可以更深入地将幻数转换为 Base64，然后在 Base64 数据中检查它们。此代码假设您在开始时缺少数据类型。某些 Base64 将具有在 Base64 开头的字典中显示的数据类型。