Firefox 动态修改 favicon 不显示问题

[sixwinds]

Firefox 动态修改 favicon 不显示问题

1 问题

项目中需要动态改变页面的 favicon，icon 文件存储在阿里云（OSS）上。改变 favicon 的方式是通过获取 link 元素，把 icon 的 url 赋值给其 href。在 chrome 上测试可以正确显示，但是在 firefox 上却没有显示图标。

2 分析

动态改变 favicon 以前我也没有做过，秉承不放过一个可能的 debug 策略，首先怀疑 firefox 不支持动态修改 link[rel=icon]。于是打开 fiddler 查看在动态赋值图标 url 后有没有图片请求发出（firefox自带的开发者工具中没有显示 link[rel=icon] 的请求）。在 fiddler 中发现 firefox 是发送了请求的，那么接下来就看下返回了。此时发现阿里云返回的是403，估计是请求头缺少了什么东西导致请求被阿里云屏蔽了。查看图片的请求头发现缺少 Referer，估计就是这个影响了。我重新打开 chrome 看了下图片的请求是有 Referer 的，那么基本上可以确定这是 firefox 的一个 bug。最终我去到阿里云的管理界面看了下防盗链的设置界面，里面选择的是 Referer 不能为空，这下证实了我的猜测：由于 firefox 的加载 favicon 的时候，请求头缺少了 Referer，被阿里云防盗链了。

3 解决方案

解决方案其实是在 google 的时候发现的，link[rel=icon] 的 href 不但可以写 url，还可以写图片的 base64 编码，和 img 标签一样。那么我是否可以用 img 标签加载这个图标然后转成 base64 编码再赋值给 link[rel=icon] 呢？说干就干，依稀记得转 base64 编码可以使用 canvas.toDataURL 这个 API 来转，查了下浏览器支持情况，幸好项目要求支持的浏览器都支持。代码如下：

let ImageContentTypeMap:any = {
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  png: 'image/png',
  ico: 'image/x-icon',
  gif: 'image/gif'
}

function parseSuffix( url:string ):string {
  if ( url ) {
    let lastDotIndex = url.lastIndexOf( '.' );
    if ( lastDotIndex >= 0 ) {
      return url.substr( lastDotIndex + 1 ).toLowerCase();
    } else {
      return '';
    }
  } else {
    return '';
  }
}
/*
请忽略为啥要用 promise，只是 copy 出来懒得改了
*/
function imageToBase64( url, width, height ) {
  return new Promise( function( resolve, reject ) {
      let img = new Image; 
      img.crossOrigin = 'Anonymous'; 
      img.onload = function() {
          var canvas = document.createElement( 'canvas' );
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext( '2d' );
          ctx.drawImage( img, 0, 0 );
          let imgSuffix = parseSuffix( url );
          if ( imgSuffix ) {
            let contentType = ImageContentTypeMap[imgSuffix];
            if ( contentType ) {
              resolve( canvas.toDataURL( contentType ) );
            } else {
              reject( new Error('Can not parse contentType of favicon') )
            }
          } else {
            reject( new Error('Can not parse suffix of favicon file') )
          }
      }
      // TODO: 当图片加载失败的情况
      img.src = url;
  } )
}

let iconLink = document.getElementById('iconLink');
imageToBase64( '....../xxx.ico', 16, 16 ).then( imgStr=>{
    iconLink.href = imgStr;
} ).catch( e=>{
    console.error( 'Parse favicon: ', e.stack );
} )

测试结果是 icon 图片是显示出来了，但是只显示了部分图片（囧）。那...应该可能是图标有问题？遂找了另外一个 png 的图标试试了，测试通过。难道是 firefox 中使用 img 加载 ico 文件有问题？只能上 google 大法了，经过了一番搜索和测试基本能确定下来，firefox 显示 ico 文件是没有问题的，但是 canvas.toDataURL 这个 API 在不同的浏览器中支持的图片格式有偏差，而且格式类型支持的都有限。所以我们最初用的 ico 文件通过 canvas.toDataURL encode 之后的编码不是完全正确的。此时我想到两个解决方案：

1. favicon 改换成 png 图片。
2. 后台直接给出的不是 icon 的 url，而是 base64 的编码。（用 ico 文件正确的 base64 编码做过测试，firefox 能够正确显示图标）

至此 firefox 不支持动态修改 favicon 的问题算解决了。

延伸资料

Favicon 历史 - https://en.wikipedia.org/wiki/Favicon
各浏览器支持显示的图片格式 - https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support