AngularJS问题：无法将变量中的YouTube嵌入URL设为iframe的src

哈哈，这个坑我踩过好几次！问题出在Angular（从你用的ng-hide、ng-src指令来看是AngularJS）的**Strict Contextual Escaping (SCE)**安全机制上，和你用src还是ng-src没关系～

核心原因 #

Angular默认会对绑定到ng-src这类资源属性的URL做安全校验。YouTube的嵌入URL属于第三方外部资源，Angular会默认判定它为“不安全”——哪怕你能在<li>标签里正常看到URL文本，Angular也不会真正把值赋值给iframe的src属性，这是它防止XSS攻击的保护机制。

解决步骤：标记URL为可信资源 #

你需要显式告诉Angular这个YouTube嵌入URL是安全的，下面是两种常用实现方式：

方式1：控制器内处理（适合单一组件场景）

先在控制器中注入$sce服务，再写一个方法返回经过安全标记的URL：

// 假设你的控制器结构如下
app.controller('YourController', function($scope, $sce) {
  // 将视频URL标记为可信资源
  $scope.getTrustedVideoUrl = function() {
    if ($scope.entry && $scope.entry.videoLocation) {
      return $sce.trustAsResourceUrl($scope.entry.videoLocation);
    }
    return null;
  };
});

然后修改模板中的ng-src绑定：

<iframe ng-hide="entry.videoLocation == null" width="560" height="315" ng-src="{{getTrustedVideoUrl()}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<li>VL: {{entry.videoLocation}}</li>

方式2：自定义过滤器（适合全局复用场景）

如果多个组件都需要处理这类资源URL，写个全局过滤器更高效：

app.filter('trustAsResourceUrl', ['$sce', function($sce) {
  return function(url) {
    return url ? $sce.trustAsResourceUrl(url) : null;
  };
}]);

模板里直接通过过滤器处理URL：

<iframe ng-hide="entry.videoLocation == null" width="560" height="315" ng-src="{{entry.videoLocation | trustAsResourceUrl}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<li>VL: {{entry.videoLocation}}</li>

为什么文本显示正常但src不生效？ #

Angular对文本节点和资源属性的安全策略不同：文本节点的插值（比如<li>里的{{entry.videoLocation}}）只会做基础HTML转义，不会阻止内容显示；但src、ng-src这类涉及外部资源加载的属性，会触发SCE的严格校验，必须显式标记可信才能生效。

内容的提问来源于stack exchange，提问作者quantumbutterfly