AI blog · DotApp PHP Framework 2.0

Secure backend-frontend communication in DotApp PHP Framework

Shop UI talks to PHP on one encrypted, session-bound channel. You still have to pick the right surface: a real form, a one-shot load(), a named Bridge function, or uploadFile. PHP always crcCheck() (except the upload endpoint), then rights. Mechanism: How DotApp PHP Framework protects the browser-to-PHP channel. Forms: How to create secure forms in DotApp PHP Framework.

Common mistakes

Decision tree

A fo-rm submit is hijacked into the same load() pipeline. fo-rm does not make a click safer than load(). It makes a multi-field submit bind a handler name, action URL, and method via formName. Client boot: How to use $dotapp() JavaScript. Named functions: How to call PHP from JavaScript with DotBridge.

PHP always crcCheck() then rights

Every Shop mutation on the channel follows the same order. Frontend overlays are UX only.

1. $request->crcCheck() — fail means 400 and no field reads.
2. Decrypt identifiers with the same extra key you used in the template. false → stop.
3. Auth::can() and ownership. Encryption is not authorization.
4. Validate, persist, return { status, message, html } via ajaxReply.

Two layers, both required:

Complete Shop toggle (load, not fo-rm)

One add/edit form may sit above the table. The table itself is buttons. Bind with .live() so replaced HTML still works. Cover #listWrap while the request is in flight (desktop and mobile). Patch a child (#listInner), not the wrapper you overlay.

<div id="listWrap" class="shop_listwrap">
  <div id="status" hide="hide"></div>
  <table>
    <tbody id="listInner">
      <tr data-item="{{ enc(Shop.item.id): $item.id }}">
        <td>{{ var: $item.title }}</td>
        <td>
          <button type="button" class="js-toggle">Toggle</button>
          <button type="button" class="js-delete">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
    

(function () {
  var listBusy = false;
  var listDone = function () {
    listBusy = false;
    $dotapp("#listWrap").removeClass("shop_busy");
  };
  var runMe = function ($dotapp) {
    $dotapp().live("click", ".js-toggle", function (e) {
      if (listBusy) return;
      listBusy = true;
      $dotapp("#listWrap").addClass("shop_busy");
      $dotapp().load("/shop/items/toggle", "POST", {
        id: $dotapp(e.currentTarget).closest("tr").attr("data-item"),
        f: "toggle"
      }, function (raw) {
        var reply = $dotapp().parseReply(raw);
        if (reply && reply.status == 1 && reply.html) $dotapp("#listInner").html(reply.html);
        if (reply && reply.message) $dotapp("#status").attr("hide", "false").html(reply.message);
        listDone();
      }, function () { listDone(); });
    });
  };
  if (window.$dotapp) runMe(window.$dotapp);
  else window.addEventListener("dotapp", function () { runMe(window.$dotapp); }, { once: true });
})();
    

<?php
public static function toggle($request)
{
    // $tableHtml = re-rendered #listInner fragment (rows + pager)
    if (!$request->crcCheck()) {
        return DotApp::DotApp()->ajaxReply(['status' => 0, 'message' => 'Bad request'], 400);
    }
    $data = $request->data(true)['data'] ?? [];
    $id = Crypto::decrypt($data['id'] ?? '', 'Shop.item.id');
    if ($id === false) {
        return DotApp::DotApp()->ajaxReply(['status' => 0, 'message' => 'Bad id'], 200);
    }
    if (!Auth::can('Shop.items.edit')) {
        return DotApp::DotApp()->ajaxReply(['status' => 0, 'message' => 'Forbidden'], 200);
    }
    return DotApp::DotApp()->ajaxReply([
        'status' => 1,
        'message' => 'Updated',
        'html' => $tableHtml,
    ], 200);
}
    

Overlay while in flight

Build the preloader in the Shop module (.shop_busy). Core does not ship a page overlay. Show it before load(). Remove it in both the success and error callbacks. Cover the region being mutated. Intercept pointer and touch. One in-flight request per region. Patch the inner fragment so you do not wipe the overlay node.

Confirm UI before delete

Any Shop delete (row, detail, bulk) opens a graphical dialog first: title, what will be deleted, Cancel, and a destructive confirm. Large enough buttons on a phone. Never alert(), window.confirm(), or prompt(), and never delete on the first click. Put the item name with .text(), not .html(). Only after confirm: overlay + load() with the encrypted id. Build the dialog in Shop assets. Core does not ship one.

$dotapp().live("click", ".js-delete", function (e) {
  var id = $dotapp(e.currentTarget).closest("tr").attr("data-item");
  $dotapp("#shopConfirmTitle").text("Delete this item?");
  $dotapp("#shopConfirmText").text("This cannot be undone.");
  $dotapp("#shopConfirm").removeAttr("hidden");
  $dotapp("#shopConfirm .js-confirm-ok").off("click").on("click", function () {
    $dotapp("#shopConfirm").attr("hidden", "hidden");
    if (listBusy) return;
    listBusy = true;
    $dotapp("#listWrap").addClass("shop_busy");
    $dotapp().load("/shop/items/delete", "POST", { id: id }, function (raw) {
      var reply = $dotapp().parseReply(raw);
      if (reply && reply.status == 1 && reply.html) $dotapp("#listInner").html(reply.html);
      listDone();
    }, function () { listDone(); });
  });
  $dotapp("#shopConfirm .js-confirm-cancel").off("click").on("click", function () {
    $dotapp("#shopConfirm").attr("hidden", "hidden");
  });
});
    

Bridge: named PHP from JS

Use Bridge when you need a discrete named PHP function — a ping, a small lookup — from JS or from template on(click). It is not a replacement for a multi-field Shop form. It still rides the channel (CRC, session keys, Referer binding). PHP registers $dotApp->bridge->fn('ping', …). Full modifiers and error codes: How to call PHP from JavaScript with DotBridge.

uploadFile for files and ZIP

load() and fo-rm post JSON { data, crc }. A file stuffed into FormData on that pipeline cannot carry the CRC. PHP crcCheck() fails and the user sees a generic error instead of your message. Use $dotapp().uploadFile(file, url, progress), then parseReply on the text. PHP uses $request->upload() — do not crcCheck() on that endpoint (there is no { data, crc }). Guard with middleware / Auth::can(). Reject executables in PHP (extension plus finfo on the bytes). Frontend accept= is UX only.

JSON that is not the channel

Browser Shop actions on the channel return ajaxReply for parseReply. If you need an ordinary JSON HTTP endpoint (not this browser channel), register it with Router and return Response::json. Do not send channel posts as raw JSON with fetch. Do not mix ajaxReply and Response::json on the same action.

<?php
Router::get('/shop/catalog.json', 'Shop:Catalog@index!', Router::STATIC_ROUTE);

public static function index($request)
{
    return Response::json(['status' => 1, 'items' => $rows], 200);
}
    

When the surface is a form

Several fields plus Submit: fo-rm, formName between the tags, generated dotapp.js, .form() with halt and loaders, PHP crcCheck() then form(['POST'], 'saveContact', ok, err), then ajaxReply. Complete files: How to create secure forms. Lists that grow: pager and search via load(), not ?page= reloads — How to build AJAX lists with pagination.