ASP.NET CORS blocking font request

Question

I built an ASP.NET Web API service and enabled CORS in that service. This service is used for serving report templates resources (html, image, css, font). The web client loads the template and display report based on downloaded template.

So, given the service enpoint: http://templates.domain.com, and I try access the service (REST, Image, Font) from a web app (http://client.domain.com), then the web client app will load:

• http://templates.domain.com/templates/:templateName
• http://templates.domain.com/templates/:templateName/css/style.css
• http://templates.domain.com/templates/:templateName/image/header.jpg
• http://templates.domain.com/templates/:templateName/font/test.ttf

In the above, the REST API, CSS, and images from the service working well, but the font is blocked/failed.

Font from origin 'http://localhost:49350' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null'

So far, I've tried the solutions below, but the font is still blocked.

1. Microsoft.Owin.Cors:

   app.UseCors(CorsOptions.AllowAll);

2. Microsoft.AspNet.WebApi.Cors:

   var cors = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(cors);

Answer 1

Are you using OWIN or WebAPI?

For a AspNet WebAPI the following would allow everything through:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

It is important to point out that allowing "*" is potential security vulnerability as you are saying anyone from anywere can invoke these methods.