如何在 AngularJS 中安全地设置变量的 iframe src 属性？

在 AngularJS 中从变量设置 iframe src 属性

在 AngularJS 中，尝试从以下位置设置 iframe 的 src 属性时可能会遇到问题一个变量。为了解决这个问题，这里有一个分步指南：

1。注入 $sce 服务

将 $sce（严格上下文转义）服务注入控制器以处理清理。

<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。
• 解决方案围绕防止跨站脚本 (XSS) ) 通过确保 URL 安全来进行攻击。

以上是如何在 AngularJS 中安全地设置变量的 iframe src 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！