Question

是否有一种简单的方法来检查base64图像网址是否有效？我通过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开头的字典中显示。

Answer 2

我使用@wolfshirts 的答案编写了一个异步函数。它对我有用。

<块引用>

@wolfshirts 函数将不起作用，因为放置了返回行在错误的范围内。

async function isBase64UrlImage(base64String: string) {
  let image = new Image()
  image.src = data
  return await (new Promise((resolve)=>{
    image.onload = function () {
      if (image.height === 0 || image.width === 0) {
        resolve(false);
        return;
      }
      resolve(true)
    }
    image.onerror = () =>{
      resolve(false)
    }
  }))
}

JavaScript检查是否有效的base64图像

2 个答案: