内容安全策略警告

Question

我是 CSP 的新手，所以可能会犯错误，但这里是。我有一个用于下拉菜单的小脚本，但是当我单击菜单按钮触发它时，我在控制台中收到警告。菜单按预期运行，因此脚本是运行，但我不确定为什么会发生错误。

这是我<body>中的所有HTML:

<div class="responsive-centered-nav">
  <a href="javascript:void(0)" class="nav-toggle">Menu</a>
  <nav>
    <ul>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About Us</a></li>
      <li class="nav-item"><a href="#">Services</a></li>
      <li class="nav-item"><a href="#">Pricing</a></li>
      <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

<script src="/assets/js/main-min.js"></script>

这是 /assets/js/main-min.js 中的所有内容：

document.addEventListener("DOMContentLoaded", function() {

  console.log("DOM fully loaded and parsed");

  var html = document.documentElement;
  html.classList.remove("no-js");
  html.classList.add("js");

  if (html.classList.contains("js")) {
    console.log("Javascript is enabled");
  }

  WebFont.load({
    google: {
      families: ['Merriweather:300,300i,700']
    }
  });

});

document.addEventListener('DOMContentLoaded', function() {
  // Set up some variables
  var navigation = document.querySelector('.js div.responsive-centered-nav nav');
  var toggleButton = document.querySelector('.js div.responsive-centered-nav a.nav-toggle');

  toggleButton.addEventListener('click', function(){
    navigation.classList.toggle('visible');
  });
});

这是我的 CSP，使用 .htaccess:

设置

Header set Content-Security-Policy: "default-src 'none'; script-src 'self' https://ajax.googleapis.com; connect-src 'self'; img-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'none'"
Header set X-Frame-Options: "DENY"
Header set X-XSS-Protection: "1; mode=block"
Header set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"

页面加载正常，控制台中没有错误。但是当我点击菜单切换时，我得到这个控制台错误：

拒绝执行 JavaScript URL 因为它违反了以下内容安全策略指令："script-src 'self' https://ajax.googleapis.com"。启用内联执行需要 'unsafe-inline' 关键字、散列 ('sha256-...') 或随机数 ('nonce-...')。

如果有人能阐明一些观点，那就太棒了。您可以在此处查看正在运行的页面：

https://booster.mikeharrisondesign.com

Answer 1

href="javascript:void(0)"

您有一个 JavaScript URL。您的 CSP 禁止这样做。不要那样做。

JavaScript URL无论如何都很糟糕。链接应该 link 某处。如果你想要一个除了在点击时触发 JS 之外什么都不做的交互元素：使用按钮。

内容安全策略警告

Content Security Policy warning

javascript

content-security-policy