are you botching the security of your angularjs applications? (devfest 2016)
TRANSCRIPT
@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<script>alert(“Miauw!”)</script></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
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
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
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
[email protected] /in/philippederyck