Are you botching the security of your AngularJS application?

@PhilippeDeRyck#Devoxx #AngularSecurity

ARE YOU BOTCHING THE SECURITY OFYOUR ANGULARJSAPPLICATION?

PhilippeDeRyck


IMAGINE AWORLD WITHOUT SECURITY PROBLEMS IN WEB APPLICATIONS …

Whatkindofworldwouldthatbe?


KNOWLEDGE IS THE KEY

Yetsecurityisoftenoverlooked


KNOWLEDGE IS KEY TO BUILDING SECURE APPLICATIONS

• Youdonotneedtobeasecurityexpert• ButyouneedtobeawareofthethreatsintheWeb

• Youwillwanttoapplyfundamentalsecurityprinciples

• Andfinally,youneedtoknowwhentocallasecurityexpert

• Byspreadingknowledge,Iwanttohelpyoubuildsecureapplications• Youwillbeabletoabsorblotsofknowledgeheretoday• Ifyouwantmore,contactmeaboutsecuritytraining

• Variousresourcesavailableonhttps://www.websec.be

• I’malsoachef,sothedemoswillmakeyou(evenmore)hungry!


CROSS-SITE SCRIPTING (XSS)

• AnXSSattackinjectsmaliciouscontentintoyourpages

• Inthe“original”XSSattacks,anattackerinjectedJavaScriptcode• Today,injectedcontentcanbeJavaScript,CSS,HTML,SVG,…


CROSS-SITE SCRIPTING (XSS)

• AnXSSattackinjectsmaliciouscontentintoyourpages

• Inthe“original”XSSattacks,anattackerinjectedJavaScriptcode• Today,injectedcontentcanbeJavaScript,CSS,HTML,SVG,…

• Therealproblemisthatinjectedcontentrunsinyourcontext• Completeaccesstoyourclient-sidedataandcode

• Abilitytouseanypermissionstheuserhasgrantedtoyourapplication

• ThefullpowerofXHRtocontactyourbackend,inthenameoftheuser

• XSSattacksareverypowerful,andunfortunatelyverycommon

• XSSisranked3rd intheOWASPtop10and4th

intheSANStop25


http://colesec.inventedtheinternet.com/beef-the-browser-exploitation-framework-project/


XSSVULNERABILITIES ARE NOT ONLY FOR CHUMPS

https://www.youtube.com/watch?v=K0noqLisW_chttp://motherboard.vice.com/read/tor-project-patches-cross-site-scripting-xss-bug-in-its-website


HOW DO YOU PROTECT AGAINST XSS?

• TherootcauseofXSSisconfusionbetweendataandcode• Browsergetsuntrusteddatamixedwithtrustedcode

• Thereisnowaytoknowwhichpartisdataandwhichiscode

<div><h3>Your search for “<i>Crazy Cats<script>alert(“Miauw!”)</script></i>”returned 5 results

</h3></div>

<div><h3>Your search for “$query” returned $count results

</h3></div>


HOW DO YOU PROTECT AGAINST XSS?

• TherootcauseofXSSisconfusionbetweendataandcode• Browsergetsuntrusteddatamixedwithtrustedcode

• Thereisnowaytoknowwhichpartisdataandwhichiscode

• Theserverneedstorenderthedataharmless

• Byescaping“dangerous”partsinthedata<div><h3>

Your search for “<i>Crazy Cats<script>alert(“Miauw!”)</script></i>

returned 5 results</h3></div>


ESCAPING OUTPUT TO PROTECT AGAINST XSS

• Escapingdangerouspartspreventsdatatobecomecode

• Serverdoesthisbeforesendingpagetothebrowser

• Theescapingprocessiscontext-sensitive• HTMLbody <h1>DATA</h1>

• HTMLattributes <div id=‘DATA’>

• Stylesheetcontext body { background-color: DATA;}

• Scriptcontext alert(“DATA”);• …



AND WHAT ABOUT XSSIN ANGULAR?

• Remembertheconfusionbetweendataandcode?

• TemplatesandJavaScriptcodeareconsideredtheapplication’scode• DatafetchedfromAPIsisconsidereddata

• AngularJSknowswhichpartsareuntrusted• AndautomaticallyappliesStrictContextualEscaping(SCE)• SCEappliestoalldatabindingswithng-bind or{{ }}• SCEison-by-defaultsinceversion1.2

• ButwhatifweactuallywanttoallowHTMLintheuser’sdata?



http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view/25513186#25513186


ALL IS GREAT …UNTIL YOU GET A CALL ONE EVENING

What,noway!Whathappened?Didtheystealourdata?

No,it’sworse!Muchworse!

TheyloadedEmberJS!

We’vebeenhacked!

Thenwhat?!

OH MY GOOOWD


LET’S INVESTIGATE THE STACKOVERFLOW ADVICE …

https://docs.angularjs.org/api/ng/service/$scehttps://docs.angularjs.org/error/$sce/unsafe


LETTING ANGULARJS1.X DO THE WORK FOR YOU

• SimpledatawillbeencodedfortherightcontextwithSCE

• AngularJSwillnotallowyoutodirectlyuseuntrusteddata

• Sanitizinguntrusteddatamakesitsafetouse

• StaticHTMLsnippetscanbemarkedassafeifabsolutelynecessary

<p>{{var}}</p>var = “test<script>alert(1)</script>”

<p ng-bind-html=“var”></p><input ng-model=“var” />

<input ng-model=“var” /> angular.module(“…”, [‘ngSanitize’]<p ng-bind-html=“var”></p>

<p ng-bind-html=“var”></p>var = $sce.trustAsHtml(“<b>test</b>)”


AND IT’S EVEN BETTER IN ANGULARJS2.X

• Alldataissanitizedbydefault

• StaticHTMLcanbemarkedsafeifabsolutelynecessary

<input ng-model=“var” /> <p>{{var}}</p>

<p>{{var}}</p>var = domSanitizer.bypassSecurityTrustHtml(“<b>test</b>)”)


http://stackoverflow.com/a/25513186


RULE#1

DO NOT MARK UNTRUSTED DATA AS SAFE

Usethebuilt-insanitizertoremovedangerousfeaturesfromtheuntrusteddata


MIXING ANGULARJS WITH TRADITIONAL APPLICATIONS

• AngularJSisoftenusedwithintraditionalapplications• TheserverbuildsanHTMLpage,usinguntrusteddata

• AngularJSisusedtosimplifyUIdevelopment

<script src=“…/angular.js”></script>…<div><h3>

Your search for “<i>encode($query)</i>” returned {{nbOfResults}} results

</h3></div>


MIXING ANGULARJSWITH TRADITIONAL APPLICATIONS

• TheserverwillneedtoprotectagainstXSSattacks• ButisthatevenpossibleinanAngularJSenvironment?

<div class=”ng-app”>{{constructor.constructor(‘alert(1)’)}}

</div>

<div class="ng-app"><b class="ng-style: {x:constructor.constructor('alert(1)')()};" />

</div>

Herekittykittykitty…

x: y


MIXING ANGULARJSWITH TRADITIONAL APPLICATIONS

• TheserverwillneedtoprotectagainstXSSattacks• ButisthatevenpossibleinanAngularJSenvironment?

• AngularJStrieditwiththeexpressionsandbox• PreventsdirectaccesstoglobalJavaScriptfunctionality• Impossibletogetright,soonlyavailableinAngularJS1.2- 1.5.8

• Angular2offersofflinetemplatecompilation


RULE#2

DO NOT COMBINE TEMPLATES WITH USER-SUPPLIED DATA ON THE SERVER

Providethedataseparatelytotheclient-sideAngularJSapplication


BUT WHAT IF AN XSSATTACK HAPPENS ANYWAY?


SO WHAT IF XSSHAPPENS ANYWAY?

• ShieldyourselfbydeployingContentSecurityPolicy• CSPactsasasecondlevelofdefenseagainstXSSattacks• XSSattackswillbeseverelyconstrainedorevenblocked

• CSPlocksdownwhatcanhappeninawebpage• Refusestoexecuteinlinescriptandstyle• Onlyloadsexternalresourcesifexplicitlyallowed

• CSPseemsscary,butisactuallyawesome


THE NUTS AND BOLTS OF CSP

• CSPisaserver-drivenbrowser-enforcedpolicy• ServerprovidesaCSPpolicyinaheaderormeta tag

• BrowserenforcestheCSPpolicyonthepageContent-Security-Policy:

default-src 'self';

script-src 'self' https://code.jquery.com/jquery-3.1.1.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js;

img-src data:;

style-src 'self' https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css;

font-src 'self' https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/


AQUICK OVERVIEW OF CSP’S DIRECTIVES

• CSPhasdirectivesforallkindsofresources• default-src appliestoanyresource,ifthere’snomorespecific directive• img-src,script-src,style-src,…

• Adirectivecanhavenumerousvalidvalues

• Keywords:‘none’,‘self’,*• Expressions:https://websec.be,https:,https://websec.be/jquery.js,*.websec.be

• CSPhassomeincompatibilitieswithtraditionalwebapps

• ButiseasytodeployonanAngularJSapplication


BROWSER SUPPORT FOR CSPLEVEL 1IS AWESOME

http://caniuse.com/#search=csp


FOLLOWING UP ON CSPVIOLATIONS

• CSPincludesareportingfeature• Thebrowserautomaticallysendsareportwhenaviolationoccurs

{ "csp-report": { "document-uri": "https://www.websec.be/blog/cspfromscratch/", "violated-directive": "script-src 'self' https://…", "effective-directive": "script-src", "original-policy": "default-src 'self’…", "blocked-uri": "eval", "line-number": 1, column-number": 1609, "source-file": "https://a.disquscdn.com", "status-code": 0 } }


FOLLOWING UP ON CSPVIOLATIONS

• CSPincludesareportingfeature• Thebrowserautomaticallysendsareportwhenaviolationoccurs

• CSPcanbeenabledinreport-onlymode

• Policyviolationswillnotbeblocked,butareportissent• Perfectfordry-runningyourpolicybeforedeploying

• Collectingreportsisstraightforward,butalsoabittricky• report-uri.io willgetyoustarted

https://report-uri.io/


WRITING SANE CSPPOLICIES

• DeployCSPusingtheContent-Security-Policy responseheader• meta tagsareagoodalternativeifheadersaretoodifficulttouse

•Makeyourpolicyassecureaspossible

• Avoid‘unsafe-inline’and‘unsafe-eval’,especiallyforscripts• Specifyresourcesuptothefileleveltoavoidbypassattacks• Defineallimportantdirectivestoavoidoverrideattackswithmeta tags

• UseGoogle’sCSPEvaluatortocheckyourpolicyhttps://csp-evaluator.withgoogle.com/


WRITING SANE CSPPOLICIES

https://csp-evaluator.withgoogle.com/


RULE#3

LEVERAGE THE TREMENDOUS POWER OF CSP

Makesureyourappsarecompatible,andlockdownyourCSPpolicy


Security


SO FAR,WE ONLY TALKED ABOUT XSS

• Butthere’salotmoretobuildingasecureapplication

• Thewebhasevolvedalotinthelastfewyears• Plentyofnewthreats,butalsoplentyofnewsecuritytechnologies

• FundamentalsforbuildingsecureAngularJSapplications

• DeployyourapplicationsoverHTTPS• Usestrongauthenticationmechanisms

• Performaccesscontrolintherightplaces,withtherightdata

• Protectagainstcommonthreatsagainstsessionmanagement


SECURE SESSION MANAGEMENT IS CRITICAL

websec.be

anysite.io

Visitwebpage

Welcomepage

LoginasPhilippeWelcomePhilippe

Visitwebpage

Welcomepage

LoginasPhilippeWelcomePhilippe

SID=1234

1234:

auth:false

1234:

auth:true

user:Philippe

Session={

auth:false

}

Session={

auth:true

user:Philippe

}


THE UNDERESTIMATED THREAT OF CSRF

websec.be

anysite.io

loginasPhilippeWelcomepage

Showmessages

Latestmessages

Showobligatorycatpics

Kittensfromhell


CSRFIN THE REAL WORLD

Ebay.com

Resetpassword

OK,wewillgiveyouacall

Changetelephonenumber

Surething,Philippe

http://news.softpedia.com/news/CSRF-Vulnerability-in-eBay-Allows-Hackers-to-Hijack-User-Accounts-Video-383316.shtml

Resetpasswordwithsecretcode

Alldone


TRADITIONAL CSRFDEFENSES ARE CRUMBLINGwebsec.be

anysite.io


Postmessage

Surething,Philippe


Kittensfromhell

<form … ><input type=“hidden” name=“csrftoken” value”1234abc” />...

</form>


TRANSPARENT CSRFTOKENS WORK WITHOUT FORMSwebsec.be

anysite.io

loginasPhilippeWelcome,Philippe

Postmessage

Surething,Philippe


Kittensfromhell

POST …Cookie: SID=123, XSRF-TOKEN=abcX-XSRF-TOKEN: abc


ANGULARJSSUPPORTS TRANSPARENT TOKENS BY DEFAULT


WHY DON’T WE JUST FIX COOKIES?websec.be

anysite.io


Postmessage

Surething,Philippe


Kittensfromhell

Set-Cookie: SSID=1234; SameSite=Strict

https://tools.ietf.org/html/draft-west-first-party-cookies-07


AND WHAT IF IATTACH A TOKEN IN A HEADER?websec.be

anysite.io

loginasPhilippeHi,here’satoken

Postmessage

Surething,Philippe


Kittensfromhell

Authorization: Bearer eyJhbGciO…


RULE#4

USE CSRFDEFENSES TO PREVENT UNINTENTIONAL REQUESTS

AngularJShasyourback,ifyouenableCSRFtokensonthebackend


KNOWLEDGE IS THE KEY TO SECURITY

#3 LEVERAGE THE TREMENDOUS POWER OF CSP

#2 DO NOT COMBINE TEMPLATES WITH USER-SUPPLIED DATA

#1 NEVER EVER MARK UNTRUSTED DATA AS SAFE

#0 TELL ALL YOUR FRIENDS ABOUT THESE RULES!

#4 USE CSRFDEFENSES TO PREVENT UNINTENTIONAL REQUESTS


MORE KNOWLEDGE,BETTER SECURITY

/in/philippederyck @PhilippeDeRyck [email protected]

https://www.websec.be

Wanttostayinformed?Subscribetoourmailinglist!

Technology

Are you botching the security of your AngularJS application?