从客户端隐藏API密钥

Question

I am attempting an API integration with Zendesk. I'm having a lot of problems. You can see the questions I've asked about it so far below:

How to pass an access token in an ajax call

ZenDesk API ticket submission using Javascript - authorization

Now the good news - I have it working on the surface. however my API key is publicly in the client side Javascript, and I need to figure out someway to hide it. This is currently what my code looks like:

$.ajax({
        type: 'post',
        url: 'https://domain.zendesk.com/api/v2/tickets.json',
        data: {
          "ticket": {
            "subject": "new contact from " + contactEmail,
            "comment": {
              "body": contactFirstName + ' ' + contactLastName + ' ' + 'says: ' + contactMessage + contactEmail
            }
          }
        },
        beforeSend : function(xhr) {
            xhr.setRequestHeader( 'Authorization', 'BEARER (my key is here)' );
        },
        success: function(response) {
            console.log(response);
        },
        error : function(error) {
            console.log(error);
        }
        console.log('support ticket sent');
      });

My research has led me to the following resources:

How to Hide an API Key in Client-Side Javascript

http://billpatrianakos.me/blog/2016/02/15/securing-api-keys-in-a-javascript-single-page-app/

Using JS/PHP/JS to hide API key

They all share the setiment that this should be handled on the server side. However, I cannot find any clear cut tutorials on how to do this. Can someone give me an idea on how to even start? Been stuck on this for over a week.

Answer 1

The only thing you can do is, as some mentioned, that you contact a PHP file as a middleware. So you request a PHP file and send a cURL request.

The problem in client side apps are, that the client can read everything. So you have the only way to do with a little middle step with PHP for example.

The best is that you can wait for the cURL response and take the response back to the client.