HTML5的Nonce属性怎么用？如何增强CSP安全性？
随着Web安全要求的不断提高，内容安全策略（CSP，Content Security Policy）已经成为防御跨站脚本攻击（XSS）的重要屏障。然而，传统的CSP配置往往在安全性与便利性之间难以平衡，特别是处理内联脚本时，很多开发者不得不使用unsafe-inline，这大大削弱了CSP的保护能力。HTML5的nonce属性应运而生，它为我们提供了一种既安全又灵活的方式来处理内联脚本和样式。
一、什么是Nonce？
Nonce是“Number used Once”的缩写，即一次性随机数。在HTML5和CSP的语境下，它是一个由服务器生成的、每次HTTP响应都不同的加密强随机字符串。通过将这个随机字符串同时写入CSP响应头和HTML的内联标签中，浏览器就能验证该内联脚本或样式是否由服务器合法生成，从而有效拦截恶意注入的脚本。
二、传统CSP的痛点
在没有Nonce之前，如果我们需要执行内联脚本，CSP的配置通常是这样的：
Content-Security-Policy: script-src 'self' 'unsafe-inline';
这里的unsafe-inline会允许页面上所有的内联脚本执行，包括黑客注入的XSS恶意代码，这使得CSP形同虚设。
三、Nonce属性怎么用？
使用Nonce属性主要分为三个步骤：
1. 服务器端生成随机字符串
在服务器端生成一个密码学安全的随机字符串（例如：random123）。注意，这个字符串必须在每次请求时重新生成，不能固定。
2. 在HTTP响应头中声明Nonce
将生成的随机字符串附加到CSP响应头中，格式为nonce-随机字符串。
Content-Security-Policy: script-src 'self' 'nonce-random123';
3. 在HTML标签中添加Nonce属性
将同样的随机字符串添加到需要执行的<script>或<style>标签的nonce属性中。
<script nonce="random123">
console.log("这是一个合法的内联脚本");
</script>此时，如果黑客试图在页面中注入一段脚本：
<script> // 黑客注入的脚本，没有正确的nonce stealCookies(); </script>
浏览器会发现该脚本的nonce属性与CSP头中的不匹配（或根本没有），从而拒绝执行这段恶意代码。
四、如何增强CSP安全性？
虽然Nonce解决了内联脚本的安全问题，但要真正发挥CSP的威力，还需要遵循以下最佳实践：
1. 彻底移除unsafe-inline
一旦启用了Nonce机制，就必须在CSP规则中移除unsafe-inline。现代浏览器在看到nonce-*时，会自动忽略unsafe-inline，但为了配置清晰和兼容老版本，应显式删除它，确保所有未带合法nonce的内联代码均被拦截。
2. 每次请求动态生成Nonce
Nonce的核心理念是“一次性”。如果Nonce是固定写在代码里的，黑客只需在注入的脚本里也写上这个固定的Nonce即可绕过防御。必须在服务器端（如Node.js、Java、PHP等）每次响应时动态生成。
3. 使用强随机数生成器
Nonce必须不可预测。在Node.js中应使用crypto.randomBytes()，在PHP中使用random_bytes()，而不是简单的Math.random()，防止被暴力猜测。
4. 限制unsafe-eval的使用unsafe-eval允许执行字符串形式的代码（如eval()、new Function()），这同样是XSS的温床。在严格的CSP策略中，应尽量避免使用unsafe-eval，重构代码以消除对动态代码执行的依赖。
5. 结合其他CSP指令形成纵深防御
除了script-src，还应配置default-src、style-src、img-src、connect-src等，形成全方位的防御。例如：
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-动态随机数'; style-src 'self' 'nonce-动态随机数'; img-src 'self' www.ipipp.com; connect-src 'self'
这段配置意味着：默认只允许加载同源资源；脚本和样式必须带有正确的Nonce或来自同源；图片允许来自同源或www.ipipp.com；AJAX请求只允许发往同源。
总结
HTML5的Nonce属性为CSP策略注入了强大的灵活性，使得我们可以在不牺牲安全性的前提下使用内联脚本和样式。通过动态生成强随机Nonce、移除unsafe-inline和unsafe-eval，并配置严格的CSP响应头，我们可以建立起一道坚固的防线，有效抵御XSS攻击，保障Web应用的安全运行。