Javascript to allow a whitelist of URL arguments only

Question

I am trying to make a whitelist of allowed url args/query strings so any provided args in the url that are not in my whitelist are deleted from the url.

Here is my code.

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 argument is not in our whitelist of allowed arguments then delete it
  searchParams.delete(p[0]);
}

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

How can I make my code check against my whitelist and then run my delete function to remove the junk url args.

Answer 1

Explained

Okay, so here's a pretty simple implementation, using reduce function, it's simple, clean and if anything, thanks to using this approach, it doesn't cause for the value(s) of searchParams to change.

Furthermore, I'd like to add that I tried to change nearly as little as possible, I made the assumption that you didn't want side effects in your code.

Edit

If you'd like to understand the ES6-style implementation that I've provided, then you can look more into topics such as currying, for this topic specifically I suggest reading some content produced by Eric Elliott, finally if you want to learn more about the syntax such as arrow functions, I might suggest MDN.

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"
];

// Create an Array from searchParams, then reduce it via ensuring that each 
// key exists within the 'url_args_whitelist' Array, finally joining using 
// an '&' symbol. 
var cleanURL = Array.from(searchParams).reduce(function(array, sub) {
  var key = sub[0], value = sub[1];

  // Check the argument exists in the URL, if so, then push it onto the new array.
  if (url_args_whitelist.indexOf(key) > -1) array.push(key + '=' + value);

  return array;
}, []).join("&");

// Finally a more ES6 style approach, basically a one liner.
const clean = a => l => a.filter(o => l.includes(o[0])).map(o => o.join("=")).join("&");

// Results.
console.log("whitelist output:", cleanURL);
console.log("es6 output:", clean(Array.from(searchParams))(url_args_whitelist));
console.log("old output:", searchParams.toString());

Answer 2

I would just loop over the array and use reduce to get the keys that you care about. I would not try to delete anything.

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;
}, {});

But if you want to keep it with the url params it does have a delete method. So loop over all the entries and than delete it.

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