JSFiddle - React, Tailwind, and code Playground

by Martin Dědík

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',
        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
    styleEl.text('@font-face...