Uniform CalcGuard failing due to inline CSS declaration?

Kirby 3 Solved ✅
,
1

I realise that as I type this, it sounds totally bonkers but here we go.

Having tried to implement the CalcGuard function in Uniform, I have been going round and round in circles (See this thread).

I reached the stage where my initial issue had been solved but a new one had reared it’s head, hence this new thread.

It would appear that the use of an inline CSS declaration of a background image in the HTML is causing the CalcGuard to incorrectly think that the solution entered is incorrect. This means that if my page includes anything along these lines it fails:

style="background-image: url(image.jpg);"

As soon as I remove all references like this, the CalcGuard works perfectly.

It’s not all inline declarations that cause this problem, only this one. I can use any other CSS with no issue.

The path to the image can also be empty, it still fails.

If I remove/change the “url()” section it works fine. For example, if I change it to “turl()” the CalcGuard works fine.

So it seems that something in the CalcGuard has a problem with the “url()” section of the background-image style.

Does that seem feasible? It makes no sense in my head but I have tested it over and over with different pages, including one with everything else stripped out (other content, links to JS etc). I get the same issue.

Hopefully @mzur might have a thought or two on this.

2

I can’t reproduce this and it doesn’t make sense at all. Please provide your example code (ideally a stripped out basic example with only one form field apart from the honeypot and calc guard including controller).

3

I agree that it makes no sense!

The template code is:

<!doctype html>
<html lang="en" dir="ltr">
	<head>
		<title>dummy title</title>
		<?= css(['@auto']) ?>
		<?= js(['assets/js/jquery-3.4.1.min.js', '@auto']) ?>
	</head>
	<body class="page page-<?= $page->uid() ?> template-<?= $page->template() ?>">
		<header class="header landing-header" style="background-image:url();"></header>

		<main>
			<form action="<?= $page->url() ?>" method="POST">
				<fieldset class="fieldset">
					<legend>Send us an e-mail</legend>
						<label for="email">E-mail <span class="req">*</span></label>
						<input<?php if ($contactform->error('email')): ?> class="error"<?php endif; ?> name="email" id="email" type="email" placeholder="Your e-mail address" value="<?php echo $contactform->old('email') ?>" />

						<?php echo csrf_field() ?>
						<?php echo honeypot_field('website','contact-website-hp') ?>

						<label>Please calculate <?php echo uniform_captcha() ?></label>
						<?php echo captcha_field() ?>

						<input type="submit" class="button" value="Submit">

						<?php if ($contactform->success()): ?>
						<div class="uniform-success">
							Thank you for your message. We will get back to you soon!
						</div>
						<?php else: ?>
							<?php snippet('uniform/errors', ['form' => $contactform]) ?>
						<?php endif; ?>
				</fieldset>
			</form>
		</main>
	</body>
</html>

The Controller code is:

<?php use Uniform\Form;

return function ($kirby)
{
	$contactform = new Form([

		'email' => [
			'rules' => ['required', 'email'],
			'message' => 'Please enter a valid email address, yo',
		],
		'captcha' => [
			'rules' => ['required', 'num'],
			'message' => 'Please fill in the anti-spam field',
		],
	],'boggo-form');

    if ($kirby->request()->is('POST')) {
		$contactform
		->honeypotGuard(['field' => 'website'])
		->calcGuard(['field' => 'captcha'])
		->emailAction([
			'to' => 'name@email.co.uk',
			'from' => 'name@email.com',
			'subject' => 'Contact form submission',
		]);
    }

    return compact('contactform');
}; ?>

It’s the inline CSS on the [header] that causes the issue (but I have also tried it on other HTML elements and had the same problem).

I’m running it locally on MAMP 5.5 Free (PHP v 7.3.8) and viewing in Chrome and Safari.

I have also tried it in a live environment (PHP 7.1).

I have grabbed a new copy of Uniform too, just to make sure.

4

Hm, yes, that made the error appear. But there are some issues with your code:

  • Do not add a closing php tag in the controller
  • Not sure if the empty url is valid

If I add an image name style="background-image:url(image.jpg);" I don’t get the error message.

5

Hi @texnixe - thanks for getting back to me, I appreciate your help.

I’ve corrected the errors you mention (thanks for picking up the closing PHP tag).

I’m not sure that the empty URL is technically invalid - it’s just surplus. It’s there only if the Featured Image field in the Blueprint is empty, otherwise it simply picks up the file from there. I will now wrap the whole style="" in a conditional statement instead of simply the image reference.

I can only assume that when I was testing it with an image reference in the url(), there was another empty url() on the page too.

However, it still seems really bizarre that something like that would cause the CalcGuard to fail, right?

6

Yes, that seems weird.

That makes sense, anyway.

7

I’ve marked it as solved but it is possibly something that should be addressed in a future release of Uniform. I know that I’ve seen empty declarations of this type in themes etc before so it’s probably not as uncommon as it first would seem.

Thanks again, @texnixe

8

I think what is happening here is that the missing image URL/path somehow prevents storing the result in the session or comparing the result to what is stored in the session.