Definindo dinamicamente o atributo src do iframe no AngularJS

Ao trabalhar com iframes no AngularJS, muitas vezes é necessário definir o atributo src dinamicamente com base em um variável. No entanto, tentar fazer isso com atribuição padrão pode resultar na renderização de um atributo src vazio no iframe.

Compreendendo o problema e a solução

O problema surge ao tentar para definir o atributo src com uma URL não confiável. AngularJS implementa medidas de segurança para evitar possíveis ataques XSS (cross-site scripting). Para mitigar isso, o serviço $sce (Strict Contextual Escaping) precisa ser empregado para "confiar" na URL antes de atribuí-la.

O método trustAsResourceUrl() do serviço $sce pode ser usado para marcar explicitamente um URL como confiável, garantindo que ele possa ser usado com segurança em um modelo AngularJS.

Implementação de código

No arquivo controllers/app.js fornecido, injete o $sce service no AppCtrl e modifique a função setProject() da seguinte forma:

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}

No modelo HTML, atualize o atributo src do iframe para fazer referência à variável currentProjectUrl:

Explicação

Ao chamar trustAsResourceUrl(), o URL é marcado como confiável e pode ser usado com segurança no modelo AngularJS. A diretiva ng-src definirá o atributo src do iframe com o URL confiável.

Notas adicionais

• O método trustAsResourceUrl() só deve ser usado quando o URL é conhecido por ser seguro e confiável.
• Se o URL não estiver totalmente qualificado (por exemplo, faltando o esquema ou o nome do host), o AngularJS pode lançar um aviso de segurança.
• Para resolver questões de segurança , é sempre aconselhável implementar validação e higienização apropriadas no lado do servidor antes de aceitar URLs fornecidos pelo usuário.