failed to load script - Webworker (PDF.JS)

Question

I'm trying to load the pdf.js webworker, but I can't!?

The URL //cdn.localhost/js/pdf/worker_loader.js?v=280 exists when opening it in the browser

error

Failed to load script: //cdn.localhost/js/pdf/worker_loader.js?v=280
(nsresult = 0x805303f4)

html (URL = //secure.localhost)

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/core.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/util.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/api.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/canvas.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/obj.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/function.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/charsets.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/cidmaps.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/colorspace.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/crypto.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/evaluator.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/fonts.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/glyphlist.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/image.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/metrics.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/parser.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/pattern.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/stream.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/worker.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/bidi.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/jpg.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/jpx.js?v=280"></script>
        <script type="text/javascript" src="//cdn.localhost/js/pdf/jbig2.js?v=280"></script>
        <script type="text/javascript">
            PDFJS.workerSrc = '//cdn.localhost/js/pdf/worker_loader.js?v=280';
            PDFJS.getDocument(voucher_url).then(function(pdf){
                pdf.getPage(1).then(function(page){
                    var scale = 1.5,
                        viewport = page.getViewport(scale),
                        canvas = document.createElement('canvas'),
                        context = canvas.getContext('2d');
                    $(canvas).appendTo(container);
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        </script>
    </body>
</html>

//cdn.localhost/js/pdf/worker_loader.js?v=280

'use strict';

// List of files to include;
var files = [
  'core.js',
  'util.js',
  'canvas.js',
  'obj.js',
  'function.js',
  'charsets.js',
  'cidmaps.js',
  'colorspace.js',
  'crypto.js',
  'evaluator.js',
  'fonts.js',
  'glyphlist.js',
  'image.js',
  'metrics.js',
  'parser.js',
  'pattern.js',
  'stream.js',
  'worker.js',
  'jpx.js',
  'jbig2.js',
  'bidi.js',
  'jpg.js'
];

// Load all the files.
for (var i = 0; i < files.length; i++) {
  importScripts(files[i]);
}

The JS file you are referencing is missing. Just make sure it is present, where specified (`//cdn.localhost/js/pdf/worker_loader.js?v=280`). — Sirko, May 30 '13 at 10:09

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

Your problem is that you're attempting to use a Web Worker to load a script from a different domain. The error number 0x805303f4 means "Access to restricted URI denied".

Quoting the Web workers specification:

If the scheme component of the resulting parsed URL is not "data", and the origin of the resulting absolute URL is not the same as the origin of the entry script, then throw a SecurityError exception and abort these steps.

Note: Thus, scripts must either be external files with the same scheme, host, and port as the original page, or data: URLs.

One way of solving this problem is to move the worker_loader script onto the same domain as the html page. So you would be initialising workerSrc something like this:

PDFJS.workerSrc = 'worker_loader.js?v=280';

And then you'd also need to update the worker_loader script to use absolute urls, so the import loop might become something like this:

for (var i = 0; i < files.length; i++) {
  importScripts('//cdn.localhost/js/pdf/'+files[i]);
}

Also, depending on where the voucher_url is hosted, that may also generate a cross domain security error, as that is loaded via an XMLHttpRequest. If that is the case, you'll need to set the Access-Control-Allow-Origin header on the domain that serves the pdf.

You can do this via a .htaccess file on Apache if you have the mod_headers module installed. You'll need to add something like this:

Header set Access-Control-Allow-Origin "http://secure.localhost"

If you need to support multiple hosts, you can use "*" instead of the host name, but that isn't generally advisable for security reasons.

Have done that now, and now the script is loading, but the problem is that all PDF files etc is hosted on `cdn.localhost`.. The script/worker prepends `secure.localhost` to the URL like this `http://secure.localhost//cdn.localhost/data/voucher/6_27396e52af0266d7ce9628b16‌73a014f32c36aa2.pdf` and returns 404 when loading the PDF — clarkk, Jun 02 '13 at 22:52
That's because pdfjs doesn't support partial urls starting with `//`. You'll need to specify the full url including the protocol. If you know the url is always going to start with `//` then just prefix it with `window.location.protocol` before calling `getDocument`. Otherwise, if you want the code to be more generic you could possibly patch the `combineUrl` function in util.js. — James Holderness, Jun 02 '13 at 23:06
Have added `window.location.protocol` to the URL `http://cdn.localhost/data/voucher/6_27396e52af0266d7ce9628b1673a014f32c36aa2.pdf 200 OK` But the file was rejected.. `error('A Promise can be rejected only once ' + this.name);` — clarkk, Jun 02 '13 at 23:15
That likely means you haven't setup the `Access-Control-Allow-Origin` header on the cdn. And I'm assuming you're using Firefox? If you test in Chrome you'll probably get a more useful error message. — James Holderness, Jun 02 '13 at 23:28

score 1 · Answer 2 · answered Aug 07 '14 at 19:46

I recently ran into this issue and there actually is a solution for loading the worker from a remote host, though it requires some javascript. As I detailed in a recent blog post, you can load it using AJAX (you'll need to configure your CORS headers) and then you can create a Blob URL from the AJAX response and set that as the PDFJS.workerUrl.

var cachedJSDfd = null;
function loadWorkerURL(url){
    if (cachedJSDfd) { return cachedJSDfd; }
    cachedJSDfd = PDFJS.createPromiseCapability();
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();

    //the callback function to be callled when AJAX request comes back
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var workerJSBlob = new Blob([xmlhttp.responseText], {
                type: "text/javascript"
            });
            cachedJSDfd.resolve(window.URL.createObjectURL(workerJSBlob));
        }
    };
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    return cachedJSDfd.promise;
}

function initWebWorker() {
    return loadWorkerURL('http://www.domain.com/path/to/worker.js')).then(function(blob) {
        PDFJS.workerSrc = blob;
        return PDFJS;
    });
}

function openPdf(url) {
    return initWebWorker().then(function(PDFJS) {
        return PDFJS.getDocument(url);
    });
}

More specifics in the blog post linked above.

failed to load script - Webworker (PDF.JS)

error

html (URL = //secure.localhost)

//cdn.localhost/js/pdf/worker_loader.js?v=280

2 Answers2

Linked