Protocol Relative URLs Don't Resolve Securely via ImageWorker

[markus101]

If a protocol relative URL is provided to ImageWorker from WebPlatform.loadSrcTexture the image is loaded via http even if the app is loaded via https.

Changing https://github.com/WebPlatformForEmbedded/Lightning/blob/a6ba01b5a4ed9867859e05577b7085d36a6ad765/src/platforms/browser/WebPlatform.mjs#L69

to

let finalSrc = src;

if (/^\/\//.test(finalSrc)) {
  finalSrc = window.location.protocol + src;
}

const image = this._imageWorker.create(finalSrc);

I've implemented a workaround (read monkeypatch) for this in the app I'm working on, but since WebPlatform isn't exported it's not pretty. In addition to fixing the underlying issue, please consider exporting WebPlatform so it could be extended and passed in as a stage option instead of having to copy it.

I can also PR the proposed fixes if you'd like, but I wanted to file the issue first.

[g-zachar]

Hi @markus101

Thank you for reporting the issue. Can you share example that showcases the issue? I did not spot any mixed content issues when trying to reproduce it myself.

Best regards

[markus101]

Using the built-in editor on https://webplatformforembedded.github.io/Lightning/docs/textures/image

Set the code to:

class BasicUsageExample extends lng.Application {
    
    static _template(){
        return {
            UsingShorthand:{ x: 250, y: 100, src: '//webplatformforembedded.github.io/Lightning/img/LngDocs_LilLightningIdle.png' },
            UsingTexture:{ x: 250, y: 300, texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png'}}
        };
    }
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: true}};
const app = new BasicUsageExample(options);
document.body.appendChild(app.stage.getCanvas());

At that point neither image loads, the first because a protocol relative URL attempts to load via http and the second I assume is because root relative paths aren't supported. useImageWorker: true is also important, this only fails with the image worker.

I saw another issue that pointed to this commit: 2327943 (that hasn't been merged in) but that wouldn't address the root relative path, but this should:

const isRelative = /^\/[^\/]/;
if (isRelative.test(src)) {
  src = window.location.origin + src;
}

[g-zachar]

Hi @markus101,

Thanks for providing example. You are right, this is indeed an issue. While relative protocol urls are not so widely utilised, it still makes sense to handle them properly.

Best regards