websharper webgl 演示安全问题？

Question

尝试使用 websharper 并尝试在我的系统上获取 webgl 演示运行ning。我修改了给定的演示代码，以便我可以在 SinglePage 应用程序中使用它。另外，我将演示使用的纹理更改为我系统上实际拥有的纹理。

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

使用 google chrome 对其进行测试，（不涉及 Web 服务器 - 运行ning index.html 来自项目根文件夹，我收到以下错误日志：

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 成功运行s 并产生了预期的结果。

现在，我当然想知道，与其他路径相同的 .jpg 怎么会在 google chrome 中导致安全错误。

此外，我想知道我是否有机会在 google chrome 中做到运行，不知何故...

我还尝试了 mandel.jpg 的其他位置，例如 ...min.js 文件旁边。但是所有位置都产生了相同的错误。

Answer 1

Chrome 对本地网页 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.

执行非常严格的同源策略

换句话说，假设文件 SinglePageApplication1.min.js 是由不受信任的来源发送给您的。是否应该允许加载（并可能监视/修改）文件 mandel.jpg？也许您只是碰巧将 .js 文件放在您的 Documents 文件夹中，而 mandel.jpg 是您也保存在那里的私人文档。所以 Chrome 说不，无法访问它。

出于开发目的，您有两种选择，详情如下 here:

通过使用 --allow-file-access-from-files 标志启动 Chrome 来禁用安全措施
在本地网络服务器（Suave 或 IIS）上安装您的 SPA，并通过 http://localhost/

websharper webgl 演示安全问题？

websharper webgl demo security issue?

f#

google-chrome

webgl

websharper