WebSite change Form practice problems

[steedvlx600]

Hello… old newbie here… getting back into making web sites after 10 years…

I was using this series of demonstrations… located here..

https://css-tricks.com/sending-nice-html-email-with-php/

to try to learn how to work with simple form submission-to-email.

It is a great series (Thank you for that) And, I am learning a LOT from digging into it. As a matter of fact, it has helped me create a great looking submission page… that works flawlessly… But, (There’s always a “but” isn’t there?)

my next step is to replace the usual submit button with a custom image button. Easy! right?

The old code for the button, (which worked beautifully) and the subsequent failed attempt at an image button is… (OK, I just learned that i cannot use codepen at the moment. So, I had to paste the code instead.)

//http://codepen.io/anon/pen/PwOaEd

!– original working button –>
<label for=”submit”>
</label>
<input type=”submit” value=”Send Message!” />

<!– Attempted image button –>

<input type=”image” border=”0″ name=”submit” src=”img/post_message_btn.jpg” value=”Send Message!” width=”150″ height=”30″ />

This image button/submit FAILS with the “Hack-Attempt detected. Please use only the fields in the form.” ERROR generated by the whitelist check which was included in the series.

Edited PHP code block:

<?php // Building a whitelist array with keys which will send through the form, no others would be accepted later on
$whitelist = array(‘token’,’name’,’email’,’subject’,’URL-main’,’text’,’save-stuff’);

` // Building an array with the $_POST-superglobal
foreach ($_POST as $key=>$item) {

            // Check if the value $key (fieldname from $_POST) can be found in the whitelisting array, if not, die with a short message to the hacker
            if (!in_array($key, $whitelist)) {

                writeLog('Unknown form fields');
                die("Hack-Attempt detected. Please use only the fields in the form");

            }
    }

`

?>

I know I must be missing something very basic… I just can’t find it. It would be VERY helpful should someone be able to give advice as to why this button change causes the validation failure [and the Die() condition]. Even more wonderful would be an elegant solution to the problem. Two days, and I can’t find it.

I have not used a forum for help before. And, I’m not familiar with the new tools used here. Sincere apologies if I have made mistakes.

If it is helpful to actually see what it does… try reconnection .jp

I will continue to fight at it. any insight would be greatly appreciated.

Thanks.

[Shikkediel]

Maybe try to not use name="submit" as it might be conflicting.

[Shikkediel]

And unsafe even (so it’s actually good that is in place) :

http://jibbering.com/faq/names/

http://perfectionkills.com/domlint-resolving-name-conflicts/

Certainly something to be aware of… although googling the interweb makes me think not too many people are (as I was up to this moment).

[steedvlx600]

Thank you SO much for the reply.

I have tried as you suggested to remove the name attribute from the code. I also tried to remove the value attribute (not at the same time)…

Unfortunately, both variations result in the same exception being triggered… with the same unfortunate result of a “white out” due to the Die().

I’m at my wit’s end. I cannot figure why it is creating a mystery-value that gets it kicked out by the PHP.

Thank you for checking it out.

[steedvlx600]

Good information. I’ve actually always wondered what the difference really was… Now, I know.

Thanks

[Shikkediel]

Hmmm… I could’ve sworn that was it. I don’t see anything else either that could be causing the issue. But you could try to start from the input that works, give that an id and apply the image as a background in the CSS along with any other style that might be needed.

<input type="submit" id="send" value="Send Message!"/>

#send {
width: 105px;
height: 30px;
background-image: url(img/post_message_btn.jpg);
border: 0
}

[steedvlx600]

Thank you for your suggestions. The previous id=”send” suggestion was a winner.

Although, I do not understand why… yet!

The …value=”Send Message!” initially superimposed itself over the image. So, I just nulled that out to …value=””. I remembered that eliminating the value attribute altogether would result in a default of “Submit”.

But…The reason I don’t understand this is;
The original HTML did not create a name=”” or id=”” at all. But, it DID trigger the whitelist check – resulting in the error.

The SOLUTION you provided, ironically, DOES create an id=”” which (I thought) should definitely trigger the error… Yet, it does not. Even if I don’t add ‘send’ to the whitelist.

Well, that’s originally why I came here. To learn cool stuff. I guess it just gets better. But, this one is still bothering me… I’m not one of those “Meh!… It works. So, who cares.” kinda guys. I will keep this one in the “Problems to figure out” box.

Thank you again for providing a solution… And, A bit of new CSS learning as well.

[Shikkediel]

Glad that worked. But I can relate to it being an annoyance to not know the exact original cause. To be honest, I’m not too sure I fully see yet how the php should work. This would be a list of the only name values that could pass if I understand correctly :

$whitelist = array('token','name','email','subject','URL-main','text','save-stuff');

Of which name, email and text (input types) should actually be avoided, according to the logic of the pages linked to earlier. So making it the following – and adding send to the whitelist should work :

<input type="submit" name="send" value="Send Message!"/>

$whitelist = array('token','send','subject','URL-main','save-stuff');

Unless the application depends on the removed values somewhere else of course. The whitelist would not be checking any ids as they are not input names (attributes) by the way.

Edited – below is not accurate for a submit button itself.

Why possibly change what works? The W3 spec says the following :

Only form elements with a name attribute will have their values passed when submitting a form.

Addressing it with CSS would be like this :

input[name="send"] {    

// style rules

}    

Or give both a name and id and keep the CSS as is :

<input type="submit" name="send" id="send" value="Send Message!"/>

Edit – in hindsight, the name attribute may not be all too relevant for a submit button. But I’ll leave the comment in there for general interest.

[Shikkediel]

Funny how I was already preoccupied with creating a good template for a secure contact form – this topic made me research a bit better. And then came across the site with the best snippets around, with some code that looked very familiar :

https://css-tricks.com/serious-form-security/

Note how Mr. C. himself is not using the conflicting name values. :-)
Y’all gotta scroll down a lil’ for it…

[Author]

Posts