- Ep-3: Same-Origin Policy
- Key Questions
- What Is The Origin?
- “Remember Me” Login Functionality
- Why We Need SOP
- SOP Definition
- SOP Definition (CONT)
- SOP Edge Cases
- SOP Rules
- SOP Rules: Cross-Origin Embedding Examples
- SOP Rules: Cross-Origin Embedding Examples (CONT.)
- How To Prevent Cross-Origin Writes?
- Synchronizer Token Pattern
- How To Allow Cross-Origin Access?
- Additional Resources
- Error Log
- Knowledge Dependency Tree
- What is the Same-Origin Policy (SOP)?
- What attacks does it prevent?
- How does SOP relate to CORS?
- 80/20 Analysis
- Where did the request originate from?
- If you’re on
google.com’s homepage- For outgoing requests,
google.comis the “origin”
- For outgoing requests,
- What if
google.com’s javascript could make requests to any site on the internet?- How could this be a problem?
- Hint: “Remember Me” login functionality
- How could this be a problem?
- You authenticate to
bank.com bank.comsends an authentication cookie to your browserSet-Cookie: auth=RANDOM_CHARS; Domain=bank.com
- You close your browser
- When you revisit
bank.com, you don’t have to reenter your credentials- Any request to
bank.comwill contain the authentication cookie
- Any request to
- Visit
evil.com - What prevents
evil.com’s javascript from interacting withbank.com?- Same-Origin Policy helps scope
evil.com’s requests toevil.com- One layer of defense
- Same-Origin Policy helps scope
- Restricts how a document or script loaded from one origin (
evil.com) can interact with a resource from another origin (bank.com) - The Same-Origin Policy helps protect sites that use authenticated sessions
- SOP Focus
- Keeping privileged information safe
- Helps prevent unauthorized read access
- Does other items
- Keeping privileged information safe
- Source: MDN
- Browser Url:
http://store.company.com/dir/page.htmlOrigin: <scheme> "://" <hostname> [ ":" <port> ]- Origin:
http://store.company.com - Port: TCP port number on which the server is listening
- If no port is given, fallback to scheme port
- Origin:
- MDN Origin Comparison
| URL | SOP Violation? |
http://store.company.com/dir2/other.html | No |
http://store.company.com/dir/inner/another.html | No |
https://store.company.com/secure.html | Yes (Different scheme) |
http://store.company.com:81/dir/etc.html | Yes (Different port) |
http://news.company.com/dir/other.html | Yes (Different host) |
- What?! I embed
<img>tags that don’t follow the SOP all the time!- These requests are going cross-origin
- Ex:
<img src="http://catphotos.example.com/dir/cat.gif" alt="He so puuurrrdy" height="42" width="42">- Cross-origin writes are typically allowed
- Ex:
POSTform submissions
- Ex:
- Cross-origin embedding is typically allowed
- Examples to come
- Cross-origin reads are typically not allowed
- SOP core functionality
- Preventing unauthorized reads
- SOP core functionality
- Source: MDN
- Javascript
<script src="..."></script>
- CSS
<link rel="stylesheet" href="...">
- Images
<img>
- Media files
<video>,<audio>
- Plug-ins
<object>,<embed>,<applet>
- Source: MDN
- Fonts
@font-face- Some browsers allow cross-origin fonts, others require same-origin fonts
- iframes
<frame>,<iframe>X-Frame-Optionsheader mitigation- Prevent cross-origin embedding
- Source: MDN
- What prevents
evil.comjavascript from submitting a bank transfer tobank.com?- Nothing from the SOP
- If done via form
POST
- If done via form
bank.commust implement a synchronizer token
- Nothing from the SOP
<form action="http://bank.com/transfer" method="post">
<input type="hidden" name="sync_token" value="j/DcoJ2VZvr7vdf8CHKsvjdlDbmiizaOb5B8DMALg6s=" >
<!-- Rest of form -->
</form>- For every state changing action (Ex:
POSTbank transfer)bank.comembeds a uniquesync_token- Unique on every response to the browser
- Before proceeding with action from browser request
bank.comvalidates thesync_token
- How does the SOP interact with this?
evil.comcan’t readsync_tokendue to SOP
- Cross Origin Resource Sharing (CORS)
- Header sent in HTTP Response
- Instructs browser to relax the SOP
- Header sent in HTTP Response