为什么这个过滤器不输出IFRAME ?

Why isn't this filter outputting IFRAME?

本文关键字：输出 IFRAME 过滤器 为什么      更新时间：2023-09-26

我试图自动嵌入youtube视频用户生成的内容。我的过滤器一般会查找链接，然后测试它们是否为有效的YouTube视频。如果是，它应该用标准的iframe代码嵌入视频。如果不是，它只是一个链接。但是，过滤器根本不输出iframe代码。我假设这有一些东西可以防止跨站点脚本攻击，但我不知道如何绕过它。

function ytVidId(url) {
  var p = /^(?:https?:'/'/)?(?:www'.)?(?:youtu'.be'/|youtube'.com'/(?:embed'/|v'/|watch'?v=|watch'?.+&v=))(('w|-){11})(?:'S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}
myapp.filter('parseUrls', function() {
    //with protocol
    var urlPattern = /(http|ftp|https):'/'/['w-]+('.['w-]+)+(['w.,@?^=%&:'/~+#-]*['w@?^=%&'/~+#-])?/gi;
    return function(text, target, otherProp) {        
        if (text == null) {
            return "";
        }
        angular.forEach(text.match(urlPattern), function(url) {
            if(ytVidId(url)){
                text = text.replace(url, '<div class="video-container"><iframe src="//www.youtube.com/embed/'+ ytVidId(url) +'" frameborder="0" width="560" height="315"></iframe></div>');
            }else{
                text = text.replace(url, '<a target="' + target + '" href='+ url + '>' + url + '</a>');
            }
        });
        return text;        
    };
})
在使用:

<span ng-bind-html="p.body | noHTML | newlines | parseUrls:'_blank'"></span>

Angular要求你通过'sce'(严格上下文转义)提供程序传递HTML。

关于SCE提供程序的文档在这里

所以它看起来像这样(未经测试，但理论上应该)

function ytVidId(url) {
  var p = /^(?:https?:'/'/)?(?:www'.)?(?:youtu'.be'/|youtube'.com'/(?:embed'/|v'/|watch'?v=|watch'?.+&v=))(('w|-){11})(?:'S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}    
myapp.filter('parseUrls', ['$sce', function() {
    //with protocol
    var urlPattern = /(http|ftp|https):'/'/['w-]+('.['w-]+)+(['w.,@?^=%&amp;:'/~+#-]*['w@?^=%&amp;'/~+#-])?/gi;
    return function(text, target, otherProp) {        
        if (text == null) {
            return "";
        }
        angular.forEach(text.match(urlPattern), function(url) {
            if(ytVidId(url)){
                text = text.replace(url, $sce.trustAs('html', '<div class="video-container"><iframe src="//www.youtube.com/embed/'+ ytVidId(url) +'" frameborder="0" width="560" height="315"></iframe></div>'));
            }else{
                text = text.replace(url, $sce.trustAs('html', '<a target="' + target + '" href='+ url + '>' + url + '</a>'));
            }    
        });
        return text;        
    };
}])`
相关文章：