javascript - que - ng-cloak not working

Recursos externos no cargados por AngularJs

Question

Al usar Angular y Phonegap, intento cargar un video que está en un servidor remoto pero encontré un problema. En mi JSON, la URL se ingresa como una URL HTTP simple.

"src" : "http://www.somesite.com/myvideo.mp4"

Mi plantilla de video

 <video controls poster="img/poster.png">
<source ng-src="{{object.src}}" type="video/mp4"/>
</video>

Todos mis otros datos se cargan pero cuando miro mi consola, obtengo este error:

Error: [$interpolate:interr] Can''t interpolate: {{object.src}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL

Intenté agregar $compileProvider en mi configuración, pero no resolvió mi problema.

$compileProvider.aHrefSanitizationWhitelist(/^/s*(https?|ftp|mailto|file|tel):/);

Vi esta publicación sobre problemas de dominio cruzado, pero no estoy seguro de cómo resolver esto o en qué dirección debo ir. ¿Alguna idea? Cualquier ayuda es apreciada

Answer 1

Incluir en la lista blanca el recurso con $ sceDelegateProvider

Esto es causado por una nueva política de seguridad puesta en marcha en Angular 1.2. Hace que XSS sea más difícil al evitar que un hacker marque (es decir, hacer una solicitud a una URL extranjera, que posiblemente contenga una carga útil).

Para evitarlo correctamente, debe incluir en la lista blanca los dominios que desea permitir, como este:

angular.module(''myApp'',[''ngSanitize'']).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
''self'',
// Allow loading from our assets domain. Notice the difference between * and **.
''http://srv*.assets.example.com/**''
]);
// The blacklist overrides the whitelist so the open redirect here is blocked.
$sceDelegateProvider.resourceUrlBlacklist([
''http://myapp.example.com/clickThru**''
]);
});

Este ejemplo se elimina de la documentación que puede leer aquí:

https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

Asegúrese de incluir ngSanitize en su aplicación para que esto funcione.

Desactivando la función

Si desea desactivar esta útil función y está seguro de que sus datos están seguros, simplemente puede permitir **, así:

angular.module(''app'').config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([''**'']);
});

Answer 2

Esta es la única solución que funcionó para mí:

var app = angular.module(''plunker'', [''ngSanitize'']);
app.controller(''MainCtrl'', function($scope, $sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
$scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

Luego en un iframe:

<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">

http://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

Answer 3

La mejor y más fácil solución para resolver este problema es pasar sus datos desde esta función en el controlador.

$scope.trustSrcurl = function(data)
{
return $sce.trustAsResourceUrl(data);
}

En la página html

<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrcurl(video.src)}}" allowfullscreen frameborder="0"></iframe>

Answer 4

Me encontré con el mismo problema usando Videogular. Obtuve lo siguiente al usar ng-src:

Error: [$interpolate:interr] Can''t interpolate: {{url}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy

Solucioné el problema escribiendo una directiva básica:

angular.module(''app'').directive(''dynamicUrl'', function () {
return {
restrict: ''A'',
link: function postLink(scope, element, attrs) {
element.attr(''src'', scope.content.fullUrl);
}
};
});

El html:

 <div videogular vg-width="200" vg-height="300" vg-theme="config.theme">
<video class=''videoPlayer'' controls preload=''none''>
<source dynamic-url src='''' type=''{{ content.mimeType }}''>
</video>
</div>

Answer 5

Otra solución simple es crear un filtro:

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

Luego especifique el filtro en ng-src :

<video controls poster="img/poster.png">
<source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>

Answer 6

Según el mensaje de error, su problema parece estar relacionado con la interpolación (generalmente su expresión {{}} ), no con un problema entre dominios. Básicamente ng-src="{{object.src}}" apesta.

ng-src fue diseñado con la etiqueta img en mente IMO. Puede que no sea apropiado para <source> . Ver http://docs.angularjs.org/api/ng.directive:ngSrc

Si declara <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> , estará funcionando, ¿verdad? (Tenga en cuenta que elimino ng-src a favor de src ). De lo contrario, se debe corregir primero.

Luego, asegúrese de que {{object.src}} devuelva el valor esperado ( fuera de <video> ):

<span>{{object.src}}</span>
<video>...</video>

Si devuelve el valor esperado, la siguiente declaración debería estar funcionando:

<source src="{{object.src}}"; type="video/mp4"/> //src instead of ng-src

Answer 7

Si alguien está buscando una solución de TypeScript:

archivo .ts (cambie las variables donde corresponda):

module App.Filters {
export class trustedResource {
static $inject:string[] = [''$sce''];
static filter($sce:ng.ISCEService) {
return (value) => {
return $sce.trustAsResourceUrl(value)
};
}
}
}
filters.filter(''trustedResource'', App.Filters.trusted.filter);

Html:

<video controls ng-if="HeaderVideoUrl != null">
<source ng-src="{{HeaderVideoUrl | trustedResource}}" type="video/mp4"/>
</video>

Answer 8

Tenía el mismo problema aquí. Necesitaba unirme a los enlaces de Youtube. Lo que funcionó para mí, como solución global , fue agregar lo siguiente a mi configuración:

.config([''$routeProvider'', ''$sceDelegateProvider'',
function ($routeProvider, $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([''self'', new RegExp(''^(http[s]?):////(w{3}.)?youtube/.com/.+$'')]);
}]);

Agregar ''self'' allí es importante; de ​​lo contrario, no se enlazará a ninguna URL. De los documentos angulares

''self'': la cadena especial, ''self'', se puede usar para hacer coincidir todas las URL del mismo dominio que el documento de la aplicación utilizando el mismo protocolo.

Con eso en su lugar, ahora puedo enlazar directamente a cualquier enlace de Youtube.

Obviamente tendrá que personalizar la expresión regular según sus necesidades. ¡Espero eso ayude!

Answer 9

Tuve este error en las pruebas , la directiva templateUrl no era confiable, pero solo para la especificación, así que agregué el directorio de la plantilla:

beforeEach(angular.mock.module(''app.templates''));

Mi directorio principal es app