Secure angularjs code ajax request on php file

Question

I'm working on web app and I'm using angularjs. The problem is, I would like to be able to secure my angular code, I don't want someone look my code.

I have put my angular code to php file, and I'm trying to make request by $.ajax() method.

Can you help me?

This is the code:

index.html file

<!doctype html>
<html lang="en">
<head>
    ..............
</head>
<body>
    ..............
    <script src="assets/plugins/bootstrap/js/tooltip.js"></script>
    <script src="assets/plugins/bootstrap/js/popover.js"></script>
    <script src="assets/plugins/wow/wow.min.js"></script>
    <script src="assets/plugins/pouchdb/pouchdb-4.0.0.min.js"></script>

    <!-- Sripts for individual pages, depending on what plug-ins are used -->
    <script src="assets/plugins/layerslider/js/greensock.js" type="text/javascript"></script>
    <script src="assets/plugins/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    <script src="assets/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
    <!-- Initializing the slider -->

    <!--Angular scripts-->
    <script src="assets/plugins/angular/angular.min.js"></script>
    <script src="assets/plugins/angular-country-select/angular.country-select.js"></script>
    <script>
        (function(){
            $.ajax({
                url: 'assets/js/an.app.php',
                type:'GET',
                cache: false,
                success: function(newScript){
                    if(newScript){
                        $('body').append(newScript);
                        console.log(newScript);
                    }
                }
            }); 
        })();
    </script>
    <!--Fin Angular-->
    <script>
        jQuery("#layerslider").layerSlider({
            pauseOnHover: true,
            autoPlayVideos: false,
            skinsPath: 'assets/plugins/layerslider/skins/',
            responsive: true,
            skin: 'borderlessdark3d',
            hoverPrevNext: true,
        });
    </script>

    <script>
        new WOW().init();
    </script>

    <!-- Boomerang App JS -->
    <script src="assets/js/wp.app.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</body>
</html>

assets/js/an.php

<?php
$referer = $_SERVER['HTTP_REFERER'];
// Check URL
if ( $referer == 'http://localhost/netskools_website/' || $referer == 'http://localhost/netskools_website/sign-up.html' || $referer == 'http://localhost/netskools_website/index.html') {
?>
<script type="text/javascript">
    (function () {
        'use strict';

        var MyApp = angular.module('MyApp', ['countrySelect']);
        //Directive menu principal de pages
        MyApp.directive('mainmenu', [function () {
            return {
                restrict: 'E',
                templateUrl: 'assets/ngapp/mainmenu.html'
            };
        }]);
        // Directive Template de téléchargement en banière
        MyApp.directive('maindownload', [function () {
            return {
                restrict: 'E',
                templateUrl: 'assets/ngapp/maindownload.html'
            };
        }]);
        // Directive Footer de pages
        MyApp.directive('thefooter', [function () {
            return {
                restrict: 'E',
                templateUrl: 'assets/ngapp/footer.html'
            };
        }]);
        // 
        MyApp.controller('homeController', ['$scope', function ($scope) {
            $scope.activepage = "home";
        }]);
        // 
        MyApp.controller('signupController', ['$scope', '$q', '$filter', function ($scope,$q,$filter) {
            $scope.activepage = "nous-contacter";
            $scope.state_activation = false;
            $scope.nom="";
            $scope.prenom="";
            $scope.email="";
            $scope.type_hote="";
            $scope.selectdefault=0;
            $scope.selectedCountry="";
            $scope.nom_hote="";
            $scope.etat_region="";
            $scope.ville="";
            $scope.adresse="";
            $scope.telephone="";
            $scope.info="";

            $scope.enable_submit = function () {
                if ($scope.subscription === true) {
                    $scope.state_activation = true;
                } else {
                    $scope.state_activation = false;
                }
                return $scope.state_activation;
            };

            //Initialisation de la base données
            var netskoolsSouscriptionsDB, ddoc;
            netskoolsSouscriptionsDB = new PouchDB('http://kristdev:Kokodi.1@localhost:5984/netskools_souscriptions');
            // ====================

            // create a design doc
            ddoc = {
                _id: '_design/indexCollection',
                views: {
                    indexCollection: {
                        map: function mapFun(doc) {
                            if (doc.collection) {
                                emit(doc.collection);
                            }
                        }.toString()
                    }
                }
            };
            // =======================


            // Save Design Doc
            netskoolsSouscriptionsDB
                .put(ddoc)
                .then(function (response) {
                // handle response
                console.log(JSON.stringify(response));
            })
                .catch(function (err) {
                console.log(err);
            });
            /*============================*/

            //Ajout des données du formulaire
            $scope.addData = function() {
                if($scope.nom,$scope.prenom,$scope.prenom,$scope.type_hote,$scope.nom_hote,$scope.selectedCountry,$scope.etat_region,$scope.ville,$scope.adresse,$scope.telephone,$scope.info){
                    var deferred = $q.defer();
                    var value_hote;
                    switch (true){
                        case $scope.type_hote == 0: 
                            value_hote = 'Ecole primaire';
                            break;
                        case $scope.type_hote == 1:
                            value_hote = 'Ecole secondaire';
                            break;
                        case $scope.type_hote == 2:
                            value_hote = 'Ecole supérieure';
                            break;
                        case $scope.type_hote == 3:
                            value_hote = 'Ecole de formation';
                            break;
                        case $scope.type_hote == 4:
                            value_hote = 'Institut de recherche ou de statistique';
                            break;
                        case $scope.type_hote == 5:
                            value_hote = 'Organisme ou organe étatique';
                            break;
                        default: value_hote = 'Autre structure';

                    }

                    var doc = {
                        collection: 'demandeur',
                        nom: $scope.nom,
                        prenom: $scope.prenom,
                        email: $scope.email,
                        type_hote: value_hote,
                        nom_hote: $scope.nom_hote,
                        pays_residence: $scope.selectedCountry,
                        etat_region: $scope.etat_region,
                        ville: $scope.ville,
                        adresse: $scope.adresse,
                        telephone: $scope.telephone,
                        info: $scope.info,
                        activation: false,
                        _id: new Date().toISOString()
                    };    

                    netskoolsSouscriptionsDB
                        .put(doc)
                        .then(function (response) {

                        // handle response
                        console.log('Chaine Ecrite: ' + JSON.stringify(response));
                        document.getElementById('nom').value='';
                        document.getElementById('prenom').value='';
                        document.getElementById('email').value='';
                        document.getElementById('prenom').value='';
                        document.getElementById('nom_hote').value='';
                        document.getElementById('etat_region').value='';
                        document.getElementById('ville').value='';
                        document.getElementById('adresse').value='';
                        document.getElementById('telephone').value='';
                        document.getElementById('info').value='';
                        swal('Demande enregistrée avec succès!', 'Un de nos télé-conseillers vous contactera dans les 48h', 'success');
                        $scope.state_activation = false;
                        deferred.resolve('Ecriture réussie');
                    })
                        .catch(function (err) {
                        console.log(err);
                        deferred.reject('Echec Ecriture');
                    });
                    return deferred.promise;
                }else{
                    ohSnap('Remplissez le formulaire', 'red');
                }
            };
            /*====================================*/
        }]);
    })();
</script>
<?php
}else echo "Vous n'avez pas accès à cette page";
?>

No idea why you think this is going to prevent anyone reading the code in the browser. Since you aren't using angular best practices anyway I don't think you have much to worry about — charlietfl
– charlietfl, Commented Oct 25, 2015 at 16:03
the problem is, i ought to use a couchdb Database by pouchdb plugin. It's not correct everybody sees the user and password of my database — packy
– packy, Commented Oct 25, 2015 at 16:57
This solution won't solve that...anyone who has this code in browser can read it — charlietfl
– charlietfl, Commented Oct 25, 2015 at 17:02
Excuse me, i've verified in code source of the page, the one method is to write the entirely url of an.app.php. And about, that's the reason i've used the php $_SERVER['HTTP_REFERER']. If you got an other alternative can you help me? — packy
– packy, Commented Oct 25, 2015 at 17:36

Laohyx · Accepted Answer · 2015-10-26 03:47:11Z

2

Simply loading angular resources, such as controllers or other modules, by ajax is not practical. A simple comprehension is that all modules should be loaded before the document is ready (document.ready). But you load resources by ajax after the event.

If you really want to secure your code by limiting HTTP referrers, you can just add a script tag, and link to the php file. Like this:

<script src="assets/js/an.app.php"></script>

Your php file needs no change. But adding a header is better:

// assets/js/an.php
<?php
header('Content-type: application/javascript');
$referer = $_SERVER['HTTP_REFERER'];
// Check URL
if ( $referer == 'http://localhost/netskools_website/' || $referer == 'http://localhost/netskools_website/sign-up.html' || $referer == 'http://localhost/netskools_website/index.html') {
?>

// rest of your code

answered Oct 26, 2015 at 3:47

Laohyx

3033 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

packy Over a year ago

Thanks, i will verify and come back soon

packy Over a year ago

Iv'e tested your solution, but the code is alaways visible, it's not working. But thanks a lot for your time.

Laohyx Over a year ago

@user3456875 The JS code cannot be hidden anyhow, because JS is executed in user's browser. Limiting referer is usually used to preventing images from hotlinking. The visitors did visit your index.html, and naturally add a referer to the an.php. You cannot preventing users from seeing JS code. You can mangle the js at most. I suggest that learn the usage of Angular, PHP and other web components. Then learn web security systematically.

Collectives™ on Stack Overflow

Secure angularjs code ajax request on php file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related