3

我从可能包含来自以下服务的嵌入式视频的 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 的消毒剂的例外中是否有意义？如果是，该怎么做？

提前致谢！

ps 我看到了类似的问题：如何检查 HTML 字符串是否安全？ 但我希望有一些更新鲜和与 Angular 最佳实践相关的东西

4

1 回答 1

2

虽然不是角度特定的答案；您希望网站上有一个内容安全策略标头，仅允许通过 (i) 框架访问某些网站。

例子：

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过滤器。

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

阅读有关frame-srcCSP 指令的更多信息。

编辑

如果用户使用非 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;
于 2017-08-08T20:30:44.070 回答