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
   

   View Slide

2. ABOUT Me
   null Chandigarh
   Chapter Lead - 2020
   Active Speaker
   Security Analyst at
   APPSECCO - Present
   null - Community Manager
   - Present
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

5. Why Same Origin Policy Required/Implemented
   The Browser
   Handbook
   ● Hospital, patients and
   their relatives
   Feross
   Aboukhadijeh
   ● The Web is an Operating
   System
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. LET’s Do a
   QUIZ
   

   View Slide

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
   

   View Slide

10. Web Server
    Web Server
    Site A
    Site B
    Can Site A
    access Site
    B’s data ?
    Site A
    Site B
    

    View Slide

11. Web Server
    Web Server
    Site A
    Site B
    Can Site A
    access Site
    B’s data ?
    Site A
    Site B
    

    View Slide

12. DEMO TIME
    

    View Slide

13. Same Origin Policy
    Web Server B
    Web Server A
    Site A Site B
    WebSite A
    Browser
    WebSite A
    JavaScript
    + DOM
    JavaScript
    + DOM
    

    View Slide

14. Same Origin Policy
    Web Server B
    Web Server A
    Site A Site B
    WebSite B
    Browser
    WebSite A
    JavaScript
    + DOM
    JavaScript
    + DOM
    

    View Slide

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
    

    View Slide

16. DEMO TIME
    

    View Slide

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
    ●
    

    View Slide

18. How does SOP apply to forms?
    Site A Site B
    FORM
    Site A Site B
    PO
    ST
    R
    equest
    Response
    method=”POST”>
    In case of forms also, the
    response loads in new context.
    Again any site can POST, but
    can’t read the response
    

    View Slide

19. DEMO TIME
    

    View Slide

20. How does SOP apply to CSS?
    Site A Site B
    CSS (Site B)
    Site A
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

26. “Getting Around
    Same Origin Policy”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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, ‘*’)
    

    View Slide

31. Store.sitea.com
    login.sitea.com
    { username: ‘PankajMouriya’}
    const data = { username: ‘PankajMouriya’ }
    window.parent.postMessage(data, ‘*’)
    

    View Slide

32. Attacker.com
    login.sitea.com
    { username: ‘PankajMouriya’}
    const data = { username: ‘PankajMouriya’ }
    window.parent.postMessage(data, ‘*’)
    

    View Slide

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’)
    

    View Slide

34. Attacker.com
    Store.sitea.com
    login.sitea.com
    { username: ‘PankajMouriya’}
    const data = { username: ‘PankajMouriya’ }
    window.parent.postMessage(data, ‘*’)
    { username: ‘PankajMouriya’}
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

37. THANKS!
    Does anyone have any question?
    Documentation URL - https://talks.pankajmouriya.com/docs/sop/
    pankaj@appsecco.com
    +91 9877184361
    pankajmouriya.com
    Pankajmouriya_
    

    View Slide