JSFiddle - React, Tailwind, and code Playground
HTML
<!-- THIS IS DEMONSTRATION OF POSSIBLE FIREFOX BUG -->
<!-- Test should show firefox doesn't sent cookie on cross domain @font-face request -->
<!-- Try run this script in Chrome and then in Firefox. You should see different behavior in font request -->
<span>test string</span>
CSS
span {
font-family: test;
}
JavaScript
// start script, timeout is added for better separate netword request in network tab
setTimeout(init, 1000);
// test domain name which I prepare for this test
var domain = 'http://fonttest.offcloud.cz';
// sent request to this domain, response will contain cookie
function init () {
var req = $.ajax(domain + '/getCookie.php', {
method: 'post',
cache: false,
data: {
username: 'a',
password: 'b'
},
crossDomain: true,
xhrFields: {
withCredentials: true
}
})
.done(function (res) {
processAnotherRequest();
});
}
// sent another ajax request to check if browser will sent cookie
function processAnotherRequest () {
var req = $.ajax(domain + '/testOfCookieReceive.php', {
method: 'get',
cache: false,
crossDomain: true,
xhrFields: {
withCredentials: true
}
})
.done(function (res) {
sendCSSrequest();
sendFontFaceRequest();
});
}
// create link dom element with reference to this server
// (in network tab you can see browser sent cookie with this request)
function sendCSSrequest() {
var randomNumber = Math.round(Math.random() * 10000), // generate anti cache param
cssLink = $(document.createElement('link'));
cssLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: domain + '/getFile.php?fileName=testCSS.css&_=' + randomNumber
});
cssLink.appendTo('head');
}
// create style element containing @font-family reference
// [response will be 404 because name is not real]
// (in network tab you can see browser DOESN'T SENT COOKIE with this request)
function sendFontFaceRequest() {
var randomNumber = Math.round(Math.random() * 10000), // generate anti cache param
styleEl = $(document.createElement('style'));
styleEl.attr({
type: 'text/css'
});
// add @font-family reference to the style
...