11

I have the following two files:

index.html

<html>
<head>
<meta charset="utf-8" />
<title>Web Page</title>
<style type="text/css">
.text {
    display: inline-block;
    font-family: tahoma;
    font-size: 14px;
    max-width: 400px;
    background-color: #ddedff;
    padding: 10px;
    text-align: justify;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    get_data('info.txt');
});
function get_data(file) {
    var request = new Request(file);
    fetch(request).then(function(response) {
        return response.text().then(function(text) {
            $('.text').html(text);
        });
    });
}
</script>
</head>
<body>
    <div class="text"></div>
</body>
<html>

info.txt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

When I open on Mozilla Firefox the file: README.html through this local URI:

file:///C:/testing/README.html

it works as expected, I mean, the text on file: info.txt is displayed properly.

But when I open the same URI on Google Chrome I get a blank screen and the following error on the console:

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme must be "http" or "https" for CORS request.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

Do you have what can I do so I can open local files on Google Chrome as I can do on Mozilla Firefox?

If I have to do some tweak on:

chrome://flags/

that's acceptable for me.

EDIT

I tried launching Google Chrome from the command line with the flag: --allow-file-access-from-files as recommended here but now I get the following error:

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme "file" is not supported.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

Thanks!

curiousdannii
  • 1,115
  • 1
  • 21
  • 30
davidesp
  • 2,546
  • 6
  • 25
  • 59
  • 1
    The answer to your problem is in the error message that Chrome provided. Chrome doesn't let you load local files through `file:///...` for security reasons. If this is an application that you're working on to only be used locally, then you could download a Chrome application that creates a web server for you in a certain local directory. Web Server for Chrome is one that Google suggests when working on their Code Labs – Denno Apr 22 '18 at 23:15
  • 1
    there is no `chrome://flags/` tweak, only a command line tweak. Start chrome with command line option that allows `file:///` pages to access `file:///` resources like that - I don't know the option off hand, a quick google search should help – Jaromanda X Apr 22 '18 at 23:20
  • Seems like Chrome's `fetch` just won't play with `file://` URL scheme these days. Have you considered XHR? Or, better still, using a local http server? – Jaromanda X Apr 23 '18 at 00:04
  • @Jaromanda, thanks, that did the trick – davidesp Apr 23 '18 at 01:36

1 Answers1

6

For chrome you still need --allow-file-access-from-files (and I recommend installing a separate chrome and using it solely for these projects to stay secure), but just shim fetch() for XMLHttpRequest for file:// requests:

if (/^file:\/\/\//.test(location.href)) {
    let path = './';
    let orig = fetch;
    window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ?
        orig(resource) :
        new Promise(function(resolve, reject) {
            let request = new XMLHttpRequest();

            let fail = (error) => {reject(error)};
            ['error', 'abort'].forEach((event) => { request.addEventListener(event, fail); });

            let pull = (expected) => (new Promise((resolve, reject) => {
                if (
                    request.responseType == expected ||
                    (expected == 'text' && !request.responseType)
                )
                    resolve(request.response);
                else
                    reject(request.responseType);
            }));

            request.addEventListener('load', () => (resolve({
                arrayBuffer : () => (pull('arraybuffer')),
                blob        : () => (pull('blob')),
                text        : () => (pull('text')),
                json        : () => (pull('json'))
            })));
            request.open('GET', resource.replace(/^\//, path));
            request.send();
        })
    );
}

This shim will;

  • only activate for html files opened locally (outer if statement),
  • call the normal fetch() for any url that doesn't specify protocol (and thus non-file:// requests), and
  • will replace absolute paths (/root/bob.html) with ones relative to the current path (since that would dangerously evaluate to C:\ or equivalent)

Set path to something else if your index.html isn't actually at the root for the project.
If you need support for init, or anything other than text(), you'll need to add it.
Explicit file:// requests wont be fulfilled, that's on purpose, but if you really do know what you're doing, you'll know how to make this work for you, and if you don't you shouldn't.

The following is useful if you're going to be doing this for multiple files. Swap out './' for document.currentScript.getAttribute('data-root'). Now you can put that snippet into its own file, say filesystemHelper.js, and call like so in the various files:

<script src="../filesystemHelper.js" data-root="../"></script>

Pretty snazzy.

Hashbrown
  • 8,877
  • 7
  • 57
  • 71