[Vuejs]-Back-end vs front-end controlled web application

by

0👍

✅

  1. I researched again on csrf and IIUC, XHRs are better against csrf since:

    • modern browsers automatically add origin headers to all XHRs, which blocks all requests from unexpected domains (together with allow-origin config on server-side).

    • And we can do even more by manually adding csrf tokens to js code when rendering pages on server-side (to be sent with requests in XHRs later). The tokens inside js code are impossible for the attacker to acquire. EDIT: this is not unique for single-page apps, I’ve learned that traditional server-rendered sites can do the same by writing the token in a hidden field in a form after reading the Synchronizer token pattern chapter of wikipedia. Rather than <input type="hidden" name="csrftoken" value="..." />, I thought of <script>var csrfToken={{server.token()}}</script> ({{}} is the server side template). The former is used when the form is posted, mine is used when js code sends XHRs. My idea is a mix of the Synchronizer token pattern chapter and its next in the wikipedia page. By these means, if our site is XSS free, the attacker won’t be able to get the token in the session/page/js, and the request he tricks the user’s browser to send will fail without the token.

      Which leads to: modern single-page apps are XHR heavier than traditional web apps, which utilizes full-page server-side render with js-manipulated view changes (with XHRs) on different occasions. And thus, more secure.

  2. 1 request is definitely better than 5, if only for request counts’ sake. Here we make the trade-off: By adding a few traffic to loading the page, we gain:

    • As OP addressed, server interfaces reusable by mobile apps since they return pure data rather than htmls which mix data with webpages.

    • Better separation of concerns for both front and back ends. Backend developer writes smaller single-functionality interfaces. And even better for frontend developer: views, styles, interaction logic scripts (as we can see in .vue files) are all organized in components, fewer things to worry about, happier we can be.

      Therefore I think the trade is totally worth it.

👤JJPandari

Leave a comment