角度$sce阻止了我的音频斑点源

Angular $sce blocking my audio blob src

本文关键字：我的 音频 斑点 sce 角度      更新时间：2023-09-26

我正在尝试将角度ngRepeat与html5音频标签一起使用。我有html：

    <li ng-repeat="recordings in recordinglist">
        <audio controls ng-src="{{recordings}}"></audio>
   </li>

和 JS：

    $scope.$apply($scope.recordinglist.push("blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727"));

但是 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

这似乎很愚蠢。它不是插值本地资源。我想有一种方法可以正确执行此操作 - 或者我应该提交错误报告？

我之前尝试为 webrtc 视频显示 blob src 时遇到了同样的问题，我通过使用$sce服务修复了它：

angular.module('moduleName', ['ngSanitize'])
.controller('ctrName', ['$sce', function($sce) {
  $scope.recordings = $sce.trustAsResourceUrl(recordings);
}])

您也可以在此处查看文档。

对我来说，以下内容解决了这个问题：

$sce.trustAsResourceUrl

在此处查看SO问题并有更详细的解释

我的 blob 图像也遇到了类似的问题......试试这个：

基本上它允许 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):/);
}]);

解决此问题的最佳方法是创建受信任的筛选器。

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

并在 ng-src 中使用此过滤器。

<li ng-repeat="recordings in recordinglist">
    <audio controls ng-src="{{recordings |trusted}}"></audio></li>

从文件读取器获取 Blob 时，可能需要添加$scope.$apply()来触发监视并相应地绑定。

InitRecording = function() {
    var reader = new FileReader();
    reader.onload = function() {
        audioSRC = $sce.trustAsResourceUrl(reader.result);
        $scope.$apply();
    };
    reader.readAsDataURL(recordedBlob);
}
相关文章：