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.
Spero che questo articolo possa risolvere alcuni mal di testa 😉
Colgo l’occasione per augurare un Felice 2016 a tutti i lettori!
