2

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.

BitTickler
  • 10,905
  • 5
  • 32
  • 53

1 Answers1

2

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:

  1. Disable the security measure by starting Chrome with the --allow-file-access-from-files flag

  2. Install your SPA on a local webserver (Suave or IIS) and access it through http://localhost/

piaste
  • 2,038
  • 11
  • 20
  • Makes sense - the answer but in my eyes, this is a very random decision they made. So server-less html is okay until it loads...um... no... script loading works... and... css file loading works...but no way loading an image? They should get over it, in my opinion and refuse to load anything from local file system. – BitTickler Apr 18 '16 at 19:42
  • The problem is *who* is doing the loading. Chrome trusts *its own rendering engine* to load and display a file without doing anything malicious (duh), but it has no idea what some random script is *really* doing. So an `` tag sourcing a different file would display just fine, but a script could neither load an image directly nor access the content of that tag (which has a different origin). – piaste Apr 18 '16 at 20:30
  • What he said but **DONT USE THAT FLAG!!! THERE'S A REASON IT EXISTS*" You don't need giant painful to install servers like Suave or IIS. If you're on linux or OSX just cd to the folder with your files and type `python -m SimpleHTTPServer`. If you're on any OS another option is [devd](https://github.com/cortesi/devd). Super Simple. A small file, it just works. – gman Apr 19 '16 at 10:20