0

I have 2 web site running on 2 different servers (but located on the same file system). I use some common resources like css files, fonts, images, xml files ... I want the second site using resources of the first site; i.e I store the common resources on server1 and want the common files to be available (not duplicated) from web pages of server2 Idealy html files should look like

On Server1, index.html file contains a <link rel="stylesheet" type="text/css" href="MyStyle.css"/> in the html head.

The MyStyle.css contains a font use @font-face{font-family:"MyFont";font-style:normal;font-weight:900;font-display:auto; src:url(/MyFont.woff2) format("woff2");}

On Server2, index.html file contains a <link rel="stylesheet" type="text/css" href="MyStyle.css"/> in the html head. The MyStyle.css contains a font use @font-face{font-family:"MyFont";font-style:normal;font-weight:900;font-display:auto; src:url(MyFont.woff2) format("woff2");}

I tried several ways (.htaccess , uses of urls in html head and css ) but when browsing index.html located on server2, impossible to get the MyFont.woff2 file .

  1. I tried redirection with .htaccess configuration on server2, redirecting css and font file requests to server1 (with or without R flag).

.htaccess content on server2:

# Server2
# at Server root, so DocumentRoot 

Options -Indexes
Options +FollowSymlinks

RewriteEngine On

#--------------------------------------------------
# css files are located on server1
RewriteRule "^(.*)\.css$" http://server1/$1\.css" [L]
# woff2 font files are located on server1
RewriteRule "^(.*)\.woff2$" http://server1/$1\.woff2" [L]

Result : The browser (I'm using Chrome) gets the html file from server2, the css file from server1 with a redirection (so using 2 requests) , but don't get the font file from server1.

The brower indicates the error :

Access to font at 'http://server1/MyFont.woff2' from origin 'http://server2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. MyStyle.css:1 GET http://server2/MyFont.woff2 net::ERR_FAILED 200

=> In the MyStyle.css, the font url is a relative path like src:url**(MyFont.woff2**) format("woff2");, the browser try to get it on server1 rather than server2; This is due to the notified css redirection where the browser uses MyStyle.css redirected location as base for the font.

  1. I've tried absolute url for font file in the server1/MyStyle.css file:

@font-face{font-family:"MyFont";font-style:normal;font-weight:900;font-display:auto; src:url(http://server1/MyFont.woff2) format("woff2");}

Result : The browser gets the html file from server2, the css file from server1 with a redirection (so using 2 requests) , but don't get the font file from server1.

I get exactly same error; same consequence strict-origin-when-cross-origin ... The browser accept to get the MyStyle.css file from server1 but not the MyFont.woff2 font file defined within the css on same server than the MyStyle.css.

  1. I tried absolute url everywhere

In the server2 index.html file, the link to the css file as

<link ... href="http://server1/MyStyle.css"/>

and in the css file

@font-face{font-family:"MyFont";... src:url(http://server1/MyFont.woff2) format("woff2");}.

Result : The browser gets the html file from server2, the css file directly from server1 (without any redirection) , but still don't get the font file from server1.

I get exactly same error as before Access to font at 'http://server1/MyFont.woff2' from origin 'http://server2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. MyStyle.css:1 GET http://server2/MyFont.woff2 net::ERR_FAILED 200

The Chrome browser sounds considering MyFont.woff2 as not same origin than the MyStyle.css, even if, now, explicitely MyStyle.css file is from a different orign than the index.html and MyFont.woff2 is same origin than MyStyle.css; thus because MyFont.woff2 is not same orign than index.html ...

Any idea on how I can get index.html from server2 and css + fonts from server1 where font files are defined within the css?

Note : I didn't found a way in the .htaccess file to reroute css and font files without explicit redirection. As my 2 servers are on the same file system I would have expected a rewriting rule doing something like server2/../server1/MyStyle.css. This imply to set path going to the ancestor folder of the DocumentRoot

Note2 : I do not have access to the Apache server configuration file (httpd.conf) nor the virtual host configuration file (httpd-vhosts.conf).

Note3 : I only have a FTP access to the servers file system.

ThePEB
  • 1
  • 3
  • 1
    This seems really complicated, but I would look into using `Alias` and moving all of your fonts to a `/fonts/` folder. You can do this for both sites where they pull from a third location, or just one to pull from the other. This directive allows you to map URLs paths to different parts on disk. The other option, which I'd personally prefer, is to just symlink the `/fonts/` folder so that it exists in two locations. You are not duplicating it, you are (effectively) just giving it two names. – Chris Haas Oct 25 '22 at 17:39
  • Thanks Chris. This does not solve my issue. Alias can't be in .htaccess and I do not have access to httpd.conf file nor httpd-vhosts.conf. I can't do Symlink because the access to file system I have is only FTP! The fonts file location is not important. My issue is to get the font file from other location than the html is, where font location is defined in the css already in the second location. A thrid location will change nothing compared to 2 locations; I get the css from other location but not the font defined within the css. – ThePEB Oct 25 '22 at 18:58
  • The third location was related to Alias, which you've noted is not an option, so it can be ignored. If you have `example.com` and `example.net`, and you want the first one to be the main site, adding a `R` flag in htaccess on the second is essentially the same as literally referencing the CSS on the first using `example.com/MyStyle.css`. You'll actually see that in your inspection tools. If you are will to do this, since it hides nothing, this would probably solve all of your problems without fighting htaccess in any way. – Chris Haas Oct 25 '22 at 20:33
  • Not solving issue ... I've edited my question ... This is my case 3; issue with or without .htaccess :( – ThePEB Oct 26 '22 at 08:48

0 Answers0