CODEWITHSUNDEEP
javascriptcontent-security-policy
Gary J.
Gary J.

Reputation: 15

Content Security Policy preventing javascript form to submit to php server

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 <script src="https://js.stripe.com/v3/"></script>. 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.

Console logs

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

Javascript

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();
    }

Upvotes: 1

Views: 1506

Answers (1)

Jeff Hampton
Jeff Hampton

Reputation: 66

In this particular case, it was the AdGuard FireFox add-on that was causing this problem.

Further resources:

  • It looks like you're running the AdGuard extension (AG_onLoad, Google Search, so that's a likely culprit
  • This CSP Github Page is a great resource, but that _PostRPC call is in the unexplained .md document.
  • It looks like this might be related to this GitHub issue - apparently FF has a very strict application of CSP

If you disable all add-ons, can you verify that it works properly?

HTH!

Upvotes: 1

Related Questions