仅允许URL参数白名单的Javascript

Question

我正在尝试将允许的网址参数/查询字符串列入白名单，以便从网址中删除不在我的白名单中的所有提供的网址参数。

这是我的代码。

var paramsString = "2=lol&q=how&44=slap&topic=api&1=tr&view=media"; //test url args
var searchParams = new URLSearchParams(paramsString);

//this whitelist of args are the only args to be allowed in the url
var url_args_whitelist = [
"beforeafter",
"catid",
"childforums",
"display",
"element_id",
"element_type",
"exactname",
"filter_mediaType",
"filter_order",
"filter_order_Dir",
"filter_search",
"filter_tag",
"format",
"id",
"Itemid",
"layout",
"limit",
"limitstart",
"messageid",
"more",
"option",
"order",
"ordering",
"quality",
"query",
"recently",
"recip",
"reply_id",
"return",
"searchdate",
"searchf",
"searchphrase",
"searchuser",
"searchword",
"sortby",
"start",
"task",
"tmpl",
"token",
"view"
];

for (let p of searchParams) {
//if the url arguement is not in our whitelist of allowed arguements then delete it
  searchParams.delete(p[0]);
}

console.log("whitelist output: ", searchParams.toString() );

如何使我的代码对照我的白名单，然后运行删除功能以删除垃圾网址参数。

Answer 1

您必须获取URL，将其拆分为键和值，然后针对白名单过滤键。最后，您将组成新的URL并执行重定向：

const query = window.location.search.replace('?', '');

const result = query
  .split('&')
  .map(token => {
    const [key, value] = token.split('=');
    return {key, value};
  })
  .filter(keyval => {
    return url_args_whitelist.indexOf(keyval.key) !== -1;
  })
  .map(keyval => {
    return [keyval.key, keyval.value].join('=');
  })
  .join('&');

window.location.search = '?' + result;

这是一个有效的示例：

/* let's suppose these are your query params */

let query = '?childforums=123&abc=345';

query = query.replace('?', '');


var url_args_whitelist = [
"beforeafter",
"catid",
"childforums",
"display",
"element_id",
"element_type",
"exactname",
"filter_mediaType",
"filter_order",
"filter_order_Dir",
"filter_search",
"filter_tag",
"format",
"id",
"Itemid",
"layout",
"limit",
"limitstart",
"messageid",
"more",
"option",
"order",
"ordering",
"quality",
"query",
"recently",
"recip",
"reply_id",
"return",
"searchdate",
"searchf",
"searchphrase",
"searchuser",
"searchword",
"sortby",
"start",
"task",
"tmpl",
"token",
"view"
];



const result = query
  .split('&')
  .map(token => {
    const [key, value] = token.split('=');
    return {key, value};
  })
  .filter(keyval => {
     return url_args_whitelist.indexOf(keyval.key) !== -1;
  })
  .map(keyval => {
    return [keyval.key, keyval.value].join('=');
  })
  .join('&');

console.log('input:', query);
console.log('output:', result);

Answer 2

解释

好的，所以这是一个非常简单的实现，使用reduce函数，它简单，干净，而且如果有的话，由于使用了这种方法，它不会导致{{1}的值} 改变。

此外，我想补充一点，就是我尝试了尽可能少的更改，我假设您不希望代码产生副作用。

编辑

如果您想了解我提供的ES6风格的实现，则可以深入研究诸如currying之类的主题，对于该主题，我建议您阅读{{3 }}，最后，如果您想了解有关箭头功能之类的语法的更多信息，建议您使用Eric Elliott。

searchParams

Answer 3

我只是循环遍历数组，并使用reduce来获取您关心的键。我不会尝试删除任何内容。

var searchParams = new URLSearchParams(paramsString);

var url_args_whitelist = [
"beforeafter",
"catid",
"childforums",
"display"
];

var whiteList = url_args_whitelist.reduce( function (obj, key) {
  var value = searchParams.get(key)
  if (value) {
    obj[key] = value
  }
  return obj;
}, {});

但是，如果您希望将其与url参数一起使用，则可以使用delete方法。因此，循环遍历所有条目，然后将其删除。

searchParams.forEach(function(value, key) {
  if (url_args_whitelist.indexOf(key) === -1) {
    searchParams.delete(key)
  }
});

Answer 4

执行此操作的最佳方法是将白名单网址存储为对象而不是数组。从那时起，它将充当hashMap，并且您不必搜索是否包含密钥（每次都具有O（n）复杂度）

var paramsString = "2=lol&q=how&44=slap&topic=api&1=tr&view=media"; //test url args
var searchParams = new URLSearchParams(paramsString);

var url_args_whitelist = {
    "topic": true,
    "catid": true,
    // repeat for other values
    "token": true,
    "view": true,
};

var resultParams = new URLSearchParams();

for (let p of searchParams) {
  if (url_args_whitelist[p[0]]) {
    resultParams.append(...p)
  }
}

console.log("whitelist output: ", resultParams.toString() );

Answer 5

我猜你在问这样的东西：

   for (let p of searchParams) {
      if (!url_args_whitelist.includes(p[0])) {
        searchParams.delete(p[0]);
      }
    }

    console.log("whitelist output: ", searchParams.toString() );