style-src 阻止 JavaScript 编辑内联样式

Question

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

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);
  })();
};

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

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

CSP 提供了块内联样式，我希望不要被阻止。根据other sources，在HTML部分，由于

style

，应该允许

'unsafe-hashes'

属性，根据控制台（Chrome）它似乎不起作用。

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.

因为我无法将 Chrome 推荐的内容直接放入 JavaScript 文件中。我确实把它放在了

script

标签上，但它返回了同样的东西。

Answer 1

参见https://www.w3.org/TR/CSP3/#unsafe-hashes-usage，'unsafe-hashes'旨在允许遗留站点允许一些内联事件处理程序（属性）。在这种情况下，您将需要“不安全内联”或重写脚本代码。