时间戳

首页 > 解决方案 > 内容安全策略阻止 javascript 表单提交到 php 服务器

javascript - 内容安全策略阻止 javascript 表单提交到 php 服务器

问题描述

有人可以帮忙解决这个烦人的问题吗？我正在尝试将 Stripe 表单提交到我的服务器。我的标题中有他们的链接<script src="https://js.stripe.com/v3/"></script>。每次我点击表单按钮时，什么都没有发生，因为 CSP 阻止了表单提交。看起来 Firefox 正在注入某种脚本？如何解决这个问题？我在本地主机上。

控制台日志

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

标签： javascriptcontent-security-policy

解决方案

在这种特殊情况下，是 AdGuard FireFox 插件导致了这个问题。

更多资源：

  • 看起来您正在运行 AdGuard 扩展程序（AG_onLoad，Google Search，所以这可能是罪魁祸首
  • 这个CSP Github Page是一个很好的资源，但是 _PostRPC 调用在unexplained.md 文档中。
  • 看起来这可能与这个 GitHub 问题有关- 显然 FF 对 CSP 的应用非常严格

如果您禁用所有附加组件，您能否验证它是否正常工作？

！

推荐阅读