在现代 Web 应用中，星级评分是常见的用户交互组件。当站点启用了内容安全策略（CSP）并禁止内联样式时，过去直接通过 JavaScript 修改元素 style 属性或写内联 style 来控制星星亮起比例的方式会立刻被浏览器拦截。要在合规前提下实现动态评分，需要把表现层逻辑完全移到外部样式表中，仅用数据属性驱动视图。
为什么内联样式在 CSP 下不可行
CSP 通过 style-src 指令限制样式来源。若策略中不包含 unsafe-inline，那么任何出现在 HTML 标签上的 style 属性，以及 <style> 标签内的内容，都会被浏览器拒绝执行。很多组件库默认使用 JS 直接设置 element.style.width，这在严格 CSP 环境下会静默失效，导致星级无法正常显示。
除了安全考量，内联样式还带来维护难题：评分逻辑散落在脚本里，主题切换和响应式调整都需改 JS。将样式外置不仅符合 CSP，也更符合关注点分离原则。我们需要一种机制，让 JS 只负责传数据，CSS 负责画星星。
基于 data 属性与 CSS 变量的实现方案
核心思路是：在容器上用 data-score 记录当前评分（如 3.6），在外部 CSS 中利用 attr() 配合自定义属性将其转换为宽度比例。由于 attr() 在部分旧浏览器仅支持字符串，更稳妥的做法是用 CSS 自定义属性 --score，由 JS 设置到元素的 style 变量——注意，设置 CSS 变量不属于内联样式值本身，而是自定义属性，若 CSP 允许 style-src 'self' 并通过 class 控制，也可完全避免 style 属性。
下面示例采用纯外部样式 + data 属性，JS 仅更新 data-score，不触碰 style。CSS 使用 width: calc(var(--score) / 5 * 100%) 并通过 style="--score:3.6" 方式在测试中可被替换为无 style 的变量注入；为彻底无内联，我们用 input 范围事件更新 CSS 文件中的变量类。为简洁，以下代码展示推荐的外置式结构：
<div class="star-rating" data-score="3.6"> <div class="star-bg"></div> <div class="star-fill"></div> </div>
.star-rating {
position: relative;
width: 100px;
height: 20px;
--score: 0;
}
.star-rating[data-score] {
--score: attr(data-score number, 0);
}
.star-bg, .star-fill {
position: absolute;
top: 0; left: 0;
height: 100%;
background: #ccc;
}
.star-fill {
background: gold;
width: calc(var(--score) / 5 * 100%);
}
上述 CSS 中，attr(data-score number, 0) 将 data 属性转为数字（需较新浏览器），再用 calc 算出填充宽度。若浏览器不支持 attr 数字，可用一小段 JS 把 data-score 同步到 style.setProperty('--score', value)，此时因仅设变量不写具体样式，部分 CSP 配置仍允许；最严格场景下，可用多档 class 如 score-3、score-4 映射预设宽度，彻底无 style。
JavaScript 动态更新评分
动态评分意味着用户操作后要实时变星。下面代码展示如何在不写内联样式的前提下，仅修改 data-score 并借助 CSS 变量类更新视图。我们采用 class 映射法以完全规避 style 属性：
function setRating(el, score) {
// 移除旧 score 类
el.className = el.className.replace(/bscore-d+b/g, '').trim();
el.classList.add('score-' + Math.round(score));
el.setAttribute('data-score', score);
}
const box = document.querySelector('.star-rating');
setRating(box, 4.2);
对应的 CSS 只需写 .score-4 .star-fill { width: 80%; } 等有限档位。这种做法零内联、易审计，且 CSP 只需 style-src 'self'。缺点是粒度粗，若需小数精度，可结合前面 CSS 变量法并放宽至允许变量 style。
方案对比与选型建议
两种主流无内联实现方式各有取舍。下表列出关键差异：
| 方案 | CSP 友好度 | 精度 | 维护成本 |
|---|---|---|---|
| data + CSS 变量（style 设变量） | 中（需允许变量 style） | 高（支持小数） | 低 |
| class 档位映射 | 高（纯外置） | 低（整数档） | 中 |
如果业务对半星或小数星要求高，且 CSP 可接受 style-src 'self' 'unsafe-inline' 之外的变量注入，优先选 CSS 变量法；若安全等级极高、评分只需整星，class 映射最省心。无论哪种，都应避免 JS 直接写 element.style.cssText 或 width 内联值。
常见误区与排查
开发者常误以为把样式写在 <style> 标签里就不算内联，其实当该标签位于 HTML 文档内且 CSP 无 unsafe-inline 时同样被禁。正确做法是将样式存入独立 .css 文件并用 <link> 引入。另一个误区是用 JS 拼接 style 字符串，这本质仍是内联。通过浏览器控制台 CSP 报错可快速定位违规资源。
总结来说，启用 CSP 后实现动态星级评分的关键在于数据驱动视图：评分值走 data 属性或 CSS 变量，视觉效果全交外部样式表。这样既守住安全底线，也保留交互灵活性。
CSPstar_ratingno_inline_style修改时间：2026-08-03 14:45:40