google-chrome - webshaper webgl 演示安全问题？

Question

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

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 对其进行测试(不涉及网络服务器 - 从项目根文件夹运行 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 成功运行并产生预期结果。

现在，我当然想知道，与其余路径相同的 .jpg 如何在 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 是您也保存在那里的私有(private)文档。所以 Chrome 说不，无法访问该内容。

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

1. 通过使用 --allow-file-access-from-files 标志启动 Chrome 来禁用安全措施

2. 在本地网络服务器(Suave 或 IIS)上安装 SPA 并通过 http://localhost/

   访问它