Anybody knows why am I keep getting this message? Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script type="text/javascript">
function checkoutForm() {
var inputValue = document.querySelectorAll('.form-control')[0].value;
alert('Your input value: ' + inputValue);
window.open('/search/' + inputValue);
}
</script>
</head>
<body>
<form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto" method="get"
action="javascript:checkoutForm()">
<div class="form-group mb-0">
<div class="input-group input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" placeholder="Search" type="search" value>
</div>
</div>
</form>
</body>
</html>
Anybody knows why am I keep getting this message? Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script type="text/javascript">
function checkoutForm() {
var inputValue = document.querySelectorAll('.form-control')[0].value;
alert('Your input value: ' + inputValue);
window.open('/search/' + inputValue);
}
</script>
</head>
<body>
<form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto" method="get"
action="javascript:checkoutForm()">
<div class="form-group mb-0">
<div class="input-group input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" placeholder="Search" type="search" value>
</div>
</div>
</form>
</body>
</html>
- 1 Have you Googled "Content Security Policy"? Do you understand what it is? – ADyson Commented May 11, 2019 at 17:06
- Looks like google it's not letting you to call code directly from the HTML and inline scripts developers.google.com/web/fundamentals/security/… – Juan Ignacio Avendaño Huergo Commented Mar 2, 2021 at 12:17
3 Answers
Reset to default 5Form's action attribute can only contain a URI.
Refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes
Your form's action attribute contains JavaScript code.
From your code, I see that you are trying to append search keyword to the URL using JS.
This is not required. Since your form's method attribute is get, the search keyword will automatically be appended to the URL during form submission.
Set action attribute to /search and this should resolve your issue
please remove below line
javascript:void(0);
Okay, it seems that nowedays calling javascript code directly from the html in any way it's not okay for google:
https://developers.google.com/web/fundamentals/security/csp?hl=en#the_meta_tag
As such, you can do the following:
Place your inline script (
<script></script>) in an external file.Within that file add something like:
document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.fa-search')[0].addEventListener('click', checkoutForm); });
I will recommend add your i tag an id, or add a new button that triggers the search and the replace the document.queryselector line with:
document.getElementById('buttonId').addEventListener('click', checkoutForm);
Surely you can use JQuery or any other framework to achieve this same behaviour.
Other StackOverflow Questions with similar content:
Refused to load the script because it violates the following Content Security Policy directive
In the above link you have another way to resolve this, but since google warning it's okay, i will try to avoid it.
Same solution you have it explained here: https://developers.google.com/web/fundamentals/security/csp?hl=en#if_you_absolutely_must_use_it_
Refused to execute inline event handler because it violates CSP. (SANDBOX)