如何使用 iframe 检查 html 是否安全？

Question

我从 API 串 html 代码中获取，其中可能包含来自以下服务的嵌入式视频：

youtube.com,
vimeo.com,
dailymotion.com,
prezi.com

如果我确定它足够安全，我可以将它们转换为受信任的 SafeHtml（绕过 Angular 的消毒剂）：

this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.htmlFromApi);

然后将其放在这样的页面上：

<div [innerHtml]="safeHtml"></div>

问题：

我必须执行哪些检查以确保此字符串足够安全？（它不包含嵌入式脚本，并且只导向这四个站点之一，没有任何棘手的重定向）?
以某种方式将这些网站添加到 Angular 的消毒剂例外中是否有意义？是的话怎么办？

提前致谢！

p.s。我看到了这个类似的问题：How to check if string of HTML is safe? 但我希望有一些更新鲜且与 Angular 最佳实践相关的东西

Answer 1

虽然不是 angular 具体答案；您希望在您的网站上设置 Content Security Policy header，只允许通过 (i)frames 访问某些网站。

示例：

Content-Security-Policy: 
         default-src 'self' https:; 
         script-src 'self' https:; 
         frame-src: https://*.youtube.com https://*.vimeo.com 
                    https://*.dailymotion.com https://*.prezi.com;

(Header 是 multi-lined 仅为了阅读清晰)

此 CSP 为您的网站设置了一些规则，以便：

默认只允许引用网站本身（“self”）并且只能通过 https。
脚本只能[安全访问]文件不能内联脚本，并且必须从同一网站调用这些文件。
(i)frames从网站只能调用指定的域名。我已将 Https 地址类型放在这里作为最佳做法，您还必须注意，这将*拒绝访问占位符 URL，例如 https://y2u.be ，但您可以根据需要添加这些变体。

上面的 CSP 声明完全符合您在问题中的要求，因此避免了通过 safeHtml 消毒剂过滤某些域的需要。

消毒剂可能仍然需要通过 - 不知何故 - 但我不知道 angular 所以无法回答这个细节。

Read more about the frame-src CSP directve.

编辑

如果用户使用 non-TLS 连接或者如果您的网站不受 TLS 保护，一个更灵活的示例，也包括一个短 URL 的示例：

Content-Security-Policy: 
         default-src 'self'; 
         script-src 'self'; 
         frame-src: https://*.youtube.com https://*.vimeo.com 
                    https://*.dailymotion.com https://*.prezi.com
                    http://*.youtube.com http://*.vimeo.com 
                    http://*.dailymotion.com http://*.prezi.com
                    https://youtu.be;

如何使用 iframe 检查 html 是否安全？

How to check if html with iframes is safe?

html-sanitizing

angular

angular-sanitizer

编辑