Question

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

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

使用谷歌浏览器测试它（不涉及Web服务器 - 从项目根文件夹运行index.html，我收到以下错误日志：

SinglePageApplication1.min.js：42 Uncaught SecurityError：无法在'WebGLRenderingContext'上执行'texImage2D'：file：/// E：/R/playground/ConsoleApplication7/SinglePageApplication1/mandel.jpg上的跨源图像可能不加载。

另一方面，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是一个私人文档，您也会将其保存在那里。所以Chrome说nope，无法访问它。

出于开发目的，您有两个选项，详见here：

通过使用--allow-file-access-from-files标记
在本地网络服务器（Suave或IIS）上安装SPA并通过http://localhost/

websharper webgl演示安全问题？

1 个答案: