How do I encrypt my URL when there are Angularjs data included in the URL?

Question

This is my URL:

<a class="btn btn-success btn-sm btn-block" href="@Url.Action("myAction", "myController")?Id={{repeat.Id}}&HistoryId={{repeat.HistoryId}}" ng-cloak>View History</a>

I just want to know how do I encrypt the URL. Please help.

Answer 1

If you want to protect any bits of data then don't put them in the URL, use a POST request over HTTPS so that the body is encrypted. However, everything happens client side, so you need to be careful you don't expose any important values. Anyone can hit F12 and use the debugger at any point in the JavaScript code to see what happens and what values you have.

Always assume that nothing on the client side is safe. The best idea is to never expose important IDs directly. Imagine you have your data in a Sql table with these fields:

ID - int, Name - varchar

If you expose the ID, people can simply issue requests to your api and change that id sequentially to hit data they are not supposed to.

Now, if you add an extra field to your table definition, let's call PublicID of type GUID and this is the one you expose in the URL then everything is good with the world again . On the server side you change your datalayer a little bit to take these new IDs, work out the real ID and then do whatever is needed. This way you protect your internal IDs, never expose them and you are always safe because no one can guess a GUID and they are not sequential.

Assuming you have a create method, on create you simply populate these new ID with a Guid.NewGuid() call.

I cannot emphasize this enough, nothing you expose on the client side is secure, whatever you do. Best idea, don't expose anything you don't want people to know about.

Answer 2

You can try two workarounds:

1) Usually encrypting the data instead of entire URL is more than enough, and less complicated. When constructing your angular method, you need to encrypt the ID before you even assign to the URL. This way the IDs will be encrypted and no one can see the actual ID. When the URL is being clicked, you need to decrypt the URL in the back-end before processing them.

2) If for whatever reason, you still need to encrypt the entire URL of the anchor, you can do it in $document.ready. Assign an ID for your hyperlink. Once DOM is loaded and document.ready is called, you need to use ajax and send the full URL of the anchor to back-end to perform encryption. Then in ajax success, append the encrypted URL to the anchor

$ajax.
   ...
   success: function (data) {
     $("#myHyperLink").attr("href", data.EncryptedURL)
   }

But using this approach, you need to handle the clicking of that anchor separately, otherwise the browser can't redirect you to anywhere.

If possible, use the POST method instead