Pankaj Mouriya.
GitHubLinkedIn
Search writing ⌘ K

The Same Origin Policy / Chapter 08 of 14

Same Origin Policy to Images and CSS

Same Origin Policy to Images and CSS in Pankaj Mouriya's Same Origin Policy guide.

All chapters ↘
  1. 01 / Introduction
  2. 02 / What should be Allowed?
  3. 03 / Same Origin Policy
  4. 04 / Access Different Orgins
  5. 05 / Same Origin Policy in Tabs
  6. 06 / Same Origin Policy to Anchors
  7. 07 / Same Origin Policy to Forms
  8. 08 / Same Origin Policy to Images and CSS
  9. 09 / Same Origin Policy to JavaScript
  10. 10 / Same Origin Policy to Web Storage
  11. 11 / Same Origin Policy to Cookies
  12. 12 / Getting Around Same Origin Policy
  13. 13 / postMessage API Implementation and limitations
  14. 14 / References

Website can embed images from any other website over the internet. Interesting thing to notice is, sites can't read the image data from other sites.

CSS#

Same any website can load CSS from any other website. Almost every application use such method these days. But sites can't read the CSS data from other websites

Demo

  1. Open sitea.com
  2. Open Developer console
  3. Type
Code
document.styleSheets
  1. You will notice css rules, media, type and many other things
Same Origin Policy to Images and CSS, figure 1
  1. Now go to inspector tab and change the css URL inside head element to any other sites css.
  2. In my case I have pointed the href URL to siteb css file
Same Origin Policy to Images and CSS, figure 2
  1. You will notice no rules, no media
Same Origin Policy to Images and CSS, figure 3
  1. This way, if there is any sensitive data in css, sitea can not read that data from siteb