What is the most efficient way of assigning all my HTML5 video sources as trusted without having to loop over all of them

In AngularJS applications, you can efficiently trust all HTML5 video sources by configuring the $sceDelegateProvider in your app's config phase. This eliminates the need to loop through individual video elements.

Understanding SCE (Strict Contextual Escaping)

AngularJS uses SCE to prevent XSS attacks by restricting resource URLs. Video sources must be explicitly trusted or whitelisted to load properly.

Global Video Source Whitelisting

Configure trusted video sources globally in your application module:

app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads
        'self',
        
        // Allow loading from media domains
        'http://media.w3.org/**',
        'https://media.w3.org/**',
        
        // Allow CDN sources
        'https://cdn.example.com/**',
        
        // Allow YouTube embeds
        'https://www.youtube.com/**'
    ]);
});

Whitelist Pattern Examples

Alternative: Using $sce.trustAsResourceUrl

For dynamic URLs, you can trust individual sources programmatically:

app.controller('VideoController', function($scope, $sce) {
    $scope.videoUrl = $sce.trustAsResourceUrl('https://example.com/video.mp4');
});

Complete Example

var app = angular.module('videoApp', []);

app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'https://media.w3.org/**',
        'https://cdn.example.com/**'
    ]);
});

app.controller('VideoController', function($scope) {
    $scope.videos = [
        '/local/video1.mp4',
        'https://media.w3.org/video2.mp4',
        'https://cdn.example.com/video3.mp4'
    ];
});

Key Benefits

This approach provides several advantages:

• Performance: No runtime loops needed
• Maintainability: Single configuration point
• Security: Controlled whitelist of trusted domains
• Scalability: Handles unlimited video sources automatically

Conclusion

Using $sceDelegateProvider.resourceUrlWhitelist() in your app config is the most efficient way to trust multiple video sources globally. This eliminates individual URL validation loops while maintaining security through domain whitelisting.