在 URL 值属性中使用 AngularJS 标记¶

ID: js/angular/expression-in-url-attribute
Kind: problem
Security severity: 
Severity: warning
Precision: very-high
Tags:
   - maintainability
   - frameworks/angularjs
Query suites:
   - javascript-security-and-quality.qls

点击查看 CodeQL 存储库中的查询

不建议在引用 URL 的 HTML 属性中使用 AngularJS 标记（即用双花括号括起来的 AngularJS 表达式）：浏览器可能会在 AngularJS 编译器评估标记之前尝试获取 URL，从而导致对无效 URL 的请求。

虽然这不是一个严重的问题，但它会降低用户体验，因为例如，页面在加载时可能会显示损坏的图像链接。

建议¶

使用相应的 AngularJS 属性：`ng-src` 而不是 `src`、`ng-href` 而不是 `href`，以及 `ng-srcset` 而不是 `srcset`。

示例¶

以下示例代码片段从包含 AngularJS 表达式 `{{item._id}}` 的 URL 加载图像。

<img src="#/resources/pics/{{item._id}}">

在页面加载时间之前，AngularJS 已完全初始化，浏览器可能会尝试从未评估的 URL `#/resources/pics/{{item._id}}` 加载图像，这很可能会失败，并导致图像链接损坏。稍后，当 AngularJS 加载后，AngularJS 编译器将评估表达式 `{{item._id}}` 并将其替换为其值，这将导致浏览器重新加载图像。

为避免链接损坏和重新加载，请使用 AngularJS 特定的属性 `ng-src`

<img ng-src="#/resources/pics/{{item._id}}">

参考¶

AngularJS API 参考：ngHref.
AngularJS API 参考：ngSrc.
AngularJS API 参考：ngSrcset.

©GitHub, Inc.
条款
隐私