Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TANGLED Web AND Its SAME ORIGIN POLICY

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/

Pankaj Mouriya

May 12, 2021
Tweet

Other Decks in Education

Transcript

  1. TANGLED Web AND Its SAME ORIGIN
    POLICY
    - Pankaj Mouriya

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  8. LET’s Do a
    QUIZ

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. “Getting Around
    Same Origin Policy”

    View full-size slide

  24. 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 full-size slide

  25. ● 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. THANKS!
    Does anyone have any question?
    Documentation URL - https://talks.pankajmouriya.com/docs/sop/
    [email protected]
    +91 9877184361
    pankajmouriya.com
    Pankajmouriya_

    View full-size slide