Enabling CORS on IIS for only Font files

Question

Is there a way to enable CORS for only files of a certain type on IIS7? I am going off this article (https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/) and noticed that the Apache and nginx examples show that CORS is only enabled if the request is looking for a certain Content-Type, whereas the IIS example shows CORS enabled for everything.

I have CSS that is being referenced on an external site but the font files are being blocked by the browser and wish to enable CORS on IIS7 but only for .woff, .woff2, .tff, .eot, and .svg files. I do not wish to enable CORS for everything if possible.

Obsessive

You can implement and HttpHandler for those specific files and add the CORS header to the response...something like this: tpeczek.blogspot.com/2010/09/… – Crossarm

The problem I have is that I do not have control of the request or response. CSS from my site is being referenced on another site on a different domain using an absolute path to my site. The CSS pulls in fine but the fonts that are referenced in the CSS file that reside on my server are blocked. I do not see of a way that I can capture the response from this. – Obsessive

Answer 1

You can install the IIS rewrite Module https://www.microsoft.com/en-us/download/details.aspx?id=7435 . After installing the module, restart your IIS Manager and click on your website under the “Sites” node. If you see the URL Rewrite Module symbol (shown below) in the window on the right under IIS section, then you are ready to go:

Then on your Web.config, you need to add the following rule:

<rewrite>
 <rules>
  <rule name="Add Cross Origin Access">
    <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
    <conditions>
      <add input="{REQUEST_URI}" pattern="^[^\?]+\.(ttf|otf|eot|woff|woff2|svg)(\?.*)?$" />
    </conditions>
    <action type="Rewrite" value="*"/>
  </rule>
 </rules>
</rewrite>

Crossarm

This is the answer that worked for me. Thank you for your help. The URL Rewrite Module is a really useful tool that I did not know about before. – Obsessive

I'm glad to help, Kyle! – Crossarm

FYI - your regex matches everything past the file extension (ex: a/b/c/font.ttf.zip would be matched). Should it be .*\.(ttf|otf|eot|woff|woff2|svg)$ – Acromegaly

Hi, saw this solution in a lot of places now, but it doesn't work for me. Seems like some headers are stripped from the response... and even using "customHeaders" it doesn't work, for whatever header I'm adding, any clue? Even in Application_BeginRequest(), I'm lost :( – Kathlenekathlin

Should use Derek's answer below. Need to use <outboundRules> under the <rewrite> node. – Northrup

Answer 2

Hackerman's answer is great and it led me to a solution, however, there are a few adjustments that I had to make. The first was placing the rule in the outboundRules section under the rewrite node.

<outboundRules>
    <rule name="Enable CORS for Fonts">
        <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
        <conditions>
          <add input="{REQUEST_URI}" pattern="^[^\?]+\.(ttf|otf|eot|woff|woff2|svg)(\?.*)?$" />
        </conditions>
        <action type="Rewrite" value="*" />
    </rule>
</outboundRules>

Lastly, the regex was updated to prevent requests such as the one below, which would allow someone to request any URL across origins:

/some/critical/javascript/file.js?v=.woff
/api/secure/users?v=.woff

... but it still allows the following

/some/font.woff
/some/font.woff?etag
/some/font.woff?v=123

Acromegaly

I'm not sure what I am doing wrong. I am getting HTTP Error 500.52 - URL Rewrite Module Error. Config Error: Cannot add duplicate collection entry of type 'rule' with unique key attribute 'name' set to 'Enable CORS for Fonts' – Hohenstaufen

Answer 3

You should add this code to your Web.config:

  <location path="fonts/FontName.ttf">
    <system.webServer>
       <httpProtocol>
          <customHeaders>
             <add name="Access-Control-Allow-Origin" value="*" />
          </customHeaders>
       </httpProtocol>
    </system.webServer>
  </location>

Gervais

Nice, no extra modules required and works like a charm, care to mention that the <location> tag should be the under <configuration> tag – Dori

This is nice and doesnt add the extra overhead of rewriting on the way back out. – Sleekit

This is good if you want to allow access for any domain. but doesn't work for multiple specific domains – Boisleduc

Answer 4

You must add these command in web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Notice : After that you should go to iis>your site>Handler Mappings> and find in list: OPTIONSVerbHandler and remove this item>restart your iis and done...

Notice2 : The code above for disable CORS origin for all url and file. You can search for command in web.config for allow CORS just for font.

Unpeopled