Configuración dinámica del atributo src de iframe en AngularJS

Cuando se trabaja con iframes en AngularJS, a menudo es necesario configurar el atributo src dinámicamente en función de un variable. Sin embargo, intentar hacerlo con una asignación estándar puede dar como resultado que se muestre un atributo src vacío en el iframe.

Comprensión del problema y la solución

El problema surge al intentar para establecer el atributo src con una URL que no sea de confianza. AngularJS implementa medidas de seguridad para evitar posibles ataques XSS (cross-site scripting). Para mitigar esto, se debe emplear el servicio $sce (escapado contextual estricto) para "confiar" en la URL antes de asignarla.

El método trustAsResourceUrl() del servicio $sce se puede usar para marcar explícitamente una URL como confiable, lo que garantiza que se puede utilizar de forma segura en una plantilla de AngularJS.

Implementación de código

En el archivo controladores/app.js proporcionado, inyecte el $sce service en AppCtrl y modifique la función setProject() de la siguiente manera:

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

En la plantilla HTML, actualice el atributo src del iframe para hacer referencia a la variable currentProjectUrl:

Explicación

Al llamar a trustAsResourceUrl(), la URL se marca como confiable y se puede usar de forma segura en la plantilla de AngularJS. La directiva ng-src luego establecerá el atributo src del iframe con la URL confiable.

Notas adicionales

• El método trustAsResourceUrl() solo debe usarse cuando se sabe que la URL es segura y confiable.
• Si la URL no está completamente calificada (por ejemplo, falta el esquema o el nombre de host), AngularJS puede generar una advertencia de seguridad.
• Para abordar problemas de seguridad , siempre es recomendable implementar una validación y desinfección adecuadas del lado del servidor antes de aceptar las URL proporcionadas por el usuario.