【问题标题】：iframe sandbox not loading foreign fontsiframe 沙箱不加载外来字体
【发布时间】：2015-07-17 23:40:17
【问题描述】：

所以我有一个包含 iFrame 的网络应用程序，它加载引导程序 glyphicons

index.html iframe 框架.html

Glyphicons 基本上是一种符号字体，您可以使用它来代替图像。这样做的好处是您可以在不拉伸的情况下更改尺寸，并且可以轻松更改颜色。

HTML5 允许您像 CSS3 一样简单地导入字体

示例：

@font-face {
 font-family: 'Glyphicons Halflings';   
 src: url('../fonts/glyphicons-halflings-regular.eot');
 src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
 format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') 
 format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') 
 format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') 
 format('svg');
}

当 iframe src 文件自行运行时，这可以正常工作。但是，当您将其加载到 **iframe sandbox** 时，它就会失败。

失败了

<iframe src="frame.html" sandbox="allow-scripts" />

但是，这行得通

<iframe src="frame.html" sandbox="allow-same-origin allow-scripts" />

allow-same-origin 对我来说是一个巨大的安全风险。

是否有我可以修改以允许字体的white-list 或black-list。似乎没有允许它的沙盒属性。

任何帮助将不胜感激

【问题讨论】：

因此，由于我找不到答案，我的破解方法是在 CSS 文件中嵌入字体。一个很好的工具是fontsquirrel.com/tools/webfont-generator专家模式
更正...它在同一个 html 文件中内联工作，但姊妹 css 文件不能工作

标签： javascript html css iframe

【解决方案1】：

非常老的问题，但对于遇到此问题的其他人，我猜你可能已经与 CORS 发生冲突。

您需要从服务器发送 Access-Control-Allow-Origin: *，或从 CDN 访问该字体。

【讨论】：