@PhilippeDeRyck

ARE YOU BOTCHING THE SECURITYOF YOUR ANGULARJSAPPLICATIONS?

PhilippeDeRyckDevFest 2016,Brussels,Belgium

https://www.websec.be

@PhilippeDeRyck

WHAT IS THE BIGGEST THREAT TO AN ANGULARJSAPPLICATION?

DEVELOPERS (THAT ARE NOT SECURITY-AWARE)

@PhilippeDeRyck

KNOWLEDGE IS KEY TO BUILDING SECURE APPLICATIONS

§Mygoalistohelpyoubuildsecurewebapplications− In-housetrainingprogramsatvariouscompanies−HostedwebsecuritytrainingcoursesatDistriNet (KULeuven)− Talksatvariousdeveloperconferences− Slides,videosandblogpostsonhttps://www.websec.be

§ Ihaveabroadsecurityexpertise,withafocusonWebSecurity−PhDinclient-sidewebsecurity−MainauthorofthePrimeronclient-sidewebsecurity−PartoftheorganizingcommitteeoftheSecAppDev course

§ I’malsoachef,sodemo’swillbefood-related!

@PhilippeDeRyck

CROSS-SITE SCRIPTING (XSS)

§ InanXSSattack,maliciouscontentisinjectedintoyourapplication’spages− Inthe“original”XSSattacks,anattackerinjectedJavaScriptcode− Today,injectedcontentcanbeJavaScript,CSS,HTML,SVG,…

@PhilippeDeRyck

CROSS-SITE SCRIPTING (XSS)

§ InanXSSattack,maliciouscontentisinjectedintoyourapplication’spages− Inthe“original”XSSattacks,anattackerinjectedJavaScriptcode− Today,injectedcontentcanbeJavaScript,CSS,HTML,SVG,…

https://www.youtube.com/watch?v=K0noqLisW_c

@PhilippeDeRyck

CROSS-SITE SCRIPTING (XSS)

§ InanXSSattack,maliciouscontentisinjectedintoyourapplication’spages− Inthe“original”XSSattacks,anattackerinjectedJavaScriptcode− Today,injectedcontentcanbeJavaScript,CSS,HTML,SVG,…

§ Therealproblemisthatinjectedcontentrunsinyourcontext−Completeaccesstoyourclient-sidedataandcode−Abilitytouseanypermissionstheuserhasgrantedtoyourapplication− ThefullpowerofXHRtocontactyourbackend,inthenameoftheuser

§ XSSattacksareverypowerful,andunfortunatelyverycommon−XSSisranked3rd intheOWASPtop10and4th intheSANStop25

@PhilippeDeRyck

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

@PhilippeDeRyck

HOW DO YOU PROTECT AGAINST XSS?

§ TherootcausebehindXSSisconfusionbetweendataandcode−Untrusteddataismixedwithtrustedcode,andsenttothebrowser− Thebrowserwillneverknowwhichpartisdataandwhichiscode

<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>

@PhilippeDeRyck

HOW DO YOU PROTECT AGAINST XSS?

§ TherootcausebehindXSSisconfusionbetweendataandcode−Untrusteddataismixedwithtrustedcode,andsenttothebrowser− Thebrowserwillneverknowwhichpartisdataandwhichiscode

§ Theserverneedstorenderthedataharmless−Byescaping“dangerous”partsinthedata

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

</h3></div>

@PhilippeDeRyck

HOW DO YOU PROTECT AGAINST XSS?

§ TherootcausebehindXSSisconfusionbetweendataandcode−Untrusteddataismixedwithtrustedcode,andsenttothebrowser− Thebrowserwillneverknowwhichpartisdataandwhichiscode

§ Theserverneedstorenderthedataharmless−Byescaping“dangerous”partsinthedata

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

</h3></div>

@PhilippeDeRyck

HOW DO YOU PROTECT AGAINST XSS?

§ TherootcausebehindXSSisconfusionbetweendataandcode−Untrusteddataismixedwithtrustedcode,andsenttothebrowser− Thebrowserwillneverknowwhichpartisdataandwhichiscode

§ Theserverneedstorenderthedataharmless−Byescaping“dangerous”partsinthedata

§ Theescapingprocessiscontext-sensitive−HTMLbody <h1>DATA</h1>−HTMLattributes <div id=‘DATA’>− Stylesheetcontext body { background-color: DATA;}− Scriptcontext alert(“DATA”);

@PhilippeDeRyck

SO,WHAT’S THE DEAL WITH ANGULARJS?

§ AngularJSisoftenusedasalibrarywithintraditionalapplications− TheserverbuildsanHTMLpage,includingAngularJStemplates− Theserverneedstorenderuser-supplieddataharmlesstoprotectagainstXSS

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

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

</h3></div>

@PhilippeDeRyck

SO,WHAT’S THE DEAL WITH ANGULARJS?

§ AngularJSisoftenusedasalibrarywithintraditionalapplications− TheserverbuildsanHTMLpage,includingAngularJStemplates− Theserverneedstorenderuser-supplieddataharmlesstoprotectagainstXSS

§ ButisthatevenpossibleinanAngularJSenvironment?

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

</div>

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

</div>

@PhilippeDeRyck

SO,WHAT’S THE DEAL WITH ANGULARJS?

§ AngularJSisoftenusedasalibrarywithintraditionalapplications− TheserverbuildsanHTMLpage,includingAngularJStemplates− Theserverneedstorenderuser-supplieddataharmlesstoprotectagainstXSS

§ ButisthatevenpossibleinanAngularJSenvironment?−No

§ AngularJSattemptedtopreventthiswiththeexpressionsandbox−PreventsdirectaccesstoglobalJavaScriptfunctionality− Impossibletolockdowncompletely,soonlyavailableinAngularJS1.2- 1.6−Angular2offersofflinetemplatecompilation

@PhilippeDeRyck

RULE#1

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

Providethedataseparatelytotheclient-sideAngularJSapplication

@PhilippeDeRyck

AND WHAT IF WE DO IT THE ANGULAR WAY?

§ Remembertheconfusionbetweendataandcode?− TemplatesandJavaScriptcodeareconsideredtheapplication’scode−DatafetchedfromAPIsisconsidereddata

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

§ ButwhatifweactuallywanttoallowsomeHTMLintheuser’sdata?

@PhilippeDeRyck

@PhilippeDeRyck

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

@PhilippeDeRyck

ALL IS GREAT …UNTIL YOU GET A CALL ONE EVENING

What,noway!Whathappened?Didtheystealourdata?

No,it’sworse!Muchworse!

TheyloadedtheEmberJSlibrary!

We’vebeenhacked!

Thenwhat?!

@PhilippeDeRyck

LET’S INVESTIGATE THE STACKOVERFLOW ADVICE …

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

@PhilippeDeRyck

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>)”

@PhilippeDeRyck

AND IT’S EVEN BETTER IN ANGULARJS2.X

§ Alldataissanitizedbydefault

§ StaticHTMLsnippetscanbemarkedassafeifabsolutelynecessary

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

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

@PhilippeDeRyck

http://stackoverflow.com/a/25513186

@PhilippeDeRyck

RULE#2

DO NOT MARK UNTRUSTED DATA AS SAFE

Usethebuilt-insanitizertoremovedangerousfeaturesfromtheuntrusteddata

@PhilippeDeRyck

XSSVULNERABILITIES WILL POP UP EVENTUALLY

§ YoucandeployasecondlineofdefensewithContentSecurityPolicy− Server-drivenbrowser-enforcedsecuritypolicy− IncasethereisanXSSattack,thescriptwillbeseverelyconstrainedorevenblocked−CSPevolvedtoanextensiveandpowerfulbrowsersecuritypolicy

§ CSPlocksdownwhatcanhappeninawebpage−Refusestoexecuteinlinescriptandstyle−Onlyloadsexternalresourcesiftheyareexplicitlywhitelisted

§ CSPhassevereincompatibilityproblemswithtraditionalwebapplications−ButiseasytodeployonanAngularJSapplication

@PhilippeDeRyck

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

§ Ifabsolutelynecessary,youcanre-enableinlinescripts,stylesandeval−Byaddingthe‘unsafe-inline’or‘unsafe-eval’keywordstothedirectives

@PhilippeDeRyck

BROWSER SUPPORT FOR CSPLEVEL 1IS AWESOME

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

@PhilippeDeRyck

WRITING SANE CSPPOLICIES

§ DeployCSPusingtheContent-Security-Policy responseheader− <meta> tagsareagoodalternativeifheadersaretoodifficulttouse

§Makeyourpolicyassecureaspossible−Avoid‘unsafe-inline’and‘unsafe-eval’,especiallyforscripts−Bespecificaboutwhichfilesyouwanttoincludetoavoidbypassattacks−Defineallimportantdirectivestoavoidoverrideattackswith<meta> tags

§Useavailabletoolsandfeaturestomakeyourlifeeasier−Google’sCSPEvaluator−Report-uri.io forpolicygeneration&reportcollection

https://csp-evaluator.withgoogle.com/https://report-uri.io/

@PhilippeDeRyck

RULE#3

DO NOT IGNORE THE TREMENDOUS POWER OF CSP

Makesureyourappsarecompatible,andlockdownyourCSPpolicy

@PhilippeDeRyck

THE FOCUS HERE TODAY WAS PURELY ON ANGULARJS

§ Butthere’salotmoretobuildingasecureapplication− Thewebhasevolvedalotinthelastfewyears−Plentyofnewthreats,butalsoplentyofnewsecuritytechnologies

§ EssentialsecurityprinciplestoapplytoyourAngularJSapplications−DeployyourapplicationsoverHTTPS−Usestrongauthenticationmechanisms−Performaccesscontrolintherightplaces,withtherightdata−Protectagainstcommonthreatsagainstsessionmanagement

@PhilippeDeRyck

ADDITIONAL INFORMATION

§ I’mrunninga2-daywebsecuritycourseonDecember6and7− Informationandregistrationonhttps://essentials.websec.be

§ https://www.websec.be containsalotofinformationaboutwebsecurity− Theslidesforthistalkwillbeavailablethere− Slidedecks,videosandblogpostsaboutvarioussecuritytopics− Subscribetothemailinglisttostayuptodate

§ Feelfreetocontactmewithfeedback,questions,orspeakinginvitations

philippe.deryck@cs.kuleuven.be /in/philippederyck

@PhilippeDeRyck

THE RULES OF ANGULARJSSECURITY

#3 DO NOT IGNORE THE TREMENDOUS POWER OF CSP

#2 DO NOT MARK UNTRUSTED DATA AS SAFE

#1 DO NOT COMBINE TEMPLATES WITH USER-SUPPLIED DATA

#0 YOU TELL ALL YOUR FRIENDS ABOUT THESE RULES!