decodeURIComponent解码含有特殊符%25等路径时数据丢失问题

最近在使用decodeURIComponent的时候，发现浏览器参数中含有特殊符号%，会导致decodeURIComponent等解码报错。今天就简单分享一下如何处理这个问题。

浏览器中的不安全字符

不安全符号	解释
空格	Url在传输的过程，或者用户在排版的过程，或者文本处理程序在处理Url的过程，都有可能引入无关紧要的空格，或者将那些有意义的空格给去掉
引号以及<>	引号和尖括号通常用于在普通文本中起到分隔Url的作用
#	通常用于表示书签或者锚点
%	百分号本身用作对不安全字符进行编码时使用的特殊字符，因此本身需要编码
{}\^[]`~	某一些网关或者传输代理会篡改这些字符

现象阐述1：

例如：

http://192.168.6.41:9043/fs.dataexa.com/dataexa/defense/usa_air_doctrine/usa_air_doctrine/file/AFDN%25201-21%2520ACE_e00e815da.pdf

这种带空格（%25）特殊符的经过解码后，数据会丢失（25没掉了）

解决方案

对数据进行替换，把%替换成对应的特殊符%25，这样丢失一个后，还有个25

// 对查询关键字中的特殊字符进行编码
  encodeSearchKey(key) {
    const encodeArr = [{
      code: '%',
      encode: '%25'
    }, {
      code: '?',
      encode: '%3F'
    }, {
      code: '#',
      encode: '%23'
    }, {
      code: '&',
      encode: '%26'
    }, {
      code: '=',
      encode: '%3D'
    }];
    return key.replace(/[%?#&=]/g, ($, index, str) => {
      for (const k of encodeArr) {
        if (k.code === $) {
          return k.encode;
        }
      }
    });
  },

现象阐述2：

例如：

https://www.haorooms.com/?param=haorooms%E5%8D%9A%E5%AE%A2%E5%A5%BD%E8%AF%84%E7%8E%8790%

用decodeURIComponent解码会报错。

对于这种已经被浏览器编译了的，可以采用如下方式，避免报错

方法一：

function decodeURIComponentSafe(uri, mod) {
    var out = new String(),
        arr,
        i = 0,
        l,
        x;
    typeof mod === "undefined" ? mod = 0 : 0;
    arr = uri.split(/(%(?:d0|d1)%.{2})/);
    for (l = arr.length; i < l; i++) {
        try {
            x = decodeURIComponent(arr[i]);
        } catch (e) {
            x = mod ? arr[i].replace(/%(?!\d+)/g, '%25') : arr[i];
        }
        out += x;
    }
    return out;
}

方法二： 采用try catch捕获

function decodeURIComponentSafely(uri) {
    try {
        return decodeURIComponent(uri)
    } catch(e) {
        console.log('URI Component not decodable: ' + uri)
        return uri
    }
}

小结

浏览器参数中，尽量不要使用不安全符合，我们写代码的时候，为了严谨，可以使用decodeURIComponentSafe 函数，或者采用try catch捕获，避免因为浏览器有不安全符合引发代码报错！

转载地址：decodeURIComponent在解析浏览器参数中含有%时报错处理