websharper webgl demo security issue?

Playing a bit with websharper and tried to get the webgl demo running on my system. I modified the given demo code such that I can use it in a SinglePage Application. Also, I changed the texture used by demo to a texture I actually have on my system.

let MakeAndBindTexture (gl : WebGL.RenderingContext) f =
    Img []
    |>! Events.OnLoad (fun img ev ->
        let tex = gl.CreateTexture()
        gl.ActiveTexture(gl.TEXTURE0)
        gl.BindTexture(gl.TEXTURE_2D, tex)
        gl.PixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
        gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.Dom)
        gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
        gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
        f ())
    |> fun img -> img -< [Attr.Src "mandel.jpg"] // <<-- located in project root
    |> ignore

Testing it with google chrome, (no web server involved - running index.html from project root folder, I get the following error log:

SinglePageApplication1.min.js:42 Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///E:/R/playground/ConsoleApplication7/SinglePageApplication1/mandel.jpg may not be loaded.

Microsoft Edge, on the other hand successfully runs and produces the expected outcome.

Now, of course I wonder, how a .jpg in the same path as the rest can cause a security error in google chrome.

Also, I wonder if I have a chance to make it run in google chrome, somehow...

I also tried other locations for the mandel.jpg, for example next to the ...min.js file. But all locations produced the same error.

Solution

Chrome enforces a very strict same-origin policy on local web pages in order to protect you from attacks where you may open a malicious webpage locally, for example because someone sent it to you as an email attachment.

In other words, suppose that the file SinglePageApplication1.min.js had been sent to you by an untrusted source. Should it be permitted to load (and potentially spy on / modify) the file mandel.jpg? Maybe you simply happened to put the .js file in your Documents folder, and mandel.jpg is a private document which you also kept stored there. So Chrome says nope, can't access that.

For development purposes, you have two options, as detailed here:

Disable the security measure by starting Chrome with the --allow-file-access-from-files flag
Install your SPA on a local webserver (Suave or IIS) and access it through http://localhost/