Content Security Policy warning

Question

I am new to CSP so may be making an error, but here goes. I have a little script that is for a menu dropdown, but when I click on the menu button to trigger it I get a warning in my console. The menu does what it is supposed to so the script is running, but I am not sure why the error is happening.

This is all the HTML in my <body>:

<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>

This is everything in /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');
  });
});

And this is my CSP, set using .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"

The page loads ok with no errors in the console. But when I click on the menu toggle I get this console error:

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' https://ajax.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

If anyone could shed some light that would be amazing. You can see the page in action here:

https://booster.mikeharrisondesign.com

Quentin Quentin · Accepted Answer · 2017-04-13T15:43:07

href="javascript:void(0)"

You have a JavaScript URL. Your CSP forbids it. Don't do that.

JavaScript URLs are awful anyway. Links are supposed to link somewhere. If you want an interactive element that does nothing except trigger JS when clicked on: Use a button.

Content Security Policy warning

1 Answers