加载 URL svg 的不安全尝试

Posted 2023-02-27

【中文标题】加载 URL svg 的不安全尝试

【英文标题】：Unsafe attempt to load URL svg

【发布时间】：2015-06-12 04:33:49

【问题描述】：

我在 Chrome 中尝试在我的本地文件系统上加载 SVG 时遇到错误：

不安全的尝试从带有 URL file:///C:/Users/Me/Documents/html/master 的框架加载 URL file:///C:/Users/Me/Documents/HTML/icons.svg#menu .html。域、协议和端口必须匹配。

这是我的 HTML：

<svg id="icon-menu" viewBox="0 0 70 60">
   <use xlink:href="icons.svg#menu"></use>
</svg>

和 SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 70 70">
  <g
     id="menu">
    <path
       d="m 10,15 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,30 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
    <path
       d="m 10,45 50,0"
       style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
  </g>
</svg>

我在互联网上搜索过，但我能找到的唯一解决方案是针对已经用 javascript 编写的代码，但事实并非如此。上面的 HTML 在 IE 中不起作用，没有错误，但在 Firefox 中可以正常工作。

【参考方案1】：

这个页面有所有的答案，我相信：

https://css-tricks.com/svg-use-external-source/

除非您使用 polyfill，否则它无法在 IE 上运行。 页面下方的评论描述了 Chrome 在本地运行时出现的问题：

如果您不使用服务器进行开发，则在本地开发时可能会遇到一些跨域问题。

【讨论】：

Chrome 现在似乎有一个真正的问题（7/3-16）。似乎这是一个与浏览器相关的错误。

如果您不使用 CodeKit，有什么解决办法？我在 Windows 10 x64 上使用 WAMP。

也许这个话题有一些额外的答案：***.com/q/8449716/3168107.

Chrome 在 localhost 上显示，但在 mydomain.dev 之类的人造域上没问题

【参考方案2】：

正如我在davidwells.io 上写的（在这个页面上也是他的 Javascript 解决问题的方法）：

我在使用外部 SVG 文件时遇到了同样的问题。我不得不更改虚拟服务器的配置并停止将 SVG 请求从 HTTP 自动重定向到 HTTPS。换句话说：SVG 文件必须在两种协议上都可用。现在它工作了。

【参考方案3】：

使用 express.js 或 apache 或 nginx 等服务器为您提供所需的文件，最好是 svg sprite，其中包含您需要的所有图像，以便您可以像这样在模板或前端引用它们

<svg style="color: red;">
    <use xlink:href="solid.svg#ad"></use>
</svg>

如果您像这样在 server.js 文件中使用 express.js，则在后端，

app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));

^ 引用 svg sprite 所在的静态目录 ，这样您就可以避免 CORS 问题。另一种方法是使用 ajax 设置标题，我上面的另一个人已经发布了指向 css-tricks 的链接。