Angular $sce 阻止了我的音频 blob src

Posted 2023-03-05

【中文标题】Angular $sce 阻止了我的音频 blob src

【英文标题】：Angular $sce blocking my audio blob src

【发布时间】：2013-11-12 19:37:27

【问题描述】：

我正在尝试将角度 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

这看起来很愚蠢。它不是插入本地资源。我想有办法正确地做到这一点 - 还是我应该提交错误报告？

【问题讨论】：

你试过用$sce.trustAsResourceUrl()包裹你的网址吗？

这有什么更新吗？你找到解决办法了吗？我也有类似的问题。

我作弊了。它用于一些原型设计，所以我只是把它放在 .config '$sceProvider.enabled(false);'

【参考方案1】：

我的 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):/);
]);

【参考方案2】：

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

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

您也可以check the doc here。

【参考方案3】：

对我来说，以下解决了问题：

$sce.trustAsResourceUrl

请参阅带有更详细说明的 SO 问题here

【参考方案4】：

解决此问题的最佳方法是创建可信过滤器。

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>

【讨论】：

这违背了 SCE 的全部目的。最好禁用它，而不是创建一个任何 html 都可以恶意注入页面的过滤器。

【参考方案5】：

从文件阅读器获取 blob 时，您可能需要添加 $scope.$apply() 以触发监视并进行相应的绑定。

InitRecording = function() 
    var reader = new FileReader();
    reader.onload = function() 
        audiosRC = $sce.trustAsResourceUrl(reader.result);
        $scope.$apply();
    ;
    reader.readAsDataURL(recordedBlob);

【讨论】：

你不需要 FileReader...如果你仔细看你会发现用户使用URL.createObjectURL(blob)创建了一个blob url

没错，如果您使用的是 FileReader，但仍然面临与 '$sce' 相同的错误，则需要调用 $apply 来触发监视变量更改