How to send headers (e.g. authentication tokens) to iframes

header-in-iframe.js

<script>
    var myIFrame = document.querySelector('#myiframe');
    var myUrl = 'http://localhost:1234/api/test';
    var myHeaders = [
        ['Authorization', 'Bearer 1234567890']
    ];

    populateIFrame(myIFrame, myUrl, myHeaders);

    function populateIFrame(iframe, url, headers)
    {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = handler;
        xhr.responseType = 'blob';
        xhr.withCredentials = true;
        headers.forEach(function(header)
        {
            xhr.setRequestHeader(header[0], header[1]);
        });
        xhr.send();

        function handler()
        {
            if (this.readyState === this.DONE)
            {
                if (this.status === 200)
                {
                    iframe.src = URL.createObjectURL(this.response);
                }
                else
                {
                    console.error('Request failed', this);
                }
            }
        }
    }
</script>