Learn what cross-origin resource sharing is and the role it plays in web security in this video.
- [Narrator] When you're building websites that incorporate content from other domains, it's common to encounter errors in the console that refer to CORS. CORS stands for Cross-Origin Resource Sharing, which is the standardize approach on the web for deciding whether a site should have access to resources loaded from a different origin. CORS enables content hosts to specify which origins should have access to which content, as well as the methods that requests from those origins need to use in order to have access. CORS policies are commonly used with APIs as they allow these web services to restrict external origins, only to get requests for instance, and keep other types of HTTP requests like post and delete to the services own interface. CORS is also useful for hosts of resource files such as images and fonts. For instance, if your site hosts licensed fonts and art on your own content delivery network, it would be important to ensure that these resources could be used only by your own origins. Otherwise, anyone on the web could create a request for the files and incorporate them into their own sites, which would violate your licensing terms with the original provider. CORS encompasses several HTTP headers which allow you to specify aspects of request and usage including headers, methods, and credentials. Perhaps the most widely used header and maybe the most misunderstood as well, is access-control-allow-origin, which enables a server to specify which origins or resource may be incorporated into. Although each HTTP request includes information on it's origin, the access-control-allow-origin header is enforced by the browser after a resource has been retrieved from a third party server. If the header exists and does not provide access to the origin of the current document, then the browser refuses to render the resource and logs an error to the console. Browser extensions are available that inject an access-control-allow-origin header into all incoming HTTP responses. These extensions are sometimes used during development by front end developers. However, such extensions open a significant security hole, and you should avoid them, instead relying on appropriate server configuration during development. In addition to protecting hosted resources and account access, CORS also serves an important security role by preventing resources from a sensitive site, such as a bank, from being loaded by another website. This blocks attempts at cross-site scripting and cross-site requests forgery attacks that attempt to simulate the appearance and interface of the target site by loading its assets from a different origin and then tricking unsuspecting users into providing their login credentials to the third party, which can them use them to perform unauthorized HTTP requests that modify the account, such as transferring money from a user's bank account. Installing an access-control-allow-origin browser extension removes an important piece of protection against attacks like this.
- Working with browser security features
- Configuring servers for testing
- Defining an origin
- Cross-site scripting attacks
- Cross-site request forgery attacks
- Working with a received message
- Specifying the allowed message sender origin
- Sharing cookies across subdomains
- Restricting the path of a cookie