Content Security Policy nonce内联style属性失效问题求助

问题描述 #

我尝试用nonce属性配合style属性实现Content Security Policy（CSP），已经通过服务器配置了Header，但在Google Chrome 123.0.6312.86（官方64位版本）里还是报同样的错。

对应的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-kiddo'">
    <title>Sample HTML</title>
</head>
<body>
    <div style="color: red;" nonce="kiddo">This text will be red.</div>
</body>
</html>

Chrome报错截图：

错误原因 #

你搞错了CSP里nonce的用法：

• nonce是给<style>或<script>标签用的，用来授权整个标签内的代码，不能直接加到带style属性的HTML元素上。
• 元素自带的内联style属性（比如<div style="color: red">）属于style-src规则里的unsafe-inline范畴，靠给元素加nonce根本授权不了。

解决办法 #

办法1：用nonce授权<style>标签（推荐） #

把样式移到<style>标签里，给这个标签加nonce属性，和CSP配置里的nonce值保持一致：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-kiddo'">
    <title>Sample HTML</title>
    <style nonce="kiddo">
        .red-text {
            color: red;
        }
    </style>
</head>
<body>
    <div class="red-text">This text will be red.</div>
</body>
</html>

办法2：允许unsafe-inline（不推荐，安全性降低） #

要是必须保留元素的内联style属性，那就给CSP的style-src加上'unsafe-inline'：

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-kiddo' 'unsafe-inline'">

办法3：用哈希授权内联style #

计算内联style内容的哈希值，把它加到CSP规则里。比如针对color: red;，计算出它的SHA-256哈希值后，配置如下：

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'sha256-你的哈希值'">

注意事项 #

• 生产环境里，nonce必须是随机生成的一次性值，不能固定用kiddo这种静态值，不然nonce的安全作用就失效了。
• 如果同时用服务器Header和meta标签配置CSP，两者会叠加生效（取更严格的规则），得确保Header和meta的配置一致。

内容的提问来源于stack exchange，提问作者Ashish