AngularJS에서 변수의 iframe src 속성을 안전하게 설정하는 방법은 무엇입니까?

AngularJS 변수에서 iframe src 속성 설정

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

1. $sce 서비스 삽입

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

<code class="js">function AppCtrl($scope, $sce) {
  // ...
}</code>

2. 리소스 URL을 신뢰하세요

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

<code class="js">$scope.setProject = function (id) {
  $scope.currentProject = $scope.projects[id];
  $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}</code>

3. 템플릿 업데이트

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

<code class="html"><iframe ng-src="{{currentProjectUrl}}"> <!-- content --> </iframe></code>

예제 코드

<code class="js">function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

<code class="html"><ul ng-repeat="project in projects">
  <li ng-click="setProject(project.id)">{{project.name}}</li>
</ul>

<iframe ng-src="{{currentProjectUrl}}">
  Something wrong...
</iframe></code>

추가 참고 사항

• 신뢰할 수 없는 URL에는 $sce.trustSrc를 사용하세요.
• 해결 방법은 Cross-Site Scripting(XSS)을 방지하는 것입니다. ) URL이 안전한지 확인하여 공격합니다.

위 내용은 AngularJS에서 변수의 iframe src 속성을 안전하게 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!