ajax 与 beforeSend 但凭据隐藏

Question

I have this ajax calls:

$(document).ready(function() {
    $.ajax({
        type: 'GET',
        beforeSend: beforeSend,
        url: someUrl

For beforeSend I got:

const beforeSend = function ( xhr ) { xhr.setRequestHeader( 'Authorization', 'Basic ' + Base64.encode( UserPass ) );};

With:

const Base64 = {_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}};

const UserPass = 'SomeLogin:SomePass'

But this is not ok, I can't have the credentials 'SomeLogin:SomePass' there in my javascript. How can I hide them or use them from PHP or something? I'm calling this ajax directly from a html page, I'm using Symfony. Some guy told me "Read it from a cookie" but I didn't get it how, which cookie.

Answer 1

Cookies are files stored at the end of the client (in this case it is stored by the browser) and they contain important informations for the user about the website. Hopefully a session id is inside the cookie. A session id is a value which identifies a session. A session is a concept which denotes the usage of a service (in this case the website) via a channel (in this case the browser).

You can get the cookie of a page via document.cookie (javascript code). Run

console.log(document.cookie);

and you will see the value of your cookie for the given site in the browser console. A cookie can contain multiple values, so there are several libraries which aim to simplify your interactions with cookies.

EDIT:

The idea is to use a session id, because in that case even if your session id is stolen, your username and password will still remain only in your possession.

Answer 2

If you really need to keep the credentials secret, not visibile by the browser you should not keep them in the browser. You could use your server as a proxy. Make an ajax call to your server and have the server make the authed called to the service.

On the other hand if the credentials are specific to each user, you can use them as such, just make sure you are making HTTPS calls so nobody can see the request's body.