配置CSP时'unsafe-hashes'无法允许内联样式的问题咨询

当前配置的CSP规则 #

Content-Security-Policy: default-src *; script-src 'self' 'unsafe-hashes'; style-src 'self' 'unsafe-hashes'

相关代码 #

JavaScript 函数 #

function pureFadeOut(elem){
  var el = document.getElementById(elem);
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .02) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
      setTimeout(() => {
      var theelement = document.querySelector('#cookieConsentContainer');
            if (theelement) {
            theelement.remove();
        };
      }, 1350);
  })();
};

HTML 代码 #

<div class="cookieConsentContainer" id="cookieConsentContainer" style="opacity: 1; display: block;"></div>

<script src="purecookie.js"></script>

报错信息 #

purecookie.js:79 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes'. Either the 'unsafe-inline' keyword, a hash ('sha256-ocbYmzLZH1xplQZkplgRzBKXmnx+nXhqw2fRcEogPQ4='), or a nonce ('nonce-...') is required to enable inline execution.

问题详情 #

配置上述CSP规则后，期望允许内联样式，但规则仍会阻止内联样式生效。根据资料，'unsafe-hashes'应允许HTML中的style属性，但Chrome控制台报错如上。尝试将Chrome推荐的哈希值添加到script标签中无效，且无法直接写入JavaScript文件，寻求解决方法。

解决方法 #

1. 明确'unsafe-hashes'的作用范围 #

'unsafe-hashes'并非允许所有内联样式，它仅支持匹配哈希的事件处理属性（如onclick）和脚本/样式块的哈希校验，不支持HTML元素的style属性，以及通过JS动态设置的内联样式（比如el.style.opacity = 1这类操作）——这就是加了规则仍报错的核心原因。

2. 分场景针对性解决 #

场景1：HTML元素的style属性（如<div style="...">）

有两种可行方案：

• 直接添加'unsafe-inline'到style-src规则，允许所有内联样式：

  Content-Security-Policy: default-src *; script-src 'self' 'unsafe-hashes'; style-src 'self' 'unsafe-hashes' 'unsafe-inline'
  

  注意：此方式会降低安全性，仅在必要场景使用。
• 将内联样式迁移到外部CSS文件，用类名控制样式：

  /* 外部CSS文件 */
  .cookie-consent-visible {
    opacity: 1;
    display: block;
  }
  

  对应修改HTML：

  <div class="cookieConsentContainer cookie-consent-visible" id="cookieConsentContainer"></div>
  

场景2：JS动态设置的内联样式（如el.style.opacity = 1）

这类动态样式注入不在'unsafe-hashes'的覆盖范围内，可选择：

• 同样添加'unsafe-inline'到style-src，允许所有动态内联样式操作；
• 改用CSS类切换替代直接操作style属性，更安全也更易维护：
  先在CSS中定义过渡和状态类：

  .cookieConsentContainer {
    transition: opacity 0.6s ease-out;
  }
  .cookie-consent-fading {
    opacity: 0;
  }
  .cookie-consent-hidden {
    display: none;
  }
  

  再修改JS函数，通过类切换实现效果：

  function pureFadeOut(elem){
    var el = document.getElementById(elem);
    el.classList.add('cookie-consent-fading');
    
    setTimeout(() => {
      el.classList.add('cookie-consent-hidden');
      setTimeout(() => {
        var theelement = document.querySelector('#cookieConsentContainer');
        if (theelement) {
          theelement.remove();
        };
      }, 100); // 等待过渡动画完成后移除元素
    }, 600); // 对应CSS过渡时长
  };
  

3. 关于Chrome提示的哈希值 #

Chrome给出的哈希值对应内联脚本或样式块的内容哈希，并非JS动态操作样式的哈希，因此加到script标签中无效，对当前场景没有帮助。

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