2017-04-13 249 views
2

我是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,使用set .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,因为它违反了以下内容安全政策指令:“脚本的src‘自我’https://ajax.googleapis.com”。 “内联不安全”关键字,散列('sha256 -...')或一个随机数('nonce -...')是启用内联执行所必需的。

如果有人可以提供一些线索,这将是惊人的。您可以在这里看到实际的页面:

https://booster.mikeharrisondesign.com

回答

-2
href="javascript:void(0)" 

你有一个JavaScript网址。你的CSP禁止它。不要这样做。

JavaScript的网址是可怕的呢。链接应该链接到某个地方。如果你想要一个交互式元素,除了点击时触发JS,什么也不做:使用按钮。

+0

不要忘记设置你的''

+0

@ Xenos - 他们已经这样做了,你可以在代码中看到它.Java URL是一个*什么都不做的脚本,所以他们可以使用链接在他们应该使用的某个地方。按钮 – Quentin

+0

哦,心动不如行动,今年,他们已经把听众对这个锚对不起,我得赶紧阅读 – Xenos