如何检查带有 iframe 的 html 是否安全？

Question

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

• youtube.com，
• vimeo.com,
• dailymotion.com，
• prezi.com

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

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

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

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

问题：

1. 我必须执行哪些检查以确保该字符串足够安全？ （它不包含嵌入式脚本，并且只指向这四个站点之一，没有任何棘手的重定向）？

2. 以某种方式将这些站点添加到 Angular 的 sanitizer 异常中是否有意义？如果是的话怎么办？

提前致谢！

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

Answer 1

虽然不是角度特定的答案；你想在你的网站上有一个Content Security Policy 标题，只允许通过 (i)frames 访问 cerain 网站。

例子：

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;

（标题是多行的，只是为了阅读清晰）

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

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

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

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

Read more about the frame-src CSP directve.

编辑

如果用户使用非 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;