TANGLED Web AND Its SAME ORIGIN POLICY

Same Origin Policy is the Fundamental Security Model of the web, its been very long that I have been struggling aroung SOP and to overcome this struggle, I did some google and went through some books, watched some boring yet fruitful videos and ended up writing this book.

Having a deep understanding of Same Origin Policy model is important specially if you are an Security Analyst. The Same Origin Policy is possibly the most important security control enforced on the web and is also an inconsistently implemented specification which is many of the times explained so vaguely by human minds that it does not make any sense to other Human Minds. In this talk I will try to make it easy to understand and will keep your brains engaged so that it does not turn into an boring lecture. We will learn about Same Origin Policy with DOM, browser tabs, iframes, importance of SOP and how it is applied to web storage, images, CSS, JS, etc. I will also talk about Same Origin Policy exceptions and ways to get around Same Origin Policy with detailed explanation to postMessage API, URI fragment and CORS etc.

Documentation URL - https://talks.pankajmouriya.com/docs/sop/

Transcript

1. TANGLED Web AND Its SAME ORIGIN POLICY - Pankaj Mouriya
2. ABOUT Me null Chandigarh Chapter Lead - 2020 Active Speaker Security Analyst at APPSECCO - Present null - Community Manager - Present
3. WHAT SHOULD BE ALLOWED ? • Should site A be allowed to link to site B? • Should site A be allowed to embed site B? • Should site A be able to embed site B and modify its contents? • Should site A be able to submit a form to site B? • Should site A be able to embed images from site B? • Should site A be able to embed scripts from site B? • Should site A be able to read data from site B?
4. It's important to define Same Origin Policy Two pages having same hostname, schema and port can interact with each other without restrictions Or Two pages from different sources/origin should not be allowed to interfere with each other
5. Why Same Origin Policy Required/Implemented The Browser Handbook • Hospital, patients and their relatives Feross Aboukhadijeh • The Web is an Operating System
6. https://mysite.com:1234/page/mypage.html?user=pankaj#p1 Protocol Hostname Port Path Fragment Query URL URI https://mysite.com:1234/page/mypage.html Protocol Hostname Port URL URI Path What is a URL? Protocol/Scheme Hostname Port
7. HOST PORT Def. - What is an ORIGIN? ORIGIN An origin can be defined as a Tuple made of Scheme, Domain and Port. SCHEME/PROTOCOL
8. LET’s Do a QUIZ
9. Open Quiz URL Outcome Reason http://store.company.com/dir2/other.html Same origin Only the path differs http://store.company.com/dir/inner/another.html Same origin Only the path differs https://store.company.com/page.html Failure Different protocol http://store.company.com:1234/dir/page.html Failure Different port (http:// is port 80 by default) http://news.company.com/dir/page.html Failure Different host http://store.company.com/dir/page.html
10. Web Server Web Server Site A Site B Can Site A access Site B’s data ? Site A Site B
11. Web Server Web Server Site A Site B Can Site A access Site B’s data ? Site A Site B
12. DEMO TIME
13. Same Origin Policy Web Server B Web Server A Site A Site B WebSite A Browser WebSite A JavaScript + DOM JavaScript + DOM
14. Same Origin Policy Web Server B Web Server A Site A Site B WebSite B Browser WebSite A JavaScript + DOM JavaScript + DOM
15. How does SOP works in Browser Tabs WebSite B WebSite C WebSite D WebSite A JavaScript + DOM JavaScript + DOM JavaScript + DOM JavaScript + DOM var bob = window.open(“http://sitec.com”,”right”) window.opener.location.replace(“https://google.com”) Browser Note: When two documents/sites do not have the same origin, JavaScript APIs like window.open and window.opener allow documents to directly refer each other with very limited access to window and location objects - Mozilla
16. DEMO TIME
17. How does SOP applies to anchors? Site A Site B Site A Site B a href=siteb Response Request • Cool thing to notice is when you click on a hyperlink, the response loads in a new context by replacing the originating site with the accessed site • Conclusion any site can link, but can’t read the response in same context • <a href=”http://siteb.com”>
18. How does SOP apply to forms? Site A Site B FORM Site A Site B PO ST R equest Response <form action=”http://siteb.com” method=”POST”> In case of forms also, the response loads in new context. Again any site can POST, but can’t read the response
19. DEMO TIME
20. How does SOP apply to CSS? Site A Site B CSS (Site B) Site A
21. How does SOP apply to JS? Site A Site B Site A JS - Site B One website can include JavaScript from any other website It is a dangerous practice, can lead to various JavaScript based attacks Example: ads, tracking scripts, jquery scripts
22. Same Origin Policy Exceptions It is possible to embed static resources from any other origin - Images(e.g. Linking images from other websites - Scripts(e.g ads, jQuery scripts, cdn) - styleSheet(e.g Google Fonts, Bootstrap css) - E.g., URL - https://getbootstrap.com/docs/5.0/getting-star ted/introduction/
23. How does SOP apply to Web Storage? Local Storage: (Persistent) - Can be shared between windows with Same Origin - Remains even after browser window is closed Session Storage: (Non-Persistent) - Applies to Active window - Destroyed after windows is closed Web Storage follows the same rule of Same Origin Policy. Browser does not allow two different origin to access each other web storage
24. How does SOP apply to Cookies? • Cookies were created before Same Origin Policy and that is why Cookie does not follow Same Origin Policy. Cookies have their own model Set-Cookie: name=value; Domain=.sitea.com; Path=/; Secure; HttpOnly; • Cookie are more specific than Same Origin Policy in context to their Path attribute ◦ Path is ineffective because same origin pages can access each other DOMs • Cookies are less specific than Same Origin Policy ◦ Different origins can mess with each other cookies(e.g. attacker.sitea.com can set cookies for sitea.com)
25. How does SOP works with Iframes Parentsite.com WebSite B WebSite A JavaScript + DOM JavaScript + DOM JavaScript + DOM • Frames are isolated • Each frame has its own separate JavaScript execution environment
26. “Getting Around Same Origin Policy”
27. Getting Around Same Origin Policy XHR with CORS URL Fragment JSONP abuses JavaScript to load data cross-origin, just like a JavaScript include JSONP XMLHTTPRequest is not allowed to send cross origin request without CORS header It is possible to use URL fragments to communicate Cross Origin postMessage API It enables cross origin communication between two different Origins And many others
28. • postMessage ◦ postMessage safely enables cross origin communication between objects, e.g., between a page, pop up, between a page and an iframe. • Same Origin Policy ◦ Frames and windows from different origins can’t communicate postMessage to communicate across windows objects Requirement: You need to have some kind of reference to the other origin with whom you want to talk to. It can be an embedded iframe
29. WebSite B Browser WebSite A JavaScript + DOM JavaScript + DOM postMessage • Sender targetWindow.postMessage("hello other document!", "*"); • Receiver window.addEventListener("message",function(message){console.log(message.data)}); postMessage to communicate across windows objects
30. postMessage API - No one is Perfect ◦ let's assume, store.sitea.com wants to retrieve a username, so it listens for messages from login.sitea.com window.addEventListener(‘message’ event => { setCurrentUser(event.data.name) }) ◦ Store.sitea.com embeds an iframe to login.sitea.com which runs const data = { username: ‘PankajMouriya’ } window.parent.postMessage(data, ‘*’)
31. Store.sitea.com login.sitea.com { username: ‘PankajMouriya’} const data = { username: ‘PankajMouriya’ } window.parent.postMessage(data, ‘*’)
32. Attacker.com login.sitea.com { username: ‘PankajMouriya’} const data = { username: ‘PankajMouriya’ } window.parent.postMessage(data, ‘*’)
33. postMessage API - Validate Destination of message ◦ You can specify the destination origin for which the message is intended to const data = { username: ‘PankajMouriya’ } window.parent.postMessage(data, ‘http://store.sitea.com’)
34. Attacker.com Store.sitea.com login.sitea.com { username: ‘PankajMouriya’} const data = { username: ‘PankajMouriya’ } window.parent.postMessage(data, ‘*’) { username: ‘PankajMouriya’}
35. postMessage API - Validate source of message ◦ If an attacker has a reference to store.sitea.com window(Embedding it in an iframe), attacker can send a message to it to trick it window.addEventListener( ‘message’ event => { if(event.origin !== ‘ http://login.sitea.com ’) return setCurrentUser(event.data.name) }) ◦ store.sitea.com should verify source origin of message
36. WHAT SHOULD BE ALLOWED ? • Should site A be allowed to link to site B? • Should site A be allowed to embed site B? • Should site A be able to embed site B and modify its contents? • Should site A be able to submit a form to site B? • Should site A be able to embed images from site B? • Should site A be able to embed scripts from site B? • Should site A be able to read data from site B?
37. THANKS! Does anyone have any question? Documentation URL - https://talks.pankajmouriya.com/docs/sop/ pankaj@appsecco.com +91 9877184361 pankajmouriya.com Pankajmouriya_