javascript - Securing XHR Request to AngularJS templateURLs -

javascript - Securing XHR Request to AngularJS templateURLs -

*i apologize if misunderstanding here =)

in angular, templates requested via xhr server , loaded application, kept in cache. if load page , @ networking, can see next request:

remote address:xx.xxx.x.xx:80 request url:http://{host}/views/notifications.html request method:get status code:200 ok

i have locked downwards path context root of /views on application server.

the question: there way provide credentials of username/password templateurl utilize auth when fetches inital template? if so, angular provide mechanism this, or have fork , customize. or maybe there improve approach enable page level security in angularjs application.

i want avoid hiding , showing pages. thought beingness couldn't open console , switch booleans , display page

thanks in advance!

firstly, may want utilize ui-router alter views/templates. using ui-router, can utilize states , check authentication in resolve statement so:

$stateprovider.$state('notifications', { url: '/notifications', templateurl: 'notifications.html', resolve : { auth: function(authenticationservice) { // create authentication service if (!authenticationservice.auth) { // check authentication $state.go('login) // go different states } } } })

the resolve promise stuff before rendering template.

additionally:

instead of using requests fetch templates, $templatecache service.

$templatecache lets cache templates using set method , key/value. way, whenever need utilize templateurl can inject $templatecache service , reference template key so:

$templatecache.put('notifications.html', '<div> template here</div>');

then in directive illustration :

app.directive('somedirective', function($templatecache){ homecoming { restrict: 'ecma', templateurl: 'notifications.html' } })

similarly if you're using ng-include in html can reference template in same way :

<div ng-include='notifications.html'></div

you want gulp-angular-templatecache help concatenate html templates string values insert $templatecache.

additionally, want run template caching in run block of angular code.

the run block in angular application if you're using $templatecache service:

angular.module("sampleshoppingapp", []).run(["$templatecache", function($templatecache) { $templatecache.put("cart-footer.html","<div class=\'title cart-footer\'>checkout</div>"); $templatecache.put("cart-item.html","<div ng-if=\'!emptyproducts\'>\n <div class=\'card product-card\' ng-repeat=\'product in products track $index\'>\n <div class=\'item item-thumbnail-right product-item\'>\n <img ng-src=\'{{product.images[0]}}\' class=\'product-image\' ion-product-image=\'product\'>\n <h3 class=\'product-title\'>{{product.title}}</h3>\n <p class=\'product-description\'>{{product.description}}</p>\n\n <i class=\'icon ion-plus-round icon-plus-round\' mouse-down-up ng-click=\'addproduct(product)\'></i>\n <span class=\'product-quantity\'>{{product.purchasequantity}}</span>\n <i class=\'icon ion-minus-round icon-minus-round\' mouse-down-up ng-click=\'removeproduct(product)\'></i>\n\n <span class=\'product-price\'>${{product.price}}</span>\n </div>\n </div>\n <div>\n <br><br><br><br>\n </div>\n</div>\n\n<div class=\'empty-cart-div\' ng-if=\'emptyproducts\'>\n <h3 class=\'empty-cart-header\'>your handbag empty!</h3>\n <i class=\'icon ion-bag empty-cart-icon\'></i>\n</div>"); $templatecache.put("checkout-footer.html","<div class=\'title purchase-footer\'>pay</div>"); $templatecache.put("checkout.html","\n<span class=\'checkout-form-description\'>please come in credit card details:</span>\n\n<div class=\'list checkout-form\'>\n <checkout-name ng-if=\'hasnamedir\'></checkout-name>\n <checkout-card></checkout-card>\n <checkout-address ng-if=\'hasaddressdir\'></checkout-address>\n <checkout-email ng-if=\'hasemaildir\'></checkout-email>\n</div>\n\n<h2 class=\'checkout-total\'>total: ${{total}}</h2>\n"); $templatecache.put("gallery-item.html","<div class=\'ion-gallery-content\'>\n <div class=\'card gallery-card\' ng-repeat=\'product in products track $index\'>\n <div class=\'item gallery-item\'>\n <div class=\'gallery-image-div\'>\n <img ng-src=\'{{product.images[0]}}\' class=\'gallery-product-image\'>\n </div>\n <h3 class=\'gallery-product-title\'>{{product.title}}</h3>\n <h3 class=\'gallery-product-price\'>${{product.price}}</h3>\n <div class=\'gallery-product-add\' ng-click=\'addtocart(product)\'>\n <h3 class=\'gallery-product-add-title\' cart-add>{{addtext}}</h3>\n </div>\n </div>\n </div>\n</div>"); $templatecache.put("partials/address-line-one.html","<label class=\'item item-input address-line-one\'>\n <input type=\'text\' ng-model=\'checkout.addresslineone\' placeholder=\'address line 1\'>\n</label>"); $templatecache.put("partials/address-line-two.html","<label class=\'item item-input address-line-two\'>\n <input type=\'text\' ng-model=\'checkout.addresslinetwo\' placeholder=\'address line 2\'>\n</label>"); $templatecache.put("partials/address.html","<div class=\'item item-divider\'>address: </div>\n<address-one-input></address-one-input>\n<address-two-input></address-two-input>\n<city-input></city-input>\n<state-input></state-input>\n<zip-input></zip-input>\n"); }]);

javascript angularjs security