1

I recently started learning AngularJS, and I have the following sample code that does a REST callout from a Visualforce page - the code does a successful callout. My question: In the 'app.config' where we provide the Authorization header as a string value ('BASIC base64Hash'), base64Hash being the username:password hash, how is this secure? If I open up the page and hit inspect, I can grab the hash and decrypt the base64 to get the username:password.

P.S: Keep in mind that I recently got into AngularJS, and I know that the following procedure for a REST callout from AngularJS may not be the best practice. Which is why the question. :)

<apex:page standardStylesheets="false" showHeader="false">
    <html ng-app="hello" lang="en">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
            <script>
                // define the app
                var demoApp = angular.module('hello', []);
                demoApp.config(['$httpProvider', function($httpProvider) {
                    $httpProvider.defaults.headers.common['Authorization'] = 'BASIC base64Hash';
                }]);
                demoApp.controller('helloController', function($scope, $http){
                    $http({
                        method: "GET",
                        url: "ENDPOINT URL",
                    }).then(function mySuccess(response){
                        $scope.apiResponse = response.data;
                    }, function myError(response){
                        $scope.apiResponse = response.statusText;
                    });
                });
            </script>
        </head>
        <body ng-controller="helloController">
            <div>
              {{apiResponse}}
            </div>
        </body>
    </html>
</apex:page>
Improve this question

2 Answers 2

Reset to default
1

Its not recommended to use the username/pass on the client side.

Instead what you can do is inject the Session Id and pass that instead.

$httpProvider.defaults.headers.common['Authorization'] = 'Bearer {!$Api.Session_ID}';

This article explains in more detail.

Notice: if you move the angular app to a static resource, you will be need to assign the session ID to a the global scope since you can't preform VF bindings in static resources:

In VF page:

<script type="text-javascript">
window.SF_SessionId = '{!$Api.Session_ID}';
</script>

In static resource:

$httpProvider.defaults.headers.common['Authorization'] = 'Bearer ' + window.SF_SessionId;
Improve this answer
1

Please do Callouts from server side and once the response comes back pass them to Angular controllers and continue with processing.Its never secure to store passwords or secure information in javascript as its very easy to find out using browser debugging tools.

You can declare a remote method in your apex controller and call that method from angular controller to make the server call which will do the integration call and send the response back to you.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .