AngularJS의 변수에서 iframe src 속성 설정

AngularJS에서 iframe의 src 속성을 설정하려고 할 때 문제가 발생할 수 있습니다. 변수. 이 문제를 해결하기 위한 단계별 가이드는 다음과 같습니다.

1. $sce 서비스 삽입

$sce(Strict Contextual Escaping) 서비스를 컨트롤러에 삽입하여 삭제를 처리합니다.

function AppCtrl($scope, $sce) {
  // ...
}

2. 리소스 URL을 신뢰하십시오.

컨트롤러 내에서 $sce.trustAsResourceUrl을 사용하여 URL이 안전한지 확인하세요.

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

3. 템플릿 업데이트

템플릿에서 ng-src 속성을 신뢰할 수 있는 URL 변수에 바인딩합니다.

예 코드

function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

  
{{project.name}}

추가 참고 사항

• 신뢰할 수 없는 URL에는 $sce.trustSrc를 사용하세요.
• 해결책은 교차 사이트 방지를 중심으로 이루어집니다. URL이 안전한지 확인하는 스크립팅(XSS) 공격.