Fonts – cross domain fixes
add access control allow origin

https://arjunphp.com/allow-cross-domain-fonts-with-cors/

Some browsers like IE doesn’t allow cross-domain fonts by default – unless you set a Access-Control-Allow-Origin header to the font.

 

cross-domain fonts mean fonts that are not hosted on your domain and may be CDN based fonts or fonts that are hosted on other websites.

It seems that for security reasons browsers do not allow cross-domain requests.

When using Web fonts via @font-face or other CSS3 methods, some browsers will refuse to embed the font when it’s coming from a 3rd party URL. The solution is very simple, just add a few lines to your .htaccess file.

Add below lines to your .htaccess or httpd.conf:

 

	# Apache config<FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "" # nginx configif ($filename ~ ^.*?.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *;}

 

 

---

 

https://www.hirehop.com/blog/cross-domain-fonts-cors-font-face-issue/

Cross Domain Fonts CORS CSS font-face not loading

 

 

Many users have created some amazing documents for use in HireHop, utilizing HTML5, JavaScript and CSS functionality. For these documents users sometimes need a special font that they store on their server, however, sometimes the font doesn’t seem to work in the HireHop document. The reason for this is because of Cross-Origin Resource Sharing (CORS) restrictions in browsers.

Fonts Not Loading in Documents & Web Pages

Most web browsers do not allow cross-domain requests, this is because of the same origin security policy. The result is that sometimes when using web-fonts from another domain, this can cause errors and the font does not load in the web page (or HireHop documents). Basically, for security reasons, some files are being “flagged” as not being allowed to be used across different domains by the server that hosts them, so the following typical code might not seem to work:

<style type="text/css">
@font-face {
    font-family: "OpenSans";
    src: url("https://my_server.com/fonts/OpenSans.woff2") format("woff2");
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

The Solution

To fix cross-origin restrictions for your fonts, the response from remote server that hosts the font files must include the Access-Control-Allow-Origin header in the font file.

If you’re using font services like Typekit or Google Fonts, or maybe content delivery networks like BootstrapCDN, CdnJS or JsDelivr to load your prefered fonts, you don’t need to do anything, because the Access-Control-Allow-Origin header is already sent in their response header.

Apache

To configure an Apache web server, put the following code into the httpd.conf or .htaccess file.

1. Add the mime type headers on Apache:

   AddType application/vnd.ms-fontobject    .eot
   AddType application/x-font-opentype      .otf
   AddType image/svg+xml                    .svg
   AddType application/x-font-ttf           .ttf
   AddType application/font-woff            .woff
   AddType application/font-woff2           .woff2
   

2. Enable cross-origin resource sharing (CORS) on Apache for the mime types:

   <IfModule mod_headers.c>
     <FilesMatch ".(eot|otf|svg|ttf|woff|woff2?)$">
       Header set Access-Control-Allow-Origin "*"
     </FilesMatch>
   </IfModule>
   

NGINX

To configure an NGINX web server, put the following code into the /etc/nginx/nginx.conf or your custom /etc/nginx/conf.d/custom.conf file.

1. Add the mime type headers on NGINX:

   application/vnd.ms-fontobject    eot;
   application/x-font-opentype      otf;
   image/svg+xml                    svg;
   application/x-font-ttf           ttf;
   application/font-woff            woff;
   application/font-woff2           woff2;
   

2. Enable cross-origin resource sharing (CORS) on NGINX for the mime types:

   location ~* .(eot|otf|svg|ttf|woff|woff2)$ {
       add_header Access-Control-Allow-Origin *;
   }
   

IIS

To configure the Microsoft IIS, add the following the code to the web.config system.webServer block.

• Enable cross-origin resource sharing (CORS) on IIS

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="access-control-allow-origin" value="*" />
        <add name="access-control-allow-headers" value="content-type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  

PHP

If you can’t change the server settings, you can always use PHP to deliver the font file.

• Use a server script file rather than a physical font file

  <style type="text/css">
  @font-face {
      font-family: 'OpenSans';
      src: url('https://my_server.com/fonts/OpenSans.php') format('woff2');
  }
  html, body{
      font: normal 16px OpenSans, sans-serif;
  }
  </style>
  

• How to fix cross-domain @font-face issues with PHP

  <?php
  // fonts.php
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/font-woff2');
  echo @file_get_contents('/fonts/OpenSans.woff2');
  ?>
  

 

 

 

Enable via php

 

 

https://stackoverflow.com/questions/14467673/enable-cors-in-htaccess

Since I had everything being forwarded to index.php anyway I thought I would try setting the headers in PHP instead of the .htaccess file and it worked! YAY! Here's what I added to index.php for anyone else having this problem.

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    // should do a check here to match $_SERVER['HTTP_ORIGIN'] to a
    // whitelist of safe domains
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

}

credit goes to slashingweapon for his answer on this question

Because I'm using Slim I added this route so that OPTIONS requests get a HTTP 200 response

// return HTTP 200 for HTTP OPTIONS requests
$app->map('/:x+', function($x) {
    http_response_code(200);
})->via('OPTIONS');

 

 

---

 

How to fix Access-Control-Allow-Origin (CORS origin) Issue for your HTTPS enabled WordPress Site and MaxCDN

Last Updated on February 8th, 2020 by App Shah 112 comments

 

https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

 

On Crunchify Business site we have enabled HTTPS from day one. Recently WordPress.com announced 100% HTTPS enablement even for hosted domains at WordPress.com and that’s a great news.

While setting up HTTPS on WordPress site, we found a strange issue by looking at Chrome console output. Take a look at below screenshot.

Error: No Access-Control-Allow-Origin header is present on the requested resource.

First of all I’ve never seen this before for any WordPress site.

Of course, this is not a new term for us as we do have a detailed tutorial on CORS origin for Java: https://crunchify.com/what-is-cross-origin-resource-sharing-cors-how-to-add-it-to-your-java-jersey-web-server/

Using web.config and Java setting combination you could fix CORS origin issue easily.

Let’s understand what is Cross-origin resource sharing (CORS)?

CORS is industry standard for accessing web resources on different domains. It is very important security concept implemented by web browsers to prevent Javascript or CSS code from making requests against a different origin.

Let’s consider this scenario:

• You have link from Domain1 which is opened in browser and asking for a JavaScript file from Domain2.
• Now your web browser makes call to Domain2.
• If on Domain2, you have a policy to accept request like JavaScript or CSS from only Domain2 and ignore all requests from other domains, then your browser’s Domain1 request will fail with an error.

In simple statement: If request is not coming from same domain or origin, just simply ignore it.

This is very important features which prevents hacking and resource stealing without owners’s knowledge.

Take a look at this below screenshot with error:

Mixed Content: The page was not loaded over HTTPS. This request has been blocked.

Why problem appeared on Crunchify.com site?

After investigation I came to know that I’ve setup http as my origin URL in MaxCDN setup admin console. It should be https.

How did I fix this error?

Just changed Origin URL from http to https and issue resolved in my case. There is another way to fix an issue too.

Are you using Webfonts from Google, Typekit, etc?

There are multiple ways you could use Webfonts like @font-face or CSS3 methods, some browsers like Firefox & IE may refuse to embed the font when it’s coming from some non-standard 3rd party URL (like your blog) for same security reason.

In order to fix an issue for your WordPress blog, just put below into your .htaccess file.

<IfModule mod_headers.c> <FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> Header set Access-Control-Allow-Origin "*"

As you see Access-Control-Allow-Origin "*" allows you to access all resources and webfonts from all domains.

We got excellent question from Andreas on adding Access-Control-Allow-Origin on Subdomains

Just add below lines to .htaccess file and we should be good.

<ifmodule mod_headers.c=""> SetEnvIf Origin "^(..domain.com)$" ORIGIN_SUB_DOMAIN=$1 Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN Header set Access-Control-Allow-Methods: "" Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"

Hope this helps you the way you want.

 

 

---

 

https://stackoverflow.com/questions/5008944/how-to-add-an-access-control-allow-origin-header

 

In the font files folder put an htaccess file with the following in it.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

also in your remote CSS file, the font-face declaration needs the full absolute URL of the font-file (not needed in local CSS files):

e.g.

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

That will fix the issue. One thing to note is that you can specify exactly which domains should be allowed to access your font. In the above htaccess I have specified that everyone can access my font with "*" however you can limit it to:

A single URL:

Header set Access-Control-Allow-Origin http://example.com

Or a comma-delimited list of URLs

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(Multiple values are not supported in current implementations)