title: Can I set an Access-Control-Allow-Origin header to all pages on a domain and its subdomains?
body: <p>I am trying to use a webfont which I am legally permitted to use, but not to distribute. I am hosting the font files on a separate domain used for static content. The two domains are unrelated (one is not a subdomain of the other). Let’s say that the site using the webfont is <code>example.com</code> and the site hosting it is <code>example.net</code>.</p>
  
  <p>I tried this in the .htaccess file on <code>example.net</code></p>
  
  <pre><code>&lt;FilesMatch "\.(ttf|otf|eot|woff|svg)$"&gt;
    &lt;IfModule mod_headers.c&gt;
      Header set Access-Control-Allow-Origin "example.com"
    &lt;/IfModule&gt;
  &lt;/FilesMatch&gt;
  </code></pre>
  
  <p>However, this allows the font to work <em>only on the homepage</em> of <code>example.com</code>. I tried again:</p>
  
  <pre><code>    Header set Access-Control-Allow-Origin "example.com/*"
  </code></pre>
  
  <p>Now the font works on <code>example.com</code> <em>everywhere except the homepage</em>, which is (of course) not what I wanted.</p>
  
  <p>I can’t find any documentation for this header. What I really want is to allow <em>all pages</em> on <code>example.com</code> and <code>www.example.com</code> (or, for good measure, <code>*.example.com</code>). Is there a simple way to do this? I’m guessing that the header takes some kind of regex.</p>
  
  <p>Looking for documentation I found,</p>
  
  <ul>
  <li>a lot of stuff about how this header interacts with ajax,</li>
  <li>a lot of brief notes saying that it’s necessary for webfonts (at least in Firefox).</li>
  </ul>
  
  <p>I did not find any documentation about the syntax of the header itself, or how to specify variants of a domain.</p>
  
  <p>Based on <a href="https://stackoverflow.com/a/22331450">an answer to a related question</a>, I tried this:</p>
  
  <pre><code>&lt;FilesMatch "\.(ttf|otf|eot|woff|svg)$"&gt;
      &lt;IfModule mod_headers.c&gt;
          SetEnvIf Origin "http(s)?://(www\.)?(example.com)$" AccessControlAllowOrigin=$0$1
          Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
          Header set Access-Control-Allow-Credentials true
      &lt;/IfModule&gt;
  &lt;/FilesMatch&gt;
  </code></pre>
  
  <p>My understanding was that this would set a separate header for each request, allowing each requesting page individually to use the font. Checking with Firebug, though, it looks like the header is always <code>http://example.com</code>, both on the homepage and elsewhere. Nonetheless, this works, but leaves me confused. A related question shows that <a href="https://stackoverflow.com/q/3619779">a similar setup was not working for someone else</a>. His question suggests that for him, it actually <em>was</em> sending a different header for each requesting page, and that <code>HTTP 304 Not Modified</code> responses were therefore breaking. His solution was to add an <code>always</code> directive to the <code>.htaccess</code>, but for me that resulted in <code>HTTP 500</code> errors.</p>
  
  <p>As it is now, it’s working, and I <em>think</em> will continue to work when <code>example.com</code> switches to HTTPS (as it will shortly). However, I can’t help but feel that it’s overly complicated. It’s setting the same header each time, but is using complex pattern-matching to do so. Also, while I haven’t yet any problems with <code>HTTP 304 Not Modified</code> responses (in fact, I’ve not yet seen any such responses: the browser simply doesn’t request the font files at all until I clear the cache), I worry that I might see them in future.</p>