The same-origin policy is not required for many resources that may be embedded in cross-origin. The sharing of specific file types is limited by file type headers and ensuring that the file extensions and file meta data match the expected type.
The following information box displays scenarios where DOM elements are allowed for cross-origin sharing:
Note
Images with the <img> tag, as long as the file type matches expected image formats.
Media files with the <video> and <audio> tags as long as the file type matches expected media formats.
JavaScript with the <script src="..."></script> tag. This method is used by many third-party applications, which embed a script to act upon the local resources, for example, a social media sharing service that analyzes the shareable images and other assets on current page and reads the URI.
CSS with the <link rel="stylesheet" href="..."> tag. Cross-origin CSS requires a correct content-type header. Client.
Plugins with the <applet>, <object> and <embed> tags.
Fonts with @font-face. Support for this method varies by client browser.
Any content or URI loaded with the <frame> and <iframe> tags.
The ability of WebSockets to bypass the same-origin policy is seen as a security risk. Using WebSockets on a gateway/server that supports origin-based security provides header-based security similar to CORS.
JavaScript APIs, such as iframe.contentWindow, window.parent, window.open, and window.opener, provide limited cross-origin access to the Window and Location objects. Some browsers permit access to more properties than the specification allows. You can use window.postMessage instead to communicate between documents in separate windows.