Kontaktformular verschlüsseln

pcbie · 06. Jan. 2024

Ich versuche mehrere Eingabefelder in einem String zusammen zufassen und anschließend zu verschlüsseln.

Die drei Eingabefelder aname / bphone / cnachricht sollten als var message zusammengefasst werden, leider wird mir immer nur das erste Feld ausgegeben.

Javascript:

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.crypto && window.crypto.getRandomValues) {
        // form ready
        var aname = document.getElementById("nname");
        var bphone = document.getElementById("nphone");
        var cnachricht = document.getElementById("message");
        var message = aname, bphone, cnachricht;
        // encrypt on submit
    console.log(document.forms);
        document.forms[0].addEventListener("submit", function(evt) {
            evt.preventDefault();
            if (form.elements['message'].value == '') {
                alert('Please enter a message!');
            } else {
                encrypt(message.value).then(function(encrypted_msg) {
                    form.elements['message'].value = encrypted_msg;
                    form.submit();
                });
                return true;
            }
        });
    } else {
        // not ready
        document.getElementById("button").disabled = true;
        window.alert("Error: Browser not supported\nReason: We need a cryptographically secure PRNG to be implemented (i.e. the window.crypto method)\nSolution: Use Chrome >= 11, Safari >= 3.1, Firefox >= 21, Opera >= 15 or IE >= 11.");
        return false;
    }
});

function encrypt(msg) {
    if (msg.indexOf("-----BEGIN PGP MESSAGE-----") !== -1 && msg.indexOf("-----END PGP MESSAGE-----") !== -1) {
        return msg;
    } else {
        var key = document.getElementById("pubkey").innerHTML;
        var publicKey = openpgp.key.readArmored(key).keys[0];
        return openpgp.encryptMessage(publicKey, msg).then(function(pgpMessage) {
            return pgpMessage;
        });
    }
}
</script>

Hier das komplette HTML

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Contact</title>
  <script src="js/openpgp.min.js" type="text/javascript"></script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.crypto && window.crypto.getRandomValues) {
        // form ready
        var aname = document.getElementById("nname");
        var bphone = document.getElementById("nphone");
        var cnachricht = document.getElementById("message");
        var message = aname, bphone, cnachricht;
        // encrypt on submit
    console.log(document.forms);
        document.forms[0].addEventListener("submit", function(evt) {
            evt.preventDefault();
            if (form.elements['message'].value == '') {
                alert('Please enter a message!');
            } else {
                encrypt(message.value).then(function(encrypted_msg) {
                    form.elements['message'].value = encrypted_msg;
                    form.submit();
                });
                return true;
            }
        });
    } else {
        // not ready
        document.getElementById("button").disabled = true;
        window.alert("Error: Browser not supported\nReason: We need a cryptographically secure PRNG to be implemented (i.e. the window.crypto method)\nSolution: Use Chrome >= 11, Safari >= 3.1, Firefox >= 21, Opera >= 15 or IE >= 11.");
        return false;
    }
});

function encrypt(msg) {
    if (msg.indexOf("-----BEGIN PGP MESSAGE-----") !== -1 && msg.indexOf("-----END PGP MESSAGE-----") !== -1) {
        return msg;
    } else {
        var key = document.getElementById("pubkey").innerHTML;
        var publicKey = openpgp.key.readArmored(key).keys[0];
        return openpgp.encryptMessage(publicKey, msg).then(function(pgpMessage) {
            return pgpMessage;
        });
    }
}
</script>

<h3>Testformular</h3>

<form id="form" method="post" action="send_form.php">
    <table width="450px">
        <tr>
              <td valign="top">
                   <label for="email">Ihre eMail</label>
             </td>
              <td valign="top">
                   <input type="text" name="email" style="height:18px;width:300px;">
              </td>
         </tr>      
        <tr>
              <td valign="top">
                   <label for="subject">Betreff</label>
             </td>
              <td valign="top">
                   <input type="text" name="subject" style="height:18px;width:300px;">
              </td>
         </tr>
        <tr>
              <td colspan="2">
            <p>Die nachfolgenden Eingaben werden verschlüsselt übermittelt.
              </td>
        </tr>        
        <tr>
              <td valign="top">
                   <label for="nname">Name</label>
             </td>
              <td valign="top">
                   <input type="text" id="nname" name="nname" style="height:18px;width:300px;">
              </td>
         </tr>
        <tr>
              <td valign="top">
                   <label for="nphone">Telefon</label>
             </td>
              <td valign="top">
                   <input type="text"  id="nphone" name="nphone" style="height:18px;width:300px;">
              </td>
         </tr>                    
        <tr>
            <td valign="top">
                <label for="message">Nachricht</label>
            </td>
            <td valign="top">
                <textarea  id="message" name="message" style="height:150px;width:300px;"></textarea>
         </td>
        </tr>
        <tr>
              <td colspan="2">
                <input type="submit">
              </td>
        </tr>
    </table>
</form>

<!-- your pgp public key -->

<div id="pubkey" hidden="true">
-----BEGIN PGP PUBLIC KEY BLOCK-----

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
=DFVj
-----END PGP PUBLIC KEY BLOCK-----
</div>

</body>
</html>

Danke für Eure Hilfe.

mo · 06. Jan. 2024

schau mal das an:

Javascript:

        // Zugriff auf die Werte der Eingabefelder
        var anameValue = document.getElementById("nname").value;
        var bphoneValue = document.getElementById("nphone").value;
        var cnachrichtValue = document.getElementById("message").value;

        // Zusammenführen der Werte in einer Nachricht
        var message = anameValue + " " + bphoneValue + " " + cnachrichtValue;

du baust die variable message falsch zusammen.

pcbie · 07. Jan. 2024

Das zusammenführen der hat leider nicht geklappt.

Habe es jetzt so gelöst:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Contact</title>
  <script src="js/openpgp.min.js" type="text/javascript"></script>
  <script src="js/scripts/snippet-javascript-console.min.js?v=1"></script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.crypto && window.crypto.getRandomValues) {
        // form ready
        var message = document.getElementById("message");
        // encrypt on submit
    console.log(document.forms);
        document.forms[0].addEventListener("submit", function(evt) {
            evt.preventDefault();
            if (form.elements['message'].value == '') {
                alert('Please enter a message!');
            } else {
                encrypt(message.value).then(function(encrypted_msg) {
                    form.elements['message'].value = encrypted_msg;
                    form.submit();
                });
                return true;
            }
        });
    } else {
        // not ready
        document.getElementById("button").disabled = true;
        window.alert("Error: Browser not supported\nReason: We need a cryptographically secure PRNG to be implemented (i.e. the window.crypto method)\nSolution: Use Chrome >= 11, Safari >= 3.1, Firefox >= 21, Opera >= 15 or IE >= 11.");
        return false;
    }
});

function encrypt(msg) {
    if (msg.indexOf("-----BEGIN PGP MESSAGE-----") !== -1 && msg.indexOf("-----END PGP MESSAGE-----") !== -1) {
        return msg;
    } else {
        var key = document.getElementById("pubkey").innerHTML;
        var publicKey = openpgp.key.readArmored(key).keys[0];
        return openpgp.encryptMessage(publicKey, msg).then(function(pgpMessage) {
            return pgpMessage;
        });
    }
}
</script>

<h3>Testformular</h3>

<form id="form" method="post" action="send_form.php">
    <table width="450px">
        <tr>
              <td valign="top">
                   <label for="email">Ihre eMail</label>
             </td>
              <td valign="top">
                   <input type="text" name="email" style="height:18px;width:300px;">
              </td>
         </tr>       
        <tr>
              <td valign="top">
                   <label for="subject">Betreff</label>
             </td>
              <td valign="top">
                   <input type="text" name="subject" style="height:18px;width:300px;">
              </td>
         </tr>
        <tr>
              <td colspan="2">
            <p>Die nachfolgenden Eingaben werden verschlüsselt übermittelt.</p>
              </td>
        </tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                 
        <tr>
              <td valign="top">
                   <label for="nname">Name</label>
             </td>
              <td valign="top">
                   <input class="combine" id="input1"  name="name" value="" style="height:18px;width:300px;"/>
              </td>
         </tr>
        <tr>
              <td valign="top">
                   <label for="nphone">Telefon</label>
             </td>
              <td valign="top">
                   <input class="combine" id="input2"  name="phone" value="" style="height:18px;width:300px;"/>
              </td>
         </tr>                     
        <tr>
            <td valign="top">
                <label for="message1">Nachricht</label>
            </td>
            <td valign="top">
                <textarea  class="combine" id="input3" style="height:150px;width:300px;"></textarea>
         </td>
        </tr>
         </tr>                     
        <tr>
            <td valign="top">
                <label for="message">Verschlüsselt</label>
            </td>
            <td valign="top">
            <textarea  id="message" name="message" style="height:150px;width:300px;"></textarea>
         </td>
        </tr>
<script type="text/javascript">
$(document).ready(function(){
$("#setVal").click(function(){
$("#message").val("Name\n" + $("#input1").val() + " \n\nTelefon Nr.\n" + $("#input2").val()+ " \n\nNachricht\n" + $("#input3").val());
});
});
</script>       
        <tr>
              <td colspan="2">
                <button id="setVal">Nachricht senden</button>
              </td>
        </tr>
    </table>
</form>

<!-- your pgp public key -->

<div id="pubkey" hidden="true">
-----BEGIN PGP PUBLIC KEY BLOCK-----

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
=DFVj
-----END PGP PUBLIC KEY BLOCK-----
</div>

</body>
</html>

So funktioniert es für mich am Besten und ist erweiterbar.

Danke für Eure Unterstützung.

Viele Grüsse
Peter

mo · 07. Jan. 2024

Super. Besten Dank für´s Update.

Kontaktformular verschlüsseln

pcbie

New member

mo

Administrator

pcbie

New member

mo

Administrator