6

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>
Max
  • 67
  • 1
  • 1
  • 5

3 Answers3

5

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

Faraaz Malak
  • 329
  • 1
  • 6
  • 1
    That's my bad, I don't need the get method, when I press enter I need the function to trigger, but I keep getting same message – Max May 12 '19 at 09:49
5

please remove below line

javascript:void(0);

Jaimil Patel
  • 1,301
  • 6
  • 13
user13594186
  • 51
  • 1
  • 1
2

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:

  1. Place your inline script (<script></script>) in an external file.

  2. 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)

Juan Ignacio Avendaño Huergo
  • 409
  • 1
  • 6
  • 15