Web Security Shorts SameOrigin Policy SameOrigin Policy Documents

Web Security Shorts Same-Origin Policy

Same-Origin Policy Documents and scripts loaded from one origin can make requests to and process responses only from hosts that have the same origin. ? But, what is an origin exactly?

Origin Three components of the URL used to access a web resource. https: //www. example. com/index. html

Origin Three components of the URL used to access a web resource. https: //www. example. com/index. html 1. Protocol

Origin Three components of the URL used to access a web resource. https: //www. example. com/index. html 1. Protocol 2. Host

Origin Three components of the URL used to access a web resource. https: //www. example. com/index. html (default 443) 1. Protocol 2. Host 3. Port

Same Origin? https: //ciso. uw. edu ● ● ● https: //ciso. uw. edu/education/index. html http: //ciso. uw. edu https: //ciso. uw. edu/risks/xss/index. html https: //new. ciso. uw. edu https: //ciso. uw. edu: 80

Same-Origin Policy Again, documents and scripts loaded from one origin can make requests to and process responses only from hosts that have the same origin. ? Why is this?

Same-Origin Policy Tab 1 Origin: https: //ciso. uw. edu

Same-Origin Policy Tab 1 Origin: https: //ciso. uw. edu Tab 2 Origin: https: //www. bankofamerica. com

Same-Origin Policy We wouldn’t want: ● The UW site to be able to access (and manipulate) the DOM of the Bank of America site, or vice-versa ● The UW site to be able to access the Bank of America’s resources (such as cookies), or vice-versa

Same-Origin Policy Tab 1 https: //ciso. uw. edu Tab 2 https: //www. becu. org

Same-Origin Policy Tab 1 https: //ciso. uw. edu Tab 2 https: //www. becu. org Same Origin Policy DOM JS Context 2 separate DOMs 2 separate JS Contexts

Same-Origin Policy A basic set of rules the browser follows to isolate pages from each other, preventing one page from reading the data of another. ? But, I know my site regularly makes use of resources from other origins (like images, scripts, stylesheets). What gives?

Same-Origin Policy: Cross-Origin Requests Some cross-origin requests are allowed. ● ● Images using <img src=”. . . ”> Java. Script using <script src=”. . . ”> CSS using <link rel=”stylesheet” href=”. . . ”> Anything using <frame> or <iframe> These embedded cross-origin resources are where browsers can be potentially vulnerable to certain attacks (like cross-site request forgery).

Same-Origin Policy: Cross-Origin Requests But, other cross-origin requests are not allowed. ● Requests for resources made by scripts (asynchronous, such as XMLHttp. Request, Fetch, etc. ) ? So I know my site asynchronously accesses an external API for some data. How is this allowed to happen?

Same-Origin Policy: CORS, or Cross-Origin Resource Sharing, is a mechanism that uses additional HTTP response headers (from the server) to permit the browser to make certain cross-origin (such as asynchronous) HTTP requests and treat them as same-origin.

Same-Origin Policy: CORS Primarily, the server must supply an Access-Control. Allow-Origin response header for the resource being requested.

Same-Origin Policy: CORS Allow any origin to access the resource: Access-Control-Allow-Origin: * Allow only a specific origin: Access-Control-Allow-Origin: https: //example. com Allow only specific origins: Access-Control-Allow-Origin: https: //example. com, https: //www. washington. edu, . . .

Same-Origin Policy: Quiz! Tab 1 Origin: https: //ciso. uw. edu DOM and JS context

Same-Origin Policy: Quiz! Tab 1 Origin: https: //ciso. uw. edu DOM and JS context Tab 2 Origin: https: //www. bankofamerica. com DOM and JS context

Same-Origin Policy: Quiz! Can I use Java. Script on the UW page to access the DOM of the Bank of America page? No The browser tabs each represent different origins (with completely separate DOMs and JS contexts). The “barrier” between tabs is created by the browser’s adherence to the same-origin policy.

Same-Origin Policy: Quiz! Can I use an img tag on my UW page to pull in an image from Bank of America and display it on my (UW) page? <img src=”https: //www. bankofamerica. com/assets/logo 1. svg” /> Yes This is an embedded cross-origin resource case in which the same-origin policy allows a cross-origin request.

Same-Origin Policy: Quiz! Can I use a script tag on my UW page to pull in and execute a script from Bank of America? <script src=”https: //www. bankofamerica. com/js/bank. js” /> Yes, another allowed embedded cross-origin request In what document context will the script execute? The UW page (remember: separate origins, separate JS contexts)

Same-Origin Policy: Quiz! Can I use a script on my UW page to asynchronously pull and then make use of some data from a Bank of America API? <script>fetch(‘http: //www. bankofamerica. com/api/data. json’). then(function(resp){console. log(resp)}); </script> Maybe If Bank of America has provided an appropriate (CORS) Access-Control. Allow-Origin response header for this resource, then yes. The header would tell my the browser that its (asynchronous) cross-origin request is allowed.

Summary: Same-Origin Policy Documents and scripts loaded from one origin can make requests to and process responses only from hosts that have the same origin. Each origin represents its own isolated DOM and Java. Script context within your browser. Think: tabs.

Summary: Same-Origin Policy Primary embedded cross-origin requests allowed by sameorigin policy: ● ● Images using <img src=”. . . ”> Java. Script using <script src=”. . . ”> CSS using <link rel=”stylesheet” href=”. . . ”> Anything using <frame> or <iframe>

Summary: Same-Origin Policy Asynchronous cross-origin requests require the server to provide an appropriate Access-Control-Allow-Origin CORS header. Access-Control-Allow-Origin: *

Learn more! Browser Security Front-end Technologies Community of Practice Friday, October 5, 10 -11: 30 a. m. UW Tower Visitor Dining Room https: //depts. washington. edu/frontend/

Resources > MDN: Same-origin Policy: https: //developer. mozilla. org/en-US/docs/Web/Security/Same-origin_policy > MDN: Cross-Origin Resource Sharing (CORS) https: //developer. mozilla. org/en-US/docs/Web/HTTP/CORS > You. Tube: “Same-Origin Policy Basics” https: //youtu. be/j. DE 0 cntj. Oq 8? t=4 m 48 s > You. Tube: “CSRF Introduction and what is the Same-Origin Policy? ” https: //www. youtube. com/watch? v=Ka. Ej_q. Zgi. KY

Upcoming CISO workshops Web App Security 101 Web App Security 102 Securing GPOs Mon, Jan 13, 9 a. m– 12 noon UW Tower Visitors’ Dining Room Thurs, Feb 6, 1– 4 p. m. UW Tower Visitors’ Dining Room Tues, Jan 21, 1– 3 p. m. (And the 3 rd Tues of each month) Contact pgraff@uw. edu Contact ciso@uw. edu with “Secure GPO” in subject line Thinking Like An Attacker Mitigating Common Threats Part 1 (Part 2 coming soon)

Questions? Peter Giles gilesp@uw. edu Pete Graff pgraff@uw. edu Zephyr Mc. Laughlin zephyrmc@uw. edu