Софтуерно Инженерство
Loading...
+ Нов въпрос
arsoman avatar arsoman 419 Точки

Тотална замяна на сървърни езици с JS и Angular?

Здравейте, колеги! Колкото повече уча JS, толкова повече ми допада /странно за мен/, особено с Angular framework! Изниква обаче въпроса, това SPA тотално ли заменя сървърни езици като РНР например, където сигурността е много добра, самия код е скрит, а както знаем, кода на JS се вижда и примерно всеки отворил сайта ни, вижда примерно на Parse.com ключовете за достъп до Rest и Apllication key. Не знам доколко това е пробив в сигурността, затова поставям въпроса: не са ли JS приложенията и SPA доста доста по-уязвими, отколкото стандартен "премигващ" сайт и не е ли той за предпочитане с оглед сигурността за сметка на бързината? Малко ми е странно логване на потребител без презареждане и малко ми се губи нотката на security в цялото приложение. Реално всеки потребител може да ни види логиката и да търси, съответно намери доста по-бързо и лесно пробив в приложението. Все едно е администратор на сървъра, където се хоства приложението....

2
JavaScript Applications
RoYaL avatar RoYaL SoftUni Team Trainer 6846 Точки

Ами, напротив.

Ето защо смятам за грешка преподаването на този Parse.com. Хората си мислят, че има писане на логика в SPA фронт енда.

В клиентското SPA приложение нямаш бизнес логика. Имаш само презентационна такава. Ако получиш еди какъв си респонс от сървъра, кой темплейт да лоуднеш и т.н. Това, което замества SPA фронт енд-а са View-тата примерно в едно ASP.NET MVC приложение или приложение написано, например, на Laravel. Останалата сървърна част на ASP.NET/PHP си остава.

Представи си следното стандартно (MVC?) приложение (написано на РНР и HTML);

mysite.com/users/authenticate (минава през controllers/users.php -> public function authenticate(); и лоудва views/users/authenticate.html):

view:

<?php if (!isset($_SESSION['isLogged'])) : ?>

<form method="POST">

    <input type="text" name="user" />

    <input type="password" name="pass" />

    <input type="submit" />

</form>

<?php else: ?>

<p> Welcome <?= $_SESSION['username']; ?> </p>

<?php endif; ?>

 

controller:

public function authenticate() {

     if ($_POST['username'] == 'Ivan' && $_POST['password'] == 'myPass') {

         $_SESSION['isLogged'] = 1;

         $_SESSION['user_id'] = 100;

         $_SESSION['username'] = 'Ivan';

     }

}

 

Страницата се презарежда при събмит, активира се authenticate() метода, проверява дали юзъра и пасса съществуват в базата чрез модела (в случая хардкоднати на Ivan/myPass) и създава сесия за този потребител. С if/else конструкция в HTML-а се появява формата за логин, ако не си логнат, или ако си логнат, ти пише "Welcome Ivan".

В един SPA апликейшън нещата ще са горе долу същите. Контролера обаче ще запише сесията в базата данни (токена, ид-то...) и ще го върне като json response за да може клиента да показва на сървъра, че потребителят е логнат. Това е наложащо само когато клиентското приложение и сървърнато са на различни сървъри. Ако са на един сървър може да действа ТОЧНО като в примера по-горе.

Submit бутона се заменя с нормален бутон. Закача му се event handler който при клик прави AJAX POST към контролера и... магията е готова. При успешно върнат токен от контролера без да се презарежда страницата се зачиства логин формата и се лоудва параграф с Welcome и името на потребителя. Цялата ти логика отново остава скрита в бекенда. Единствената клиентска логика, която потенциален хакер може да види е, че в темплейта пише "if(успешен респонс) скрий формата и покажи Welcome", което не е sensitive информация.

 

7
arsoman avatar arsoman 419 Точки

Супер-яко обяснение! Тоест искаш да кажеш, че контролера не се вижда, а само html-a, който проверява какво за хвърли на екрана? Това все още ми е тъмно и се надявам съвсем скоро да си го изясня, иначе за РНР и Ларавел това съм го ползвал и е както казваш, но тук ми е твърде различно и остава впечатление, че е доста несигурно, щото нали JS и клиентска технология и кода му е видим по принцип. Благодаря, ще поразровя да видя кое се вижда в заредената страница и кое не...

0
RoYaL avatar RoYaL SoftUni Team Trainer 6846 Точки

Това, което ти се губи в цялата картинка е, че нямаш само клиентска логика. Задължително имаш някакъв бекенд, който е писан на сървърен език като C#, PHP, NodeJS, Ruby, etc..

3
ifch0o1 avatar ifch0o1 3 Точки

Не се губи сигурността. Както RoYaL каза, ти отново се свързваш към сръвъра за да индифицираш клиента. Това което примерно Angular прави е да прашта заявки за малки части (като темплейти, json или някъкъв вид данни) към сървъра. Сървара (който не е видим за клиента) проверява клиента, и връща данните ако клиента има достъп до тях.

Client-side routing-а (за пример този който Angular предосравя) ти показва смяна на URL-а в адрес бара, но това го прави самият Angular и не е зависимо от сървъра.

NodeJS отново използва Javascript, но тои е сръвърна технология, и Javascript-a в него не е видим за клиента.

2
n.velchev95 avatar n.velchev95 78 Точки

Аз само като леко допълнение да вметна че реалната благинка която ди дават REST api-тата не е единствено за SPA странички. Реално ти имаш един сървър някъде написан на php/c# и тн... а чрез тези api-та може да реализираш както SPA приложение така и да ги използваш и в мобилно приложение написано на Unity, Phonegap и други платформи а един ден когато решиш че ще интегрираш въпросното приложение да речем при смарт телевизорите ще използваш api-тата на следващата платформа на която си решил.

Да вметна и друго - подкрепям мнението на Иван за Parse.com че използването му на този етап е грешно защото хората остават с впечатлението че логиката стои в самия SPA App и се получава объркване ..

3
AleksandurSeferinkin avatar AleksandurSeferinkin 335 Точки

И аз да добавя нещо: Идеята на SPA е да спести някои процедури на сървъра, които биха могли да бъдат извършени при клиента. При обикновените приложения, сървъра приема заявки, обработва ги.... обработва html-а и ти го връща готов. Някога някой си е задал въпроса - "защо сървъра да прави тези неща за всеки един клиент, след като всеки клиент може да си ги прави сам за себе си?"... и се е стигнало до едно уникално решение - SPA.

В крайна сметка това много намаля трафика и разходите на сървъра. При обикновено приложение, когато направиш заявка, получаваш същия html, css и js отново и отново... браузъра ги прочита и render-ва отново и отново... При SPA нещата стоят другояче. Веднъж си получил html, css и js и вече знаеш какво да правиш с тях. Единственото ново нещо, което сървъра може да ти предложи, е един прост json, или xml или ... текст, който ти обработваш в клиентския браузър и променяш съдържанието. За да ти се смени текст-а в един <div>, не ти трябва да презареждаш всичко наново, а само сървъра да ти каже "това е новият текст, сам си го смени - няма да ти повтарям като папагал и да ти пращам едни и същи файлове всеки път (веднъж ти ги пратих, стига толкова), нито пък да си хабя енергията и да обработвам това, което ти сам можеш да си го обработиш". 

0
29/12/2014 14:36:36
arsoman avatar arsoman 419 Точки

Да, ползата е очевидна и голяма наистина! Аз съм приятно изненадан от новия подход за мен...Наистина спестява доста трафик в пъти повече, сайта става много по-бърз и приятен, но пък странно се пише, все пак нова технология, но ще се учи. Значи наистина както казват колегите съм се заблудил с parse.com, като стигнем сървърната част, ще ми се изясни явно. Благодаря на всички за отличните и обосновани отговори!

1
AleksandurSeferinkin avatar AleksandurSeferinkin 335 Точки

Предвид интереса ти - прочети наоколо за NodeJs и съм обеден, че ще направиш платформо-независимо уеб приложение, от което ще останеш доволен. :))) Не е трудно, а приятно и интересно. Не знам дали са ви споменавали сайтове с туториали, но аз бих ти препоръчал да погледнеш тук и тук, също така тук! Потготви се предварително. :P

PS: MEAN (stack): M -> MongoDB, E -> Express.js, A: Angular.js, N -> Node.js

1
arsoman avatar arsoman 419 Точки

Благодаря, скоро няма да стане, но като привършим лятото ще опитам!

0