javascript Angular $sce 阻止我的音频 blob src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19729537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular $sce blocking my audio blob src
提问by Stevo
I am trying to use angular ngRepeat with the html5 audio tag. I have the html:
我正在尝试将 angular ngRepeat 与 html5 音频标签一起使用。我有 html：
<li ng-repeat="recordings in recordinglist">
<audio controls ng-src="{{recordings}}"></audio>
</li>
and the js:
和js：
$scope.$apply($scope.recordinglist.push("blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727"));
But angular's same origin checking is causing an error to be thrown on interpolation:
但是 angular 的同源检查导致在插值时抛出错误：
Error: [$interpolate:interr] Can't interpolate: {{recordings}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727
This just seems silly. It's not interpolating a local resource. I imagine there's a way to do this correctly - or should I file a bug report?
这看起来很愚蠢。它不是插入本地资源。我想有一种方法可以正确执行此操作 - 还是应该提交错误报告？
回答by fraserxu
I have the same problem when trying to display a blob src for webrtc video before, and I fixed it by using $sceservice:
我之前尝试为 webrtc 视频显示 blob src 时遇到了同样的问题，我使用$sce服务修复了它：
angular.module('moduleName', ['ngSanitize'])
.controller('ctrName', ['$sce', function($sce) {
$scope.recordings = $sce.trustAsResourceUrl(recordings);
}])
You may also check the doc here.
您也可以在此处查看文档。
回答by elewinso
回答by Endless
Faced a similar problem with my blob images... Try this:
我的 blob 图像遇到了类似的问题......试试这个：
Basically it allows any blob image in src
基本上它允许 src 中的任何 blob 图像
app.config( ['$compileProvider', function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob):/);
// another sample to allow diffrent kinds of url in <a>
// $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);
回答by Hassan Siddique
Best way to solve this is to create a trusted filter.
解决此问题的最佳方法是创建受信任的过滤器。
app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};}]);
And Use this filter in ng-src.
并在 ng-src 中使用此过滤器。
<li ng-repeat="recordings in recordinglist">
<audio controls ng-src="{{recordings |trusted}}"></audio></li>
回答by Mahesh
When getting the blob from a file reader, you might have to add $scope.$apply()to trigger the watch and bind accordingly.
从文件读取器获取 blob 时，您可能需要添加$scope.$apply()以触发监视并相应地绑定。
InitRecording = function() {
var reader = new FileReader();
reader.onload = function() {
audioSRC = $sce.trustAsResourceUrl(reader.result);
$scope.$apply();
};
reader.readAsDataURL(recordedBlob);
}
