Invisible mode not invisible

[nadorator]

Hello, i am trying to use invisible mode for mosparo. I did configure the project with Design mode invisible spam protection simple.

I have added the frontend in smarty like this:

<div id="mosparo-box"></div>
            <script src="XXXXXXXXXX/build/mosparo-frontend.js" defer></script>
            <script>
                var m;
                let contactName = 'contactForm_{$contact.id}';
                let formButton = 'button_button_form_contactv2_{$contact.id}';
                {literal}
                window.onload = function(){
                    m = new mosparo(
                        'mosparo-box',
                        'https://XXXXXXXXXXXXX',
                        'XXXXXXX',
                        'XXXXXXXX',
                            {
                                allowBrowserValidation: true,
                                loadCssResource: true,
                                doSubmitFormInvisible: () => {
                                        document.querySelector('#'+formButton).style.display='block';
                                    },
                                language: 'fr_FR',
                                onCheckForm: function (valid) {
                                    console.log('onCheckForm', valid);
                                },
                                onResetState: function () {
                                    console.log('onResetState');
                                },
                                onAbortSubmit: function () {
                                    console.log('onAbortSubmit');
                                },
                                onSwitchToInvisible: function () {
                                    console.log('onSwitchToInvisible');
                                },
                                onValidateFormInvisible: function () {
                                    console.log('onValidateFormInvisible');
                                },
                                onSubmitFormInvisible: function () {
                                    console.log('onSubmitFormInvisible');
                                }
                            });
                };
                {/literal}
            </script>

When the form intialize i got the message onSwitchToInvisible correctly but it does not turn the box invisible:

What can I do to have the real invisible box instead?

[zepich]

Hi @nadorator

Thank you very much for your question.

Have you saved the design settings once after switching to the invisible mode?

If yes, can you clear the browser cache?

It looks like the default CSS file is used instead of the one for your project.

Kind regards,

zepich

[nadorator]

when checking https://space-dock.starfleet-command.eu/resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a.css i am redirected to https://space-dock.starfleet-command.eu/build/mosparo-frontend.css is it normal?

i have double checked the save process it seems to work but the css result is the same is this due to the redirect?

[zepich]

Hi @nadorator

No, it should not redirect you to the /build/mosparo-frontend.css file.

It should redirect you to /resources/<project-uuid>/<design-settings-hash>.css.

This file should exist on your server in the directory public/resources/<project-uuid>. Can you check if there is a file in this directory?

Kind regards,

zepich

[zepich]

[nadorator]

ok i have used the uuid in the css file name so the doc is not ok then : https://documentation.mosparo.io/docs/integration/custom

I am checking for the correct file name to use.

[zepich]

Hi @nadorator

Which part of the documentation is not okay from your perspective?

You use the loadCssResource option of the JavaScript API. With this, mosparo will include the styles automatically by adding a stylesheet to the page with the URL

https://<your-mosparo-host>/resources/<your-project-uuid>.css

mosparo then redirects this request to the latest version of the actual CSS file for your project, which is located in the directory public/resources/<your-project-uuid>/ and has the name <your-project-design-hash>.css.

It only redirects to /build/mosparo-frontend.css if the project CSS file is unavailable.

Please check if you have a directory with the UUID of your project in the directory public/resources. Is there a file in it?

Kind regards,

zepich

[nadorator]

in fact the doc is ok.

In the folder i have:

return array (
  '/resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a.css' => '/resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a/340b7d9f718e19a2fb244f376296f22274b2e79c3c4d70b726f9835acbdc1ba6.css',
);

in the mapping file so the doc is ok but the file /resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a/340b7d9f718e19a2fb244f376296f22274b2e79c3c4d70b726f9835acbdc1ba6.css is not created at all beside the server as full access to the resources folder.

[nadorator]

I have found the problem. It is in the source code of DesignHelper class

When doing:

if ($file->isDot() || $file->getPathname() == $cssFilePath) {
                    continue;
                } 

to bypass the css cache just created the comparison with getPathname() is not working at all and it does not do the continue on the for loop. So instead it deletes instantly the newly created css cache.

[nadorator]

I have changed on my version the code to:

            foreach ($directoryIterator as $file) {
                if ($file->isDot()) {
                    continue;
                }
                $this->filesystem->remove($file->getPathname());
            }

            // Write the CSS file
            $this->filesystem->dumpFile($cssFilePath, $content);```

[nadorator]

Another problem on the css url it seems to redirect in an infintite loop on https://space-dock.starfleet-command.eu/resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a/340b7d9f718e19a2fb244f376296f22274b2e79c3c4d70b726f9835acbdc1ba6.css for

/**
     * @Route("/{projectUuid}.css", name="resources_project_css", stateless=true)
     * @Route("/{projectUuid}/{styleHash}.css", name="resources_project_hash_css", stateless=true)
     */
    public function redirectToStyleResource(string $projectUuid): Response

[nadorator]

Here is the new code I have used to make the infinite redirect stop, there was some missing code in the source. I have completed lilke this:

/**
     * @Route("/{projectUuid}.css", name="resources_project_css", stateless=true)
     * @Route("/{projectUuid}/{styleHash}.css", name="resources_project_hash_css", stateless=true)
     */
    public function redirectToStyleResource(string $projectUuid, string $styleHash = null): Response
    {

        $project = $this->projectRepository->findOneBy(['uuid' => $projectUuid]);

        if ($project === null) {
            return new Response('404 Not Found', 404);
        }

        $cssFilePath = $this->designHelper->getCssFilePath($project);
	
        if (file_exists($cssFilePath)) {
	    if (!empty($styleHash)) {
		$response = new Response();
                $response->headers->addCacheControlDirective('no-cache');
 	        $response->setContent(file_get_contents($cssFilePath));
		return $response;
	    }
            $resourceUrl = $this->generateUrl(
                'resources_project_hash_css',
                ['projectUuid' => $projectUuid, 'styleHash' => $project->getConfigValue('designConfigHash')],
                UrlGeneratorInterface::ABSOLUTE_URL
            );
        } else {
            $resourceUrl = $this->designHelper->getBaseCssFileName();
            $cssFilePath = $this->designHelper->getBuildFilePath($resourceUrl);
        }

        $cssFileTime = filemtime($cssFilePath);
        $cssFileDate = (new DateTime())->setTimestamp($cssFileTime)->setTimezone(new DateTimeZone('UTC'));

        $redirectResponse = new RedirectResponse(
            $resourceUrl,
            307
        );
        $redirectResponse->setLastModified($cssFileDate);
        $redirectResponse->setPublic();
        $redirectResponse->headers->addCacheControlDirective('no-cache');

        return $redirectResponse;
    }

[nadorator]

Now there is again a new problem. With automatic css loading it tries to load /resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a.css first then do a redirect 307 to /resources/e9f52df7-b34e-473f-bdb4-9ce3d178055a/340b7d9f718e19a2fb244f376296f22274b2e79c3c4d70b726f9835acbdc1ba6.css

the problem: on chromium linux the second url loading does an ERR ORB blocking error. beside opening it directly works better.

I'll remove the auto loading feature and use a tag instead...

[nadorator]

I have solved the ERR ORB blocking by adding the header content type text/css on my previous code also I have removed the mapping in index.php and simplified the redirectToStyleResource function as it have to ever return the css file generated from getBuildFilePath the redirect is in fact not needed at all if the content of the css is put in the response directly.

Beside, now that the invisible mode is working fine, i have a problem on my submission results.

When not invisible I correctly have all my filed "verified" but when in invisible mode all field are marked not verified ... why?

I have also got error message: "Verification failed."

[zepich]

Hi @nadorator

Thank you very much for all your messages. Let's discuss these issues.

The non-existing CSS file

In general, the logic of the cleanup you adjusted should work perfectly fine because we're only removing the old files, not the new ones. This should not be a problem at all.

The idea is to store the new file and then clean up the old files to ensure there is always a file.

I think it has something to do with your hosting. Can you please let me know what exact setup/hosting you're using so I can test the same setup on my side?

The redirect

The redirect is here to clear the browser cache automatically. Your browser should cache the final CSS file (/resources/<uuid>/<hash>.css), so as soon as you change a design setting, your browser will be redirected to the new file (/resources/<uuid>/<new-hash>.css) and does not use the old one again. We tried different approaches to clear the browser cache, but this one was the one that worked the best.

The endless redirect

This happens probably because your web server does not serve the CSS file directly and instead gives the request to PHP/Symfony, which then returns with another redirect. As I wrote in "The non-existing CSS file", I would like to test this one on a similar setup as yours so I can adjust mosparo accordingly.

It looks like your webserver is not prioritizing the requests correctly. Requests for existing files should be returned from the server directly (for maximum performance), and PHP should process only requests for non-existing files.

Verification failed

That's a very complicated question, to be honest. I recommend enabling the API debug mode in the project settings and then var_dump the complete response from the API. You should see why it fails to process the verification request from your backend.

When the error message from the API is Verification failed, it could be the minimum time security feature or an issue with the validation signature. The debug mode should show you what the issue is. You could post the response from the API with the enabled debug mode so we can see where the problem is.

Kind regards,

zepich

[nadorator]

Hello, first thank you for your quick replies that's very refreshing those days.

I am totally agree with all your points. You are probably right that's why i did the updates only on my version and not ask for a PR :)

I am using windows server 2019 with IIS 10 therefore the RewriteBase / does not exist with IIS 10. It is possibliy part of the problems. With PHP 8.1.27 and all required modules actives except posix on OVH VPS.

Secondly the 307 redirect is another huge problem in my case because chromium is blocking the subsequent loaded css after the redirection by closing the connection directly. As the content of the css won't change often the cache is not a real problem for me. Also we can use a random number in parameter with the css url to bypass cache problems for good like .css?r=4588412

I had the infinite loop even with the existing CSS. There is a missing rules in the htaccess/web.config to permit the file to be served directly then instead of using symfony. I can give the rule for both apache and IIS as I use it for another project as well on css files and did not use it for this project.

Thanks again for the advice on the Verification failed, I will try that and check further.

Regards,
Nadir.

[nadorator]

I got my response, the validation token is empy in the post when I click on the submit button because the hidden field is set at the same time but the form is already sent. I am checking how to change that.

thanks.

PS : finally I have added a onclick="void(0);" on the submit button and used

onSubmitFormInvisible: function () {
                                    console.log('onSubmitFormInvisible');
                                    beforeSend(contactId);
                                }

to process the form with the validation token in the invisible mode now all is fine.

[zepich]

Hi @nadorator

Thank you very much for your replies.

Setup

Can you share your IIS/web.config settings so I can test it myself?

Redirect

I see the redirect problem in general, but it should not be responded to at all by the PHP process. So, I want to test it to add the required solution, at least in the documentation.

I will add a fallback to prevent the endless redirect with the next bigger version (v1.2).

Is the problem in Chromium still the ORB issue? I tested it in Chromium 122 and had no problems with the redirect.

Browser caching

Bypassing the cache with a query argument (.css?r=4588412) is generally a good idea, but it will not work in our case since we don't know when the file has changed (in mosparo). With the solution right now, we maximize the use of the browser cache while not having any negative effect on it.

I don't know if you saw that already, but we offer a small "API" (it's just a request that returns the required info, so it's not really an API) to get the real URL of the CSS file. You will get the full URL to the cached CSS file if you call <your-mosparo-host>/resources/<your-project-uuid>/url. With this "API", you can create a cron job and cache the full URL to the CSS file to include it directly without the redirect.

Verification

Thank you very much for your update regarding the issue. In general - as you found out - it's an issue of the order of the process. I guess the form was submitted too early, so mosparo could not validate the form data. I'm happy that you found the solution to that!

Kind regards,

zepich

[nadorator]

Sorry to not have replied sooner right now it is working fine on the IIS plateform with the update I did. Also I have seen the other question about a better version for CSS with IIS which is a great information very usefull to correct differently the same problem.

Right now my web.config settings is like this:

<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <cors enabled="true" failUnlistedOrigins="true"> <add origin="*" /> </cors> <handlers> <add name="php8.1 phalcon5" path="*.php" verb="*" modules="FastCgiModule" scriptProcessor="C:\server\php\php-8.1.27-nts-Win32-vs16-x64\php-cgi.exe" resourceType="File" requireAccess="Script" /> </handlers> <defaultDocument> <files> <add value="index.php" /> </files> </defaultDocument> <rewrite> <rules> <rule name="Imported Rule 1" stopProcessing="true"> <match url="^build(.*)$" ignoreCase="false" /> <action type="Rewrite" url="public/build/{R:1}" /> </rule> <rule name="Imported Rule 2" stopProcessing="true"> <match url="^bundles(.*)$" ignoreCase="false" /> <action type="Rewrite" url="public/bundles/{R:1}" /> </rule> <rule name="Imported Rule 3" stopProcessing="true"> <match url="^robots.txt$" ignoreCase="false" /> <action type="Rewrite" url="public/robots.txt" /> </rule> <rule name="Imported Rule 4" stopProcessing="true"> <match url="^(.*)$" ignoreCase="false" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" /> </conditions> <action type="Rewrite" url="public/index.php" appendQueryString="true" /> </rule> </rules> </rewrite> </system.webServer> </configuration>

In the linux version I use in production I have no any redirect problem and all is working very fine. The installation was smooth and worked like a charm.
`