【发布时间】：2021-06-11 15:47:44
【问题描述】：
我正在尝试加载 SVG 以用作 CSS 过滤器，如 https://developer.mozilla.org/en-US/docs/Web/CSS/filter 中所述。我在应用程序的根域上托管 SVG，并且在使用 srcdoc 属性创建的 iframe 中使用所述 SVG。 iframe 加载的 html 作为字符串存储在我的主应用程序中。我使用 iframe 的原因是因为我在该 iframe 中呈现任意用户输入，并且我设置了沙盒属性（没有跨源请求并且无法访问根应用程序 cookie）。我收到以下错误：
Unsafe attempt to load URL http://localhost:3000/filter.svg from frame with URL about:srcdoc.
Domains, protocols and ports must match.
我尝试使用 URL.createObjectURL 函数并直接传递 svg，但仍然收到以下错误：
Not allowed to load local resource: blob:null/692e5c8b-f87e-49cd-9efd-68ee65e98ea6.svg
我什至尝试加载托管在与 iframe 相同的域中的 html 文件，但我仍然收到无法从 localhost 加载 URL localhost/filter.svg 的错误。我想这是正确的，因为沙盒不提供同源访问。
我的问题是如何在不移除同源沙盒的情况下实现过滤效果？我不明白为什么使用 css 的 url() 属性被认为是危险的跨域请求，但允许加载带有<img> 标签的图像...
没有答案的类似问题： XMLNS W3 URL for SVG spec now throwing error in Chrome
【问题讨论】：
标签： javascript css iframe cross-domain