How to encode/decode strings in JavaScript?

Question

I need to pass a variable in an onclick function that I don't want the user to be able to view the page source and just easily read. I want to encode the string and then decode it in the function that I pass the string to.

I've done a Google search for this and can only find information on encoding/decoding URLs to safely pass them, but not strings in general. Does JavaScript have any built in encoding/decoding functions (hopefully that PHP has too, because I will also be using PHP to send the encoded string)?

Is it necessary to expose the string in the JavaScript code in the first place? Can you not just keep things on server side? — Pekka, Mar 14 '13 at 18:39
*"I don't want the user to be able to view the page source and easily read"* - You mean encryption/decryption then. See simliar question: http://stackoverflow.com/questions/3609005/simple-javascript-encrypt-php-decrypt-with-shared-secret-key — Amy, Mar 14 '13 at 18:40
Well I'm not sure how else I would use it without using a string in JavaScript. It is a music player button, and there are multiple buttons on the page. When the user clicks a specific button, it has to tell my JavaScript function the URL of the mp3 to play. I don't want the user to see the URL so they can easily download the mp3. The site is http://www.startingtofeelit.com. Scroll your mouse over the pictures to see the "play" button — jas7457, Mar 14 '13 at 18:44
@jas7457 If they can listen to your mp3, then they have already downloading the file to their computer. — Amy, Mar 14 '13 at 18:46
@sweetamylase yes I know this, but this is to deter the not-so-well-informed users from easily downloading songs. — jas7457, Mar 14 '13 at 18:48
if you have secret text or data you should keep it in the server side. — Mehdi Karamosly, Mar 14 '13 at 18:48
@MehdiKaramosly how can I do this if I need it to happen on an onclick state? Does PHP have some type of equivalent that I can use? — jas7457, Mar 14 '13 at 18:50

score 1 · Answer 1 · answered Mar 14 '13 at 18:45

What you are trying to do is not feasible. No matter what decryption logic you use, you will need to ship it over to the consumer's computer in JavaScript, which means that any sufficiently smart script-kiddie with Firebug will be able to easily decode all of your secrets. Moreover, they will be able to modify the data on the client side, in their browser console, and trick your server.

I encourage you to keep these kinds of secrets on the server side, perhaps in session state, or in something that's associated with the currently logged in user. Do not send it to the client.

He wants to encrypt the url of his mp3 file location - impossible to keep that on the serverside (and while you can keep it in plain form from the source code, you can't keep it from the network panel) :-) — Bergi, Mar 14 '13 at 18:49

Martina · Answer 2 · 2013-03-14T19:20:24.883

To get your URL off the javascript try using some ID instead. You will have to translate that ID serverside then to URL. You can use simple array such as:

function getLink($songID) {
    $decodeArray=array(
        1=>"www.mysite.com/myfirstsong.mp3",
        2=>"www.othersite.net/othersong.mp3");
    return $decodeArray[$songID];
}

die(getLink($_GET['songID']));//send back the URL

or you can use database within that translating php code (above)

There you have 2 choices how to do this "answering service" 1) replying to the XMLHttpRequest with the url (from your php script) and pasing the returned value from javascript to flash client-side (as in the code above) or 2) answer only some "OK" status message to Javascript and send the URL directly to the flash player - you would need to be able to code a little in Actionscript to be able to do this.

The problem still is in the fact that you need to inform the client (or Flash) about the actual song location (the readable URL string where it can find that song) so it has to travel back to the client and can be intercepted using a sniffer(packet analyzer) net tool. and in case of the code above one can query that php script directly and read the answer on screen without the need of sniffing.

To prevent that you would need to have the communication directly with Flash either through https (not sure whether it would work) or not send the url at all and instead stream the content of that song directly to your Flash application using socket connection between the Flash player clientside and your (home-made) php socket server.

Wow, very similar to my answer, +1 :) – Maarten Bodewes Mar 14 '13 at 19:19 — Maarten Bodewes, Mar 14 '13 at 19:19

score 1 · Answer 3 · answered Mar 14 '13 at 19:19

What you are trying to implement is DRM, which is not feasible to implement using browsers and JavaScript. You can of course always make it harder for a user to get to the sound file, but beware that you can easily scare away your users.

What you can do is to generate a large random (say 8 to 16 bytes or so) on the server side, or hash a counter. Then you make the MP3 available only once for download using the given random value. Next time any user wants to download the file, he gets a new random. The randoms are sufficiently large for a user never to guess the next file. As said, you cannot disallow the first download of course, so anybody smart enough to play with the the browsers cache will easily break the scheme.

You could also embed a flash player that receives and decodes the data stream so you can send the data in a form that is not easily decodable by non-experts. You could mix this with the randomized URL method.

You can URL-encode the random value using hexadecimals, or by using base64 and then an URL-encode function.

Indeed very similar. The random number is better. :) – Martina Mar 14 '13 at 19:26 — Martina, Mar 14 '13 at 19:26

How to encode/decode strings in JavaScript?

3 Answers3