Creating temp URLs in single page applications

问题:

In my react based single page application, my page is divided in two panes.

Left Pane: Filter Panel.

Right Pane: Grid (table containing data that passes through applied filters)

In summary, I have an application that looks very similar to amazon.com. By default, when user hits an application's root endpoint (/) in the browser, I fetch last 7 days of data from the server and show it inside the grid.

Filter panel has couple of filters (e.g. time filter to fetch data that falls inside specified time interval, Ids to search data with specific id etc.) and a search button attached in the header of filter panel. Hitting search button makes a post call to a server by giving selected filters inside post form body, server returns back data that matches filters passed and my frontend application displays this data returned back from the server inside grid.

Now, when someone hits search button in the filter panel I want to reflect selected filters in the query parameter of the URL, because it will help me to share these URLs with other users of my website, so that they can see filters I applied and see data inside the grid matching these filters only.

Problem here is, if on search button click, I use http get with query parameters, I will endup breaking application because of limit imposed on URL length by different browsers.

Please suggest me correct solution to create such URLs that will help me to set the selected filters in the filter panel without causing any side effect in my application.

Possible solution: Considering the fact that we cannot directly add plain strings in query parameter because of URL length limitation from different browsers (Note: Specification does not limit the length of an HTTP Get request but different browsers implement their own limitations), we can use something like message digest or hash (convert input of arbitrary length into an output of fixed length) and save it in DB for server to understand the request and serve content back. This is just a thought, I am not sure whether this is an ideal solution to this problem.

Behavior of other heavily used websites:

• amazon.com, newegg.com -> uses hashed urls.
• kayak.com -> since they have very well defined keywords, they use short forms like IN for INDIA, BLR for Bangalore etc. and combine this with negation logic to further optimize maximum url length. Not checked but this will ideally break after large selection of filters.
• flipkart.com -> appends strings directly to query parameters and breaks after limit is breached. verified this.

回答1:

In response to @cauchy's answer, we need to make a distinction between hashing and encryption.

Hashing

Hashes are by necessity irreversible. In order to map the hash to the specific filter combination, you would either need to

1. hash each permutation of filters on the server for every request to try matching the requested hash (computationally intensive) or
2. store a map of hash to filter combination on the server (memory intensive).

For the vast majority of cases, option 1 is going to be too slow. Depending on the number of filters and options, option B may require a sizable map, but it's still your best option.

Encryption

In this scheme, the server would send its public key to the client, then the client could use that to encrypt its filter options. The server would then decrypt the encrypted data with its private key. This is good, but your encrypted data will not be fixed length. So, as more options are selected, you run into the same problem of indeterminate parameter length.

Thus, in order to ensure your URL is short for any number of filters and options, you will need to maintain a mapping of hash->selection on the server.

How should we handle permanent vs temporary links?

You mentioned in your comment above

If we use some persistent store to save the mapping between this hash to actual filters, we would ideally want to segregate long-lived "permalinks" from short-lived ephemeral URLs, and use that understanding to efficiently expire the short-lived hashes.

You likely have a service on the server that handles all of the filters that you support in your application. The trick here is letting that service also manage the hashmap. As more filters and options are added/removed, the service will need to re-hash each permutation of filter selections.

If you need strong support for permalinks, then whenever you remove filters or options, you'll want to maintain the "expired" hashes and change their mapping to point to a reasonable alternative hash.

When do we update hashes in our DB?

There are lots of options, but I would generally prefer build time. If you're using a CI solution like Jenkins, Travis, AWS CodePipeline, etc., then you can add a build step to update your DB. Basically, you're going to...

1. Keep a persistent record of all the existing supported filters.
2. On build, check to see if there are any new filters. If so...
   1. Add those filters to the record from step 1.
   2. Hash all new filter permutations (just those that include your new filters) and store those in the hash DB
3. Check to see if any filters have been removed. If so...
   1. Remove those filters from the record from step 1.
   2. Find all the hashes for permutations that include those filters and either...
      • remove those hashes from the DB (weak permalinks), or
      • Point that hash to a reasonable alternative hash in the DB (strong permalinks)

回答2:

Lets analyse your problem and the solution possible. Problem : You want a URL which has information about the filter applied so that when you share that URL user doesn't land on arbitrary page.

Solutions:

1) Append filter applied with URL. To achieve this you will need to shorten the key of type of filter and the value of filter so that Length of URL don't exceed much for each filter.

Drawback: This is not most reliable solution as the number of filter increase URL length has to increase no other option.

2) Append a unique key of filter applied(hash) with URL. To achieve this you will need to do some changes on server and client both. On client side you will need a encoding algorithm which convert filter applied to unique hash. On server side you will need decoding algorithm which convert unique hash to filter applied. SO now client whenever a URL like this is hit you can make a POST api call which take this hash give you the array of filter applied or on client side only put the logic to convert this hash. Do all this in componentWillMount to avoid any side effect.

I think 2nd solution is scalable and efficient in almost all cases.