AngularJS에서 iframe의 src 속성을 동적으로 설정

AngularJS에서 iframe으로 작업할 때 src 속성을 동적으로 설정해야 하는 경우가 많습니다. 변하기 쉬운. 그러나 표준 할당을 사용하여 이를 시도하면 iframe에서 빈 src 속성이 렌더링될 수 있습니다.

문제 및 해결 방법 이해

이 문제는 시도할 때 발생합니다. 신뢰할 수 없는 URL로 src 속성을 설정합니다. AngularJS는 잠재적인 XSS(교차 사이트 스크립팅) 공격을 방지하기 위해 보안 조치를 구현합니다. 이를 완화하려면 $sce(Strict Contextual Escaping) 서비스를 사용하여 URL을 할당하기 전에 URL을 "신뢰"해야 합니다.

$sce 서비스의 trustAsResourceUrl() 메서드를 사용하여 URL을 명시적으로 표시할 수 있습니다. URL을 신뢰할 수 있으므로 AngularJS 템플릿에서 안전하게 사용할 수 있습니다.

코드 구현

제공된 Controllers/app.js 파일에 $sce를 삽입합니다. 서비스를 AppCtrl에 추가하고 setProject() 함수를 다음과 같이 수정합니다.

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

HTML 템플릿에서 currentProjectUrl 변수를 참조하도록 iframe의 src 속성을 업데이트합니다.

설명

trustAsResourceUrl()을 호출하면 해당 URL이 신뢰할 수 있는 것으로 표시되며 AngularJS 템플릿에서 안전하게 사용할 수 있습니다. 그런 다음 ng-src 지시문은 신뢰할 수 있는 URL로 iframe의 src 속성을 설정합니다.

추가 참고 사항

• trustAsResourceUrl() 메서드는 다음과 같은 경우에만 사용해야 합니다. URL은 안전하고 신뢰할 수 있는 것으로 알려져 있습니다.
• URL이 정규화되지 않은 경우(예: 체계 또는 호스트 이름 누락) AngularJS가 보안 경고를 표시할 수 있습니다.
• 보안 문제를 해결하기 위해 , 사용자 제공 URL을 수락하기 전에 항상 적절한 서버측 검증 및 삭제를 구현하는 것이 좋습니다.