Mixed Content error using certain "load" functions in full mode

[piecesofuk]

Nature of issue?

• [ X] Found a bug

Details about the bug:

• Web browser and version: Google Chrome OS Version 64.0.3282.134 (Official Build) beta (64-bit)
• Operating System: Google Chrome OS Version 64.0.3282.134 (Official Build) beta (64-bit)
• Steps to reproduce this: Calling a "load" function in preload()

function preload() {
	  table = loadTable("/assets/test.csv", "csv"); // error
//    json = loadJSON("/assets/test.json"); // error
//    img = loadImage("/assets/Transparent.gif"); // okay
//    strings = loadStrings("/assets/test.txt"); // error

}

p5 editor link: https://alpha.editor.p5js.org/piecesofuk/sketches/HkyBtEc8f
p5 full mode link: https://alpha.editor.p5js.org/full/HkyBtEc8f

For loadTable, loadJSON and loadStrings I get the error:

Mixed Content: The page at 'https://alpha.editor.p5js.org/full/HkyBtEc8f' was loaded over HTTPS, but requested an insecure resource 'http://alpha.editor.p5js.org/sketches/HkyBtEc8f/assets/assets/test.csv'. This request has been blocked; the content must be served over HTTPS.

loadImage works okay.
If I change https to http it also works okay.
#ilovefs

[catarak]

interesting, thanks for reporting this! the link generated for test.csv should be https if the site is loaded over https, so this is definitely a bug 😄

[himanshuc3]

What is full mode?

[piecesofuk]

It's where the sketch is displayed in the full browser window without the editor being shown using the /full/ url ie https://alpha.editor.p5js.org/full/HkyBtEc8f

[himanshuc3]

👍

[jareddonovan]

Hi, I have been looking at this today. Here are some WIP notes from my investigations:

• Follow the instructions in the README to set up local ssl proxy.
• Set preferences for the sketch are to serve via HTTPS (not sure if this is necessary?)
• Reproduced the example given by @piecesofuk locally.
• Reproduced the error reported in full mode. I did not get any problems in the normal editor view.

Looking at the markup for the page generated for the full view, it looks like the problem might be with the base attribute, which has an http rather than https protocol:

[jareddonovan]

The same problem also occurs in the 'embed' route, as shown in the following link to @piecesofuk's original example https://alpha.editor.p5js.org/embed/HkyBtEc8f

The routes for full and embed views are defined in /server/routes/embed.routes.js. Both just call serveProject from /server/controllers/embed.controller.js.

The actual base tag is generated in the following code in /server/controllers/embed.controller.js

const base = sketchDoc.createElement('base');
const fullUrl = `${req.protocol}://${req.get('host')}${req.originalUrl}`;
base.href = `${fullUrl}/`;

Forcing https rather than using ${req.protocol} here fixes the CORS error. However, there is another error with the link to the assets. On my local server, I end up with a link like https://localhost/sketches/Bk0oJZ8GQ/assets/sketches/Bk0oJZ8GQ/assets/assets/test.csv. If I edit this to https://localhost/sketches/Bk0oJZ8GQ/assets/assets/test.csv, I can load the file in the browser.

[jareddonovan]

Where I got to is that perhaps this is a configuration issue with Express.js, which is the web framework that the web editor uses. There is a configuration option that lets you trust a proxy: Express behind proxies

I set the following in /server/server.js:
app.set('trust proxy', true);

And it works okay. The base tag is correctly set with https as the protocol.

BUT - I don't know if this is the issue on the production server. @catarak - is there some kind of proxy server set up on production for https? Could this be the issue here? If so, then maybe the same 'trust proxy' config would work in production?

[catarak]

this has been fixed ✨