title: Content Security Policy preventing javascript form to submit to php server
body: <p>Can someone please help fix this annoying issue? I'm trying to submit a Stripe form to my server. I have their link in my header <code>&lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;</code>. Every single time I hit the form button, nothing happens because the CSP is preventing the form submission. It looks like Firefox is injecting some kind of script? How to get around this? I'm on localhost.</p>
  
  <p><strong>Console logs</strong></p>
  
  <pre><code>Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: try {
  
  (function injectPageScriptAPI(scr....
  elements-inner-card-799faf0b7f6484028049b34fc28226d1.html:1
  Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: (function(){function _PostRPC() {        // in....
  elements-inner-card-799faf0b7f6484028049b34fc28226d1.html:1
  Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: try {
  
  (function injectPageScriptAPI(scr....
  controller-0d0fbe23aa60de208bc061dd4283db56.html:1
  Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: (function(){function _PostRPC() {        // in....
  controller-0d0fbe23aa60de208bc061dd4283db56.html:1
  Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: try {
  
  var AG_onLoad=function(func){if(d....
  controller-0d0fbe23aa60de208bc061dd4283db56.html:1
  Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: try {
  
  var AG_onLoad=function(func){if(d....
  elements-inner-card-799faf0b7f6484028049b34fc28226d1.html:1
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var stripe = Stripe('pk_test_test');
  var elements = stripe.elements();
      // Handle form submission
      var form = document.getElementById('payment-form');
  
      form.addEventListener('submitpayment', function(event) {
          event.preventDefault();
  
      stripe.createToken(card).then(function(result) {
              if (result.error) {
                  // Inform the user if there was an error
                  var errorElement = document.getElementById('card-errors');
                  errorElement.textContent = result.error.message;
              } else {
                  stripeTokenHandler(result.token);
              }
          });
      });
  
      // Send Stripe Token to Server
      function stripeTokenHandler(token) {
          // Insert the token ID into the form so it gets submitted to the server
          var form = document.getElementById('payment-form');
  
      // Add Stripe Token to hidden input
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'stripeToken');
          hiddenInput.setAttribute('value', token.id);
          form.appendChild(hiddenInput);
  
      // Submit form
       form.submit();
      }
  </code></pre>