Setup:
We've implemented the following fix on our server based on this StackOverflow answer:
# ALLOW CROSS DOMAIN FONTS
# -----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
We also have a Facebook like button on the site that is implemented with an AppID.
Issue:
In DEV tools, we see the following three errors (2 SHA-1 errors and a CORS error):
- This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1 = 7r8gQb8MIqE.js
- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0. This can be fixed by moving the resource to the same domain or enabling CORS. fontawesome-webfont.woff
- This site makes use of a SHA-1 Certificate; it's recommended you use
certificates with signature algorithms that use hash functions
stronger than SHA-1 = like.php
If we comment out the the Facebook like button, we don't see any of these errors.
Question:
Does anyone know if the Facbook like button SHA-1 error is triggering the CORS error and does anyone know how to fix this situation?
Update – tried MDN javascript but no change:
Have tried fixing this using javascript as described here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
But I don't fully understand what I'm doing and after clearing the cache etc I'm not seeing the header return of: Access-Control-Allow-Origin: *
.
This is what I tried:
<script>
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
var invocation = new XMLHttpRequest();
var url = 'http://netdna.bootstrapcdn.com/font-awesome/';
function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.onreadystatechange = handler;
invocation.send();
}
}
</script>