Cross Origin Resource Sharing (CORS) Policies

Aref K.
A free video tutorial from Aref K.
Principal Solutions Architect
4.3 instructor rating • 9 courses • 61,161 students

Learn more from the full course

ASP.NET Core Identity and Security (SECOND EDITION)

Develop secure ASP.NET Core applications and protect them against cyber attacks

04:35:48 of on-demand video • Updated January 2020

  • Implementing Sign Up and Sign-in using with E-mail confirmation
  • Implementing Tw-Factor Authentication
  • Authorization with Roles
  • Implementing Claim-based authorization with Policies
  • Adding Facebook Login to Your ASP .NET Core Websites
  • Protect your web application against Cross-Site Scripting Attack (XSS)
  • Protect your web application against Cross-Site Request Forgery Attacks
  • Protect your web application against SQL Injections
  • Define Cross Origin Resource Sharing (CORS) policies
  • Protect your web application against Open Redirect Attacks
  • Web Application Firewalls (WAF) and Cloudflare
English [Auto] OK, the next item that we want to talk about is cross origin resource sharing, or course, this is not a kind of attack. However, if your application uses client side a script such as Jan, which makes Ajax calls, if they try to access resources in your Web application, you may need to define some policies because client side scripts are only allowed to have access to your resources, for example, to your API, to your pages, only if they come from the same origin, not from the same domain, from the same origin. And shortly I will tell you what is an origin. So this is done by browsers. So browsers block the access. If the client side, the script is trying to fetch the data from a website that is not located in the same origin or doesn't permit access to the resources, because these course policies may allow access to cry inside the scripts to fetch the resources that are not on the same origin. The reason that if browsers would allow access to resources that are not located on the same origin is that, for example, imagine a login form. Imagine a credit card for a hacker could have injected a client inside a script like a piece of jewelry script into your page. And then that would then could easily grab your username and password and then posted to say a form, an action that is located on their server. Or they could fetch a credit card, for example, a form that looks like your credit card form and then could replace the elements on the page with the fake form and then they could post the data back to their own servers. So why don't we say that cry inside the script and the resource must be located on the same domain because demesne is only a part of the origin and just matching domains will not be in your schema, must be completely sane. For example, HTP and HTP s are different. Your domain name must match. So for example, my domain dot com and my domain dot com that you are different domain should match and also um the port number should match. So like Port 80 or Port 88 are different. Even w w w dot my domain dot com is different to my domain dot com. So but if you have a page name, for example, my domain dot com slash index wire and my domain dot com slash say demo are the same, they are same origin. So pages are fine. Is just that schema htp an issue to be. S full domain name and ports they should match. So let's go and the studio and I will show you how we can define the course policies. OK, so now I'm in visual studio and I just created an empty, redundant core eraser pages website. This is not NVC. This is Rasor website. I deleted the index page and I added a new index page and I also added a page called Demo. This demo page doesn't do anything other than displaying this is a course demo. It does display a message and doesn't do anything else. And my index XHTML page, what it does is that it has a tiny, tiny Jaiku record at the end, which says anytime the page it gets loaded, just make an Ajax call to demo slash demo and fetch the content, whatever the page returns and then put it in this div type. It's all it does, so it says find the element whose idea is content, which is this div tag, and then said that e-mail. Now I have a copy of the same website published to my local eyes. So if I go to browse EPA at sea, so I have index comes from my index page and this is a course demo is actually the. Demo page, this one, which is loaded using this January. So now if I run this locally, everything should be fine, because my J.A.G. says that get the data from DEMO, which is because we say slash demo and no domain is specified. It gets it from the current website. So it's all good. However, if I. Day that I want. To get the data from this address, which is localhost them all. And I appreciate. In here. And say and refresh the page. But this is, of course, demo is gone. I will click on Inspect and I click on console in here and you will see the error it says failed to load HTP localhost demo no access Dasch control dash allow origin header is present access control dash allow origin is actually a course header that defines the course policy. So your application has to retain that and tell the browser that whether the client side the script has access to a resource or not because HTP localhost the demo is not returning any headers, the browser is rejecting the access and therefore our Ajax is failing. Now how can we grant access to our website? We can do that easily in a way that Natcore, however, you have to bear in mind something that is very important. Your application grants access to clients. So when you defined define the policies, you use the client address, you don't use the server address. So if my query script is located on localhost and import five three seven four two, then you grant access to this address, not to this address that you try to fetch whatever website that is trying to run a client. You use that websites ad. So how do we do this? It's very easy. Everything that you set up happens in the startup that seems so one way of doing that is that. We know that in a startup class, in configure method, what we do is that we basically manage the pipeline, the application pipeline, and then we can insert middleware if we want. So there is a middleware for course. And all you need to do is to say. Dutch, and then we say use caution. And what we do in here is that you can pass on action and then define the policies. So, for example, we can say options such that this is how you read this, such that and then we say options and then we say with origins. And as I said, you have to put the origin of the client, not the Web server itself. And bear in mind that the address that you put in here should not have a trailing forward slash at the end. You have to remove it, otherwise you will get no header and then you are going to pull your hair. And if you want to have multiple origins, you just say, come on. And then you provide another origin. So like say this with a different port. Can have as many as you want. You can also have headers, you can have methods. So, for example, we can say any method or we can say that. So, um, with the methods and then we can say get. And then, for example, we can say with headier or we can say hello any other. And this is a done this is one way of doing it, by doing that, you are defining a global policy for your application. Another approach for doing that is that instead of defining. The policy right where you define the middle, where you can do that, where you define the services, so just where you said your services, it doesn't have to be just before at NBC. However, in Configurability, your app that use course has to be before U.S. embassy because U.S. embassy terminates the application pipeline. So if you put it after U.S. embassy, your use, of course, method is not going to do anything. It has to be before U.S. embassy. However, in configure services, it can be before or after. At the embassy, it doesn't matter. So in here, again, you can say services that are the course. And in here, what you need to do is that you need to provide an action again. So we say options such that let me put a semicolon here and in here you have kind of the same thing so we can say options, DOD, add policy in here and then your policy has to have a name. For example, we can say my policy and then you have the same option. We can say. For example, again, of course, the two with origins and their origin was HTP local enforced fifty three seven four two and then we can say with Method's get and allow any header, for example. So it's basically the same definition as we had here. So if you do that in configures services. When you insert the. Inject the. Poor services in here, in the configured method, you have to change your signature and say, add, use the course and then you have to just give the policy name, for example, my policy. So instead of having the action right in here, you can just say that I want to use this policy because, um, income configure services method. When you use services that at course you can keep adding policies so you can have options at policy and repeat these options at policy. As long as all your policies have unique names, you are fine. But then when you do use course, you can. Pick only one policy to use. So if I deploy this to my server this time, the Ajax query should be able to fetch the data. So if I just published this to localhost. Byeok. OK, so I need to start the website and if I browse. The website works now, I run the website in Visual Studio, and this time we shouldn't get the course had a problem, the error message that we had before. There you go. So this time my Jaiku record managed to get the text from the other website and see there is no error in here. It's all good. And that is because we defined a course policy in startup costs in here, when you define your policy, you are basically defining a global policy. It's going to apply on all get methods. Or if you use all methods, then you are going to apply to all actions with all method. If you want to have specific course policy for specific action in expediting court NBC, you use an attribute called an able course. This website is not an NBC website. So maybe what we do is that we can use the. Personal photos website, the one that we used as a demo website because it's NBC, and I will show you that if you define a policy on every action. That makes sense, you can have enabled, of course, and then you can pass the name of your policy, for example, my policy. If your application doesn't understand any Bellcore. I need to add Microsoft a spin at that course, but if you use this one. But if you use a court to that is already included, so you don't need to worry about adding a new get package, otherwise you need to add, then you get a package of Microsoft, ADP, that Natcore course anyway, if you want to enable course policy as per action in esprit de corps and we see you only use Annabell course attributes so that you can only limited to this method. Otherwise you just do it in a start up method in a way that I just showed you. And that's going to be a global policy.