0

I am working on a page that allows users to track orders that they have placed in our system. To prevent Spam, I am wanting to add a captcha to the page. I am using Yii2 for this. For some reason the captcha image is not showing up.

I can visit tracking/captcha and it will show me the image just fine. But on the site, it will not show the image. If i look in the elements. It says the link is <img id="tracking-verifycode-image" src="/site/captcha?v=61783175c7c1d8.59474376" alt="">

But it does not throw any errors as to why it would not be showing up on the screen.

Site Controller

<?php
namespace frontend\controllers;

use Yii;
use frontend\models\ContactForm;
use common\AccessController;
use kartik\widgets\Growl;
use yii\helpers\Url;

/**
 * Site controller
 */
class SiteController extends AccessController
{
    
    public function behaviors() { 
        return [
            'access' => [
                'class' => \yii\filters\AccessControl::className(),
                'rules' => [
                    [
                        'actions' => ['index', 'support', 'error', 'systemdoc', 'systemdoc', 'captcha', 'contact'],
                        'allow' => true,
                        'roles' => ['client1', 'client2', 'client3', 'client4', 'client5', 'client6', 'client7','api', 'clientmanager', 'clientmanager2', 'clientsupervisor', 'clientbeta','3pl4pl'],
                    ],
                    [
                        'actions' => ['api'],
                        'allow' => true,
                        'roles' => ['api'],
                    ],
                    [
                        'actions' => ['captcha'],
                        'allow' => true,
                        'roles' => ['?'],
                    ],
                ],
            ],
        ];
    }
    
    /**
     * @inheritdoc
     */
    public function actions()
    {
        return [
            'error' => [
                'class' => 'yii\web\ErrorAction'
            ],
            'captcha' => [
                'class' => 'yii\captcha\CaptchaAction',
                'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null
            ],
            /*'set-locale'=>[
                'class'=>'common\components\action\SetLocaleAction',
                'locales'=>array_keys(Yii::$app->params['availableLocales'])
            ]*/
        ];
    }

Tracking Controller

<?php
namespace frontend\controllers;

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: PUT, GET, POST");

use Yii;
use yii\web\Response;
use yii\web\Controller;
use app\models\Job;
use app\models\JobHistory;
use app\models\Location;
use app\models\Tracking;

class TrackingController extends Controller
{
    public function actions()
    {
        return [
            'error' => [
                'class' => 'yii\web\ErrorAction',
            ],
            'captcha' => [
                'class' => 'yii\captcha\CaptchaAction',
                'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
            ],
        ];
    }

    public function actionTrackjob() {
        $model = new Tracking();
        Yii::$app->response->format = Response::FORMAT_HTML;
        $this->layout = 'base';
        return $this->render('index',[
            'model' => $model,
        ]);
    }

Tracking Model

<?php


namespace app\models;

use yii\base\Model;

Class Tracking extends Model
{
    public $verifyCode;

    public function rules()
        {
            return[
                ['verifyCode', 'captcha', 'captchaAction' => 'site/captcha']
            ];
        }
}

View Page

                <?php $form = ActiveForm::begin(['id' => 'tracking-form']);?>
                        <?= $form->field($model, 'verifyCode')->widget(Captcha::class, 
                        ['options' => [
                        'placeholder' => 'Enter the letters above',
                        'class' => 'form-control',
                    ]])->label('')?>
                <?php ActiveForm::end(); ?>

Site Photo

  • I would start with removing these direct `header()` calls? Yii 2 has API for headers management and dedicated filter for CORS. Opening developer tools in the browser should also explain why image is blocked. – rob006 Oct 26 '21 at 17:28
  • It appears that it is due to it trying to load the image from site/captcha instead of tracking/captcha. I updated my view to widget options to have `'captchaAction' => 'tracking/captcha'` but it still is pointing to site/captcha – Hunter Bertoson Oct 26 '21 at 17:51

0 Answers0