A null Pune presentation on HTML5 Security For Beginners

1. HTML 5 Security for beginners.

2. L 101 : Same Origin Policy

3. Agenda: (Lesson 101)
● Same Origin Policy.
● Demos...
● Need for CORS.

4. Same Origin Policy :
“The same-origin policy restricts how a
document or script loaded from one origin can
interact with a resource from another origin.”
- MDN (https://developer.mozilla.org)

5. General Principle:
Origin:
Defined by scheme, host and port of a URL
http://doepud.co.uk/blog/anatomy-of-a-url

6. Eg: http://store.company.com/dir/page.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

7. FYI - IE Exceptions
● Trust Zones:If both domains are in highly trusted zone, then
the same origin limitations are not applied.
● Port : IE doesn't include port into Same Origin component
so http://example.com:80/abc & http://example.com:8080/xyz
are considered from the same origin.
[ Non-standard and not supported in any of other browsers]

8. Same Origin Policy
Changing Origin:
● A page may change its own origin to a suffix of
its current domain.
● But it cannot set its document.domain to
another domain.

9. Demo.

10. Same Origin Policy
Cross-Origin Network Access:
✔ Cross-Origin writes are allowed.
(Examples are links, redirects and form sumissions)
✔ Cross-Origin embedding is allowed.
✗ Cross-Origin reads are not allowed.

11. Same Origin Policy
Cross-Origin Embedding:
● JavaScript with <script src="..."></script>.
● CSS with <link rel="stylesheet" href="...">
● Images with <img>.
● Media files with <video> and <audio>.
● Plug-ins with <object>, <embed> and <applet>.
● Anything with <frame> and <iframe>
* Mitigation : X-Frame-Options header.
Reference : https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

12. How to block cross-origin access :
➢ To prevent cross-origin writes, use a random
token.
➢To prevent cross-origin reads of a resource,
ensure that it is not embeddable.
Reference : https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

13. How to allow cross-Origin access.
CORS
(To be continued...)

14. References.
● https://developer.mozilla.org/
● http://www.w3.org/Security/wiki/Same_Origin_Policy
●http://www.slideshare.net/null0x00/cors-and-insecurity - By
Riyaz Walikar