Hiding OAuth secrets in jQuery

Hiding OAuth secrets in jQuery

Hello,

Below is some sample code from Yelp:

     
  1. <!--
  2. This example is a proof of concept, for how to use the Yelp v2 API with javascript.
  3. You wouldn't actually want to expose your access token secret like this in a real application.
  4. -->

  5. <html>
  6. <head>
  7. <title>Yelp OAuth Example</title>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  9. <script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script>
  10. <script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script>
  11. <script type="text/javascript" src="https://raw.github.com/padolsey/prettyPrint.js/master/prettyprint.js"></script>
  12. <script type="text/javascript">
  13. var auth = {
  14.   //
  15.   // Update with your auth tokens.
  16.   //
  17.   consumerKey: "YOUR_CONSUMER_KEY",
  18.   consumerSecret: "YOUR_CONSUMER_SECRET",
  19.   accessToken: "YOUR_TOKEN",
  20.   // This example is a proof of concept, for how to use the Yelp v2 API with javascript.
  21.   // You wouldn't actually want to expose your access token secret like this in a real application.
  22.   accessTokenSecret: "YOUR_TOKEN_SECRET",
  23.   serviceProvider: {
  24.     signatureMethod: "HMAC-SHA1"
  25.   }
  26. };

  27. var terms = 'food';
  28. var near = 'San+Francisco';

  29. var accessor = {
  30.   consumerSecret: auth.consumerSecret,
  31.   tokenSecret: auth.accessTokenSecret
  32. };

  33. parameters = [];
  34. parameters.push(['term', terms]);
  35. parameters.push(['location', near]);
  36. parameters.push(['callback', 'cb']);
  37. parameters.push(['oauth_consumer_key', auth.consumerKey]);
  38. parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
  39. parameters.push(['oauth_token', auth.accessToken]);
  40. parameters.push(['oauth_signature_method', 'HMAC-SHA1']);

  41. var message = {
  42.   'action': 'http://api.yelp.com/v2/search',
  43.   'method': 'GET',
  44.   'parameters': parameters
  45. };

  46. OAuth.setTimestampAndNonce(message);
  47. OAuth.SignatureMethod.sign(message, accessor);

  48. var parameterMap = OAuth.getParameterMap(message.parameters);
  49. parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature)
  50. console.log(parameterMap);

  51. $.ajax({
  52.   'url': message.action,
  53.   'data': parameterMap,
  54.   'cache': true,
  55.   'dataType': 'jsonp',
  56.   'jsonpCallback': 'cb',
  57.   'success': function(data, textStats, XMLHttpRequest) {
  58.     console.log(data);
  59.     var output = prettyPrint(data);
  60.     $("body").append(output);
  61.   }
  62. });
  63. </script>
  64. </head>
  65. <body>

  66. </body>
  67. </html>

This code runs fine when you plug in the values for the various
keys assigned to you. The question is can you hide this info
from the client when they do a view source of the page? I looked
at obfuscate techniques but they merely make it harder to find
out the secrets. Anyone have any ideas on this?

Thanks,
Jim