Vue中CSP限制内联样式时，如何使用CSS变量？

方案一：用CSS attr()结合自定义属性（无内联样式） #

这是最直接避开内联样式的方法，通过元素的自定义属性传递动态数值，CSS读取该属性值来设置宽度：

1. 调整模板与setup逻辑
   给目标元素添加自定义属性，绑定计算后的原始数值（不用拼接%）：

<template>
  <div class="progress-bar-width" :data-progress-width="progressBar"></div>
</template>

在setup里直接返回数值即可：

setup(props) {
  const progressBar = PositionService.getProgressBar(props.position);
  return { progressBar };
}

2. 更新CSS样式
   使用CSS的attr()函数读取自定义属性，指定类型为百分比：

<style lang="scss" scoped>
.progress-bar-width {
  width: attr(data-progress-width percentage);
}
</style>

兼容性：需要Chrome 81+、Firefox 77+、Edge 81+，旧浏览器需额外处理降级逻辑。

方案二：配置CSP允许合法内联样式 #

如果无法使用attr()，可以通过CSP规则放行Vue生成的内联样式：

• Nonce方式：给页面所有合法的内联样式和<style>标签添加相同的nonce随机值，然后在CSP中设置style-src 'nonce-你的随机值'。
• Hash方式：计算Vue生成的内联样式的哈希值（如SHA-256），在CSP中添加style-src 'sha256-哈希字符串'。
  这种方法本质还是用内联样式，但属于CSP允许的合法范围。

方案三：动态创建组件专属样式标签 #

通过Vue的生命周期动态生成<style>标签，把CSS变量注入全局，再配合组件的scoped前缀隔离样式：

import { getCurrentInstance, onUnmounted } from 'vue';

setup(props) {
  const instance = getCurrentInstance();
  const scopeId = instance.type.__scopeId; // 获取组件的scoped标识，比如data-v-61475b35
  const progressBar = PositionService.getProgressBar(props.position);
  const progressWidth = `${progressBar}%`;

  // 创建样式标签并注入内容
  const styleEl = document.createElement('style');
  styleEl.textContent = `
    .progress-bar-width${scopeId} {
      --progress-bar-width: ${progressWidth};
    }
  `;
  document.head.appendChild(styleEl);

  // 组件卸载时清理样式
  onUnmounted(() => {
    document.head.removeChild(styleEl);
  });

  return {};
}

然后在scoped样式中正常使用变量：

<style lang="scss" scoped>
.progress-bar-width {
  width: var(--progress-bar-width);
}
</style>

注意：如果CSP严格禁止unsafe-inline，这种动态注入的样式内容可能被拦截，需确认CSP配置允许该操作。

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