{"id":1554,"date":"2013-07-02T23:30:17","date_gmt":"2013-07-02T23:30:17","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2013\/07\/02\/manage-cors-policy-dynamically\/"},"modified":"2022-08-09T07:25:02","modified_gmt":"2022-08-09T14:25:02","slug":"manage-cors-policy-dynamically","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/manage-cors-policy-dynamically\/","title":{"rendered":"Manage CORS policy dynamically"},"content":{"rendered":"

Brief<\/h2>\n

We introduced CORS support in ASP.NET Web API a few months ago<\/a>. Out of the box it supports configuring CORS policy by attributes. It is a very intuitive and powerful way but lacks flexibility at runtime. Imaging your service allows a 3rd party to consume your service. You need the capability of updating the allowing origins list without compiling and deploying your service each time the list changes. <\/p>\n

In following this article, I show you two examples of dynamically managing your CORS policy. <\/p>\n

    \n
  1. Manage your CORS allowed origins in a SQL database.<\/li>\n
  2. Manage your CORS allowed origins in the web.config file.<\/li>\n<\/ol>\n

    Prerequisites<\/h2>\n
      \n
    1. Visual Studio Express 2013 Preview for Web<\/a> or Visual Studio 2013 Preview<\/a>.<\/li>\n
    2. QUnit<\/a>.<\/li>\n
    3. Bootstrap<\/a> (optional)<\/li>\n<\/ol>\n

      Set up the test environment<\/h2>\n

      CORS Service<\/h2>\n

      Create a WebAPI project. It comes with a default ValuesController. Mark the controller with EnableCors attribute:<\/p>\n

      \n
         1:  <\/span>    [EnableCors("*"<\/span>, "*"<\/span>, "*"<\/span>)]<\/pre>\n
         2:  <\/span>    public<\/span> class<\/span> ValuesController : ApiController<\/pre>\n
         3:  <\/span>    {<\/pre>\n
         4:  <\/span>        \/\/ GET api\/values<\/span><\/pre>\n
         5:  <\/span>        public<\/span> IEnumerable<string<\/span>> Get()<\/pre>\n
         6:  <\/span>        {<\/pre>\n
         7:  <\/span>            return<\/span> new<\/span> string<\/span>[] { "value1"<\/span>, "value2"<\/span> };<\/pre>\n
         8:  <\/span>        }<\/pre>\n
         9:  <\/span> <\/pre>\n
        10:  <\/span>        \/\/ GET api\/values\/5<\/span><\/pre>\n
        11:  <\/span>        public<\/span> string<\/span> Get(int<\/span> id)<\/pre>\n
        12:  <\/span>        {<\/pre>\n
        13:  <\/span>            return<\/span> "value"<\/span>;<\/pre>\n
        14:  <\/span>        }<\/pre>\n
        15:  <\/span> <\/pre>\n
        16:  <\/span>        \/\/ POST api\/values<\/span><\/pre>\n
        17:  <\/span>        public<\/span> void<\/span> Post([FromBody]string<\/span> value<\/span>)<\/pre>\n
        18:  <\/span>        {<\/pre>\n
        19:  <\/span>        }<\/pre>\n
        20:  <\/span> <\/pre>\n
        21:  <\/span>        \/\/ PUT api\/values\/5<\/span><\/pre>\n
        22:  <\/span>        public<\/span> void<\/span> Put(int<\/span> id, [FromBody]string<\/span> value<\/span>)<\/pre>\n
        23:  <\/span>        {<\/pre>\n
        24:  <\/span>        }<\/pre>\n
        25:  <\/span> <\/pre>\n
        26:  <\/span>        [DisableCors]<\/pre>\n
        27:  <\/span>        \/\/ DELETE api\/values\/5<\/span><\/pre>\n
        28:  <\/span>        public<\/span> void<\/span> Delete(int<\/span> id)<\/pre>\n
        29:  <\/span>        {<\/pre>\n
        30:  <\/span>        }<\/pre>\n
        31:  <\/span>    }<\/pre>\n<\/div>\n
      Add following line to the App_StartWebApiConfig.cs<\/i> file to enable CORS.<\/p>\n
      \n
         1:  <\/span>config.EnableCors();<\/pre>\n<\/div>\n
      Now your CORS service is set up.<\/p>\n
      Test client<\/h2>\n
      The client code can\u2019t stay in the same service as CORS service since it requires two services hosted at different origins so the CORS mechanism will kick in. <\/p>\n
      CORS is also affected by the choice of browsers<\/a>[i]<\/a>. So the tests need to be run in browser. Therefore I write the test in QUnit[ii]<\/a>.<\/p>\n
      Create an empty ASP.NET project. Adding following files:<\/p>\n
      Index.html<\/b><\/h3>\n
      \n
         1:  <\/span><!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/pre>\n
         2:  <\/span><<\/span>html<\/span> xmlns<\/span>="http:\/\/www.w3.org\/1999\/xhtml"<\/span>><\/span><\/pre>\n
         3:  <\/span><<\/span>head<\/span>><\/span><\/pre>\n
         4:  <\/span>    <<\/span>title<\/span>><\/span>CORS Test<\/<\/span>title<\/span>><\/span><\/pre>\n
         5:  <\/span>    <<\/span>link<\/span> href<\/span>="Content\/bootstrap.css"<\/span> rel<\/span>="stylesheet"<\/span> \/><\/span><\/pre>\n
         6:  <\/span><\/<\/span>head<\/span>><\/span><\/pre>\n
         7:  <\/span><<\/span>body<\/span>><\/span><\/pre>\n
         8:  <\/span>    <<\/span>div<\/span> class<\/span>="container"<\/span>><\/span><\/pre>\n
         9:  <\/span>        <<\/span>h1<\/span>><\/span>CORS Test Client<\/<\/span>h1<\/span>><\/span><\/pre>\n
        10:  <\/span>        <<\/span>p<\/span>><\/span>Input the url to the CORS service in following form.<\/<\/span>p<\/span>><\/span><\/pre>\n
        11:  <\/span>        <<\/span>form<\/span> action<\/span>="Test.html"<\/span> method<\/span>="get"<\/span> class<\/span>="form-inline"<\/span>><\/span><\/pre>\n
        12:  <\/span>            <<\/span>input<\/span> type<\/span>="text"<\/span> name<\/span>="url"<\/span> class<\/span>="input-xxlarge"<\/span> \/><\/span><\/pre>\n
        13:  <\/span>            <<\/span>input<\/span> type<\/span>="submit"<\/span> name<\/span>="submit"<\/span> class<\/span>="btn"<\/span>\/><\/span><\/pre>\n
        14:  <\/span>        <\/<\/span>form<\/span>><\/span><\/pre>\n
        15:  <\/span>    <\/<\/span>div<\/span>><\/span><\/pre>\n
        16:  <\/span><\/<\/span>body<\/span>><\/span><\/pre>\n
        17:  <\/span><\/<\/span>html<\/span>><\/span><\/pre>\n<\/div>\n
      Test.html<\/b><\/h3>\n
      \n
         1:  <\/span><!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/pre>\n
         2:  <\/span><<\/span>html<\/span> xmlns<\/span>="http:\/\/www.w3.org\/1999\/xhtml"<\/span>><\/span><\/pre>\n
         3:  <\/span><<\/span>head<\/span>><\/span><\/pre>\n
         4:  <\/span>    <<\/span>title<\/span>><\/span>CORS Test<\/<\/span>title<\/span>><\/span><\/pre>\n
         5:  <\/span>    <<\/span>link<\/span> href<\/span>="Content\/qunit.css"<\/span> rel<\/span>="stylesheet"<\/span> \/><\/span><\/pre>\n
         6:  <\/span><\/<\/span>head<\/span>><\/span><\/pre>\n
         7:  <\/span><<\/span>body<\/span>><\/span><\/pre>\n
         8:  <\/span>    <<\/span>div<\/span> id<\/span>="qunit"<\/span>><\/<\/span>div<\/span>><\/span><\/pre>\n
         9:  <\/span>    <<\/span>div<\/span> id<\/span>="qunit-fixture"<\/span>><\/<\/span>div<\/span>><\/span><\/pre>\n
        10:  <\/span>    <<\/span>script<\/span> src<\/span>="Scripts\/jquery-2.0.2.js"<\/span>><\/<\/span>script<\/span>><\/span><\/pre>\n
        11:  <\/span>    <script src="Scripts\/qunit.js"<\/span>><\/script><\/pre>\n
        12:  <\/span>    <script src="Scripts\/test.js"<\/span>><\/<\/span>script<\/span>><\/span><\/pre>\n
        13:  <\/span><\/<\/span>body<\/span>><\/span><\/pre>\n
        14:  <\/span><\/<\/span>html<\/span>><\/span><\/pre>\n<\/div>\n
      Scriptstest.js<\/b><\/h3>\n
      \n
         1:  <\/span>function<\/span> getParameterByName(name) {<\/pre>\n
         2:  <\/span>    name = name.replace(\/[[]\/, "\\["<\/span>).replace(\/[]]\/, "\\]"<\/span>);<\/pre>\n
         3:  <\/span>    var<\/span> regex = new<\/span> RegExp("[\\?&]"<\/span> + name + "=([^&#]*)"<\/span>),<\/pre>\n
         4:  <\/span>        results = regex.exec(location.search);<\/pre>\n
         5:  <\/span>    return<\/span> results == null<\/span> ? ""<\/span> : decodeURIComponent(results[1].replace(\/+\/g, " "<\/span>));<\/pre>\n
         6:  <\/span>}<\/pre>\n
         7:  <\/span> <\/pre>\n
         8:  <\/span>test("Cross domain get request"<\/span>, function<\/span> () {<\/pre>\n
         9:  <\/span>    var<\/span> testUrl = getParameterByName("url"<\/span>);<\/pre>\n
        10:  <\/span> <\/pre>\n
        11:  <\/span>    var<\/span> xhr = new<\/span> XMLHttpRequest();<\/pre>\n
        12:  <\/span>    xhr.open("GET"<\/span>, testUrl + "\/api\/Values"<\/span>, false<\/span>);<\/pre>\n
        13:  <\/span>    xhr.send();<\/pre>\n
        14:  <\/span> <\/pre>\n
        15:  <\/span>    var<\/span> retval = JSON.parse(xhr.responseText);<\/pre>\n
        16:  <\/span> <\/pre>\n
        17:  <\/span>    equal(2, retval.length);<\/pre>\n
        18:  <\/span>    equal("value1"<\/span>, retval[0]);<\/pre>\n
        19:  <\/span>    equal("value2"<\/span>, retval[1]);<\/pre>\n
        20:  <\/span>});<\/pre>\n<\/div>\n
      Notes:<\/p>\n
        \n
      1. The project requires QUnit.js<\/a><\/a> and QUnit.css. It also includes Bootstrap. Bootstrap is optional.<\/li>\n
      2. Index.html is the front page. It accepts a URL to which this test client will sent CORS request to.<\/li>\n
      3. Test.html contains QUnit test fixture.<\/li>\n
      4. Test.js contains the test case and a utility function to get parameter from query string.<\/li>\n<\/ol>\n
        What now?<\/h2>\n
        Now you have both CORS service and test client. Host them separately in IIS Express or Azure:<\/p>\n
        \"clip_image001\"<\/a><\/p>\n
        \"clip_image002\"<\/a><\/p>\n
        Visit the test client and input the CORS service URL:<\/p>\n
        \"clip_image004\"<\/a><\/p>\n
        The page will navigate to the test page once you submit the URL:<\/p>\n
        \"clip_image006\"<\/a><\/p>\n
        Notice the test passes since the CORS service accepts request from all origins<\/b>.<\/p>\n
        Manage your CORS allowed origin in database<\/h2>\n
        The goal is to save the allowed origin list in database and make CORS components to visit the database at runtime. We will introduce a data model, CRUD views to manage the database and a new CORS attribute to mark your endpoints.<\/p>\n
        The advantage of using database is that it\u2019s powerful. You can change the policy at runtime without restart the service. The downside is that database is sometime overkill especially when your service is too simple to add a database.<\/p>\n
        Create management page <\/h2>\n
        Model<\/h3>\n
        I used Entity Framework for the database. First, let\u2019s create the simplest model:<\/p>\n
        \n
           1:  <\/span>    public<\/span> class<\/span> AllowOrigin<\/pre>\n
           2:  <\/span>    {<\/pre>\n
           3:  <\/span>        public<\/span> int<\/span> Id { get; set; }<\/pre>\n
           4:  <\/span> <\/pre>\n
           5:  <\/span>        public<\/span> string<\/span> Name { get; set; }<\/pre>\n
           6:  <\/span> <\/pre>\n
           7:  <\/span>        public<\/span> string<\/span> Origin { get; set; }<\/pre>\n
           8:  <\/span>    }<\/pre>\n<\/div>\n