Angular js errore “Blocked loading resource from url not allowed by $sceDelegate policy” [RISOLTO]

Nell’articolo di oggi vediamo come gestire i problemi CORS quando inseriamo un frame dentro a una vista parziale di AngularJS

L’errore appare con la seguente dicitura:

[$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.

Risoluzione del problema

01. Per prima cosa nel controller.js della vostra applicazione dobbiamo “passare” allo scope nella vista parziale il contenuto del frame. Per farlo usiamo $sce.trustAsResourceUrl che filtra di fatto potenziali url dannosi e imposta l’url come verified.

$scope.external_frame = $sce.trustAsResourceUrl(VariabileConUrl);

02. A questo punto nella vista parziale di AngularJS andiamo a visualizzare il nostro frame con ng-src in modo tale da poter usare Angular.

<iframe ng-if=”external_frame” ng-src=”{{external_frame}}”  width=”100%” frameborder=”0″ allowtransparency=”true” style=”margin:20px 0px;”></iframe>

NOTA: Dentro l’iframe ho aggiunto anche la funzionalità ng-if che di fatto fa apparire il frame solo se la variabile  external-frame è presente. Ovviamente questo è facoltativo.

03. Come ultimo step, nel nostro file app.js inseriamo la whitelist della nostra app di $sceDelegate

$sceDelegateProvider.resourceUrlWhitelist(['^(?:http(?:s)?:\/\/)?(?:[^\.]+\.)?\(vimeo|youtube|spotify)\.com(/.*)?$', 'self']);

Ovviamente sarà vostra premura aggiungere le vostre fonti “trusted” ovvero verificate all’interno dei vari “OR” dentro la parentesi.

Documentazione  $sceDelegate

Spero che questo articolo possa risolvere alcuni mal di testa 😉

Colgo l’occasione per augurare un Felice 2016 a tutti i lettori!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Aumentare la portata post su facebook

Aumentare la portata post su facebook