Loading a locally stored JSON file

mlandry

Hi, I'm trying to do a simple sketch using data from a JSON file to display flashcards. I did use JSON files in the past with no problem but now I get the following error in the chrome console :

XMLHttpRequest cannot load file:///C:/Users/matth/Documents/p5js/flashcard/cards.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Not sure what to do. Is that due to the recent security updates in chrome ?

kfrajer

Check this: https://forum.processing.org/two/discussion/20602/my-p5js-game-is-not-working-in-chrome#latest

Specifically http://chrome-allow-file-access-from-file.com/

Kf

mlandry

I tried it but I still have the same error message

jeremydouglass

@mlandry -- Please check the examples of working code you used in the past and your current code. Is the URL type in the old working code and the new broken code the same (eg http://, not file://)? Are you loading via the web server, not the file system?

See for example:

• http://stackoverflow.com/a/32579336/7207622

mlandry

Last time I did it I was following Dan Shiffman's p5.js tutorial series. I'm not using a web server, and that's probably the issue, but so was Dan in this particular example.

Should I try using node.js ?

jeremydouglass

My guess based on those discussions of similar errors is that, if you look back at that tutorial code you used before that worked (can you provide it, or a link to that tutorial?) it did not contain a "file:///C" URL. Your example above does use such a URL -- that might be what broke it.

file:///C:/Users/matth/Documents/p5js/flashcard/cards.json

mlandry

I didn't keep my version of the sketch but here's the original tutorial :

koogs

you can always put the json file in the sketch directory (or a data directory inside that) and do away with the complete filename and just use "cards.json"

mlandry

That's actually what I did in the first place.

koogs

post your entire code rather than making us guess at what's wrong with it.

mlandry

Here's the content of sketch.js :

 var data;

 function preload() {
   data = loadJSON("cards.json");
 }

 function setup() {

 }

 function draw() {

 }

And the content of cards.json :

{
   "cards" : [
     {
       "front" : "Une question",
       "back" : "Une réponse"
     },
     {
       "front" : "Une autre question",
       "back" : "Une autre réponse"
     }
   ]
 }

GoToLoop

https://ThimbleProjects.org/gotoloop/91698/

https://forum.Processing.org/two/discussion/17813/how-to-pull-and-show-text-from-a-json-file#Item_6

mlandry

@GoToLoop in these examples data is coming from an external API. In my case the JSON file is stored locally in the same directory as the sketch.js file.

I should probably change the title to "Loading a locally stored JSON file".

In every example I find the JSON is loaded in the same way I used. I guess the problem doesn't come from my code but from the way I try to run it. I really don't understand what I'm doing wrong and I would like to avoid using node.js or something like that.

GoToLoop

... in these examples data is coming from an external API.

Nope! @ https://ThimbleProjects.org/gotoloop/91698/, "rivers.json" file is in the same root folder as sketch's "RiverNames.js" and its "index.html":

1. https://ThimbleProjects.org/gotoloop/91698/rivers.json
2. https://ThimbleProjects.org/gotoloop/91698/RiverNames.js
3. https://ThimbleProjects.org/gotoloop/91698/index.html <- (Hit CTRL+U to view-source)

<meta charset=UTF-8>
<script async src=https://CDN.JSDelivr.net/p5.js/latest/mainfile></script>
<script defer src=RiverNames.js></script>

Only the "p5.min.js" library file is coming from a remote CDN service link. >-)

GoToLoop

I should probably change the title to "Loading a locally stored JSON file".

If that's what you're looking for, you shoulda followed the 1st answer from @kfrajer: :-@

https://forum.Processing.org/two/discussion/20602/my-p5js-game-is-not-working-in-chrome

mlandry

I tried following the instructions from http://chrome-allow-file-access-from-file.com/ but I got the same result. I got it finally working using node.js but I wanted to avoid it because I want my students to be able to use the script offline and they are way to young to learn how to use node.js. I guess I'll have to use processing instead of p5.js for that project.

GoToLoop

I tried following the instructions from http://chrome-allow-file-access-from-file.com/ but I got the same result.

If for some reason you couldn't pull that out w/ Chrome-based browsers, just use any Firefox-based browser! ;;)

blindfish

@mlandry: can your students not use the p5 editor: that runs it's own local server. There are also other alternatives: the Brackets editor runs a local server and is also a really good choice for teaching html and css... I wouldn't use the chrome setting in a teaching environment as it potentially compromises security.

GoToLoop

I wouldn't use the chrome setting in a teaching environment as it potentially compromises security.

If that was true, any Firefox installed in a machine would compromise its security too. :-@

blindfish

@GoToLoop: the risk is to some extent hypothetical since the chances of being exploited are relatively slim - but still very real (see: this and this)... In a teaching environment you'll usually find these settings are locked down by the sysadmin who is likely to be far more sensitive to risk than yourself. What you do on your personal machine is of course up to you ;)

GoToLoop

@blindfish, the only "danger" mentioned on the StackOverflow link is about sending out arbitrary files to some remote server. :-?

This seems silly! B/c if a user wanted to send out any file from the school's computer, there's no need to write some ".js" script for it. 8-|

He/She could send any file using Facebook or anything else right on their own browser! =P~

blindfish

@GoToLoop The risk is that an attacker gets a compromised file onto the computer's local file system (e.g. a user saves a web page to the file system). If that file is then run locally AND has access to the outside world - i.e. because it is being run in a browser that is not restricting access - then it can access the local file system and send 'sensitive' files back to the attacker. As I said: that's largely a hypothetical risk; but it's the sort of thing sysadmins take very seriously...

GoToLoop

• Any serious multi-user environment restricts which files a group of users got access to.
• No malware can access files outside the credentials of the user who had launched it.
• Unless it knows how to bypass/hack the OS' access restrictions.

Let's say I download some random webpage which got some malware ".js", which intends to send out the "%windir%\System32\drivers\etc\hosts" file to an evil spy server.

If I'm just a regular user, w/o any admin/root access, the OS gonna block the snooping script anywayz! =))

mlandry

@blindfish I actually don't teach computer science but physics. My programs are meant to be used by my students locally on their laptops because I don't have an internet connection in my classroom and most of them don't have one at home either.

GoToLoop

@mlandry, just ask your students to install some Firefox-based browser in order to run your programs, like this 1: https://www.Mozilla.org/en-US/firefox/developer/

Firefox browsers don't place any obstacles to launch local ".html" & ".js" scripts like the others. \m/

blindfish

Well in that case you can't expect your students to open a security hole (however negligible GoToLoop thinks it is) on their personal computers ;)

Anyway - if the intent is simply for your students to be able to run the code (and not edit it) you could look at Electron or AppJS. They're intended to package up HTML/JS etc into an application that can run on any platform.

Edit: sorry - looks like AppJS is now deprecated.

mlandry

@GoToLoop I might do that actually. It will be a good opportunity to talk about FLOSS with them and I won't have to keep changing syntax between processing and p5.js. Thanks a lot for the help :)

blindfish

@mlandry - I've been meaning to look into Electron for ages and this just gave me a good excuse :D

I just ported one of my pixiJS sketches to an Electron app. It's remarkably easy to set up: probably about 10 minutes assuming your sketch dependencies are all stored locally anyway.

The application build process is also simple enough if targeting a single platform, but may become tedious if you need to target several platforms. There are tools to automate packaging to multiple platforms; though it looks like they add somewhat to the learning curve :/