[Megoldva] Webes form mezőinek az azonosítása

Internet: PHP, CGI, stb.

Adott egy belső céges oldal, rajta egy webform, Smartsheet-ben lett elkészítve. Ezt nem akarom kézzel töltögetni, mert sok egyforma adatot kell bevinni, ezért automatizálnám. Viszont nem találok rajta fogást. Hiába néztem a form kódját, a HTML kód semmit nem mond, csak egy js-re hivatkozik, azt megnyitva meg egy sorba obfuszkált szar kód, nem látom át, nem értem mit csinál. A kódot csak holnap tudom csatolni, ma elfelejtettem kimenteni. Próbáltam a böngésző inspection funkcióját, de az se írja. Nekem csak a mezők neve/id-je kéne. Hogy lehetne megnézni?

Egyelőre AutoHotKey scripttel automatizálom a bevitelt, működik, de elég amatőr és lassúcska, jobb lenne, ha inkább közvetlenül ?név1=érték&név2=érték formában küldeném el a weben. Gondolom, hogy a form nem GET-et használ, mivel nem látom küldéskor, hogy elküldene URL-t, de elvileg az URL átmókolása működhet POST-os feldolgozás esetén is.

Megoldás: a Smartsheet oldalán lévő leírásban foglaltak működtek. Mégis csak megy a form?label1=value&label2=blahblah módszerrel. Igaz nem küldi el automatán, de előre kitölti így a mezőket a böngésző, AutoHotKey szkripttel meg én nyomok rá az elküldés gombra. Sajnos azt a Smartsheet szándékosan nem tudja, hogy az elküldés is automatizált legyen, csak az előkitöltést támogatják.

  • 1013 megtekintés

( locsemege v | 2025. 03. 11., k – 22:24 )

Nincs az inputnak id-je? Persze, ha js, akkor gondolom, az generálhat id-t, akármit. Szerintem a HTML Document Object Modelből JS-sel hozzá tudsz férni. Már, ha megértettem, de nem biztos. Ha automatizálsz, mi van a böngésző helyén? Egy wget vagy curl?

tr '[:lower:]' '[:upper:]' <<<locsemege
LOCSEMEGE

Azt még nem tudom, hogy curl vagy wget, valami ilyesmire gondoltam. Pont ez az, hogy nincs a HTML és JS kódban klasszik input tag-es mező, ami írná a name, id adatokat.

Ehhez a DOM-hoz JS-tel hogy férek hozzá, valami példát tudnál írni rá vagy linkelni?

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Csináltam műszerhez részleges webes felületet, de ott ugye én írom a szerver oldali php kódot is, és a kliens oldali html, css, js kódot is. Hirtelen ebben gondolkodtam, de itt a js-t nem te írod, azt a szervertől kapod. Tehát, ha jól értem, egy böngészőt akarsz emulálni, de ahhoz magadnál kell futtatni a szervertől kapott js-t is, meg ez egész DOM-ot emulálni kellene, gondolom, ellenkező esetben szerintem elhasal a szerver által küldött, kliensen futtatandó js. Vigasztalj meg, hogy nem egy fél délután akarsz megírni valamilyen scriptnyelven egy GUI nélküli böngészőt! :)

tr '[:lower:]' '[:upper:]' <<<locsemege
LOCSEMEGE

( x-daemon | 2025. 03. 11., k – 22:25 )

irj be teszt adatokat, es nezd meg a firefox webtools (f12) halozati fulen, hogy mit kuldott. ugyanabban a formaban te is el tudod kuldeni az adatot.

neked aztan fura humorod van...

Ú, kösz, ez eszembe se jutott, hogy nem csak az inspector-ral, de a network részen is lehetne detektálni, hogy mit küld el a form. Kipróbálom holnap.

Szerk.: sajnos nem jött össze, a network részen se hozott a böngésző használhatót.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

( locsemege v | 2025. 03. 11., k – 22:51 )

Az elinks valahogy nem scriptelhető? Mindenesetre külső editor megadható neki az EDITOR környezeti változóval, ami ígéretes.

tr '[:lower:]' '[:upper:]' <<<locsemege
LOCSEMEGE

Kösz szépen a tippeket, az Auto Fill Form plugineken kívül kipróbálom ezt a Selenium-ot, Robot framework-öt.

Szerk.: közben nyálazom a Smartsheet doksit, és az azt írja, hogy ha nincs bejelentkezés kényszerítve a formon (már pedig az esetemben nincs), akkor mégis csak működik az formURL?field1=value&field2=blahblah módszer. Csak ki kéne derítenem a címkéket, ezek alapértelmezetten a Smartsheet adott táblázatának az oszlopnevei, majd meglátjuk. Még itthonról írok, majd csak a melóban tudom kipróbálni. Mondjuk hátránya ennek a módszernek, hogy ez csak kitölti a formot, de nem küldi el feldolgozásra a szerverre, nekem kell a beküldés gombot nyomni, de ezt ki fogom tudni hekkelni AutoHotKey-vel. Persze szerettem volna elegánsabban megoldani, curl vagy wget segítségével, hogy csak előre preparált URL-eket küldözgetek, minimális közbeiktatott várakozási időkkel, az platformfüggetlen is lett volna, meg gyorsabb.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Hát, akkor ezt érdemes lenne a webet annó csináló tudományos munkatársakkal megbeszélni, hogy az egyik kezükkel miért írták le, hogy a GET idempotens, a másikkal meg, hogy a form default actionja a GET, ami meg url encodeolva felküldi az adatokat.

De nem kell, mert ez valójában egy közleletű féreértés, az idempotencia nem azt jelenti, hogy nem okozhat változást, hanem azt, hogy:

 

A request method is considered "idempotent" if the intended effect on
   the server of multiple identical requests with that method is the
   same as the effect for a single such request.  Of the request methods
   defined by this specification, PUT, DELETE, and safe request methods
   are idempotent.

   Like the definition of safe, the idempotent property only applies to
   what has been requested by the user; a server is free to log each
   request separately, retain a revision control history, or implement
   other non-idempotent side effects for each idempotent request.

   Idempotent methods are distinguished because the request can be
   repeated automatically if a communication failure occurs before the
   client is able to read the server's response.  For example, if a
   client sends a PUT request and the underlying connection is closed
   before any response is received, then the client can establish a new
   connection and retry the idempotent request.  It knows that repeating
   the request will have the same intended effect, even if the original
   request succeeded, though the response might differ.

 

(Korábban kevesebb szóval az volt leírva, hogy ugyanannak a requestnek sokszor ugyanaz lesz a sideeffektje). Annyiról szól, hogy ha azt hiszed, hogy baj van, akkor elküldheted újra. Tehát egy ugyanolyan GET nem szabadna, hogy duplikátumot okozzon véletlen (ez egyébként nem szokott sikerülni)

az egyik kezükkel miért írták le, hogy a GET idempotens, a másikkal meg, hogy a form default actionja a GET, ami meg url encodeolva felküldi az adatokat

Pl. search form vagy egyéb adatbázislekérdező műveletek? Gondolom, nem véltelenül hívják az URL-ben átadott értékeket sem "query paramétereknek".

Amúgy szerintem ezt így nem tudták leírni egyik és másik kezükkel, mert a GET a HTTP része, a FORM meg HTML része. :)

De nem kell, mert ez valójában egy közleletű féreértés, az idempotencia nem azt jelenti, hogy nem okozhat változást, hanem azt, hogy

Az idempotenciában igazad van, csak itt pont nem az az érdekes tulajdonság, ezt zeller kolléga rosszul írta (láttam hasonlóan rossz megfogalmazást HTML RFC-ben is), hanem a "safe". Idézet ugyanonnan:

Request methods are considered "safe" if their defined semantics are essentially read-only; i.e., the client does not request, and does not expect, any state change on the origin server as a result of applying a safe method to a target resource.

[...]

Of the request methods defined by this specification, the GET, HEAD, OPTIONS, and TRACE methods are defined to be safe.

Igen, GET-tel, de nem kerül feldolgozásra az adat, csak mező-előkitöltésre van használva, beküldened neked kell kézzel, JS-es gombbal. Tehát amolyan GET is, meg nem is. Elég kókányolt egy rendszer ez a Smartsheet, én is csak pár hete dolgozok vele, előtte nem is hallottam róla. Ez valami webes táblázatkezelő, de nem tud adatbázist, viszont ilyen form-gyártást, Gantt-nézetet tud kiegészítőleg.

Persze, én is szeretném, ha valami normálisabbal dolgoznának, mondjuk egy FOSS adatbázissal, az nem érdekel, hogy MariaDB, MySQL, Postgress, SQLite, csak értsen valami dokumentált SQL parancskészletet, és azzal nyomathatnám tömeges INSERT-tel, nem kéne URL-ekkel meg formokkal szórakozni, mint az őskorban.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Igen, pont ez az. Az adatokat bevihetném simán táblázatszerűen, tömeges beillesztésként Smartsheet-ben, de a főnök lezárt egyes oszlopokat, hogy közvetlenül nem lehet a táblázathoz semmit adni, csak a formon keresztül, ezt szerintem azért csinálta, hogy validálja a bekerülő adatokat.

Sajnos a Smartsheet API-t meg az új form létrehozását nem használhatom, mert nincs meg hozzá az admin jogom a Smartsheet felületén.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

vannak form auto fill böngésző pluginek. Régen használtam már valamire őket, és így konkrét névre nem emlékszem, h melyiket. De kb az volt, h egy kitöltöttem az inputmezőket és akkor azt el lehetett menteni, és akkor mindig amikor bejött az url akkor az inputokat automatikusan kitöltötte a mentett adattal. Keress rá! 

"antiegalitarian, antiliberal, antidemocratic, and antipopular"

( kroozo v | 2025. 03. 11., k – 23:09 )

Próbáltam a böngésző inspection funkcióját, de az se írja

Pedig valamit ott elnéztél. Az lehet, hogy a konkrét oldal forrásában kb csak egy scriptként behivatkozott JS van (az meg nyilván minified, embernek olvashatatlan), de ha megjelenik a browserban, akkor bizony ott html lesz*, a DOMban látszani kell azoknak a mezőknek. Jobb click valami elemen, inspect, és ott lesz az.

?név1=érték&név2=érték

Az más kérdés, hogy szinte biztosan nem egy simán formként felpostolt cucc lesz jó eséllyel. A legtöbb ilyen keretrendszer valami AJAX hívást csinál hátul jsből, nem a főoldallal postol általában, szóval tényleg a legjobb azt nézni, hogy mit küld hátul a netwörkön.

Vagy hát, ha erről a smarsheetről van szó, akkor annak van apija, leírással: https://smartsheet.redoc.ly/#section/Introduction , meg van vagy 5 féle sdk hozzá.

* Jó, persze, lehetne valami webassembly, ami csak egy canvasra rajzolgat, de kétlem :)

Nem, nem néztem be. De rájöttem az okára, ez nem form. Úgy néz ki, mintha form lenne, de ez egy teljesen JS-es mókolás, ide feltöltöttem 7-zip-pel csomagolva, mivel Windowson készült. A HTML-t nem mentettem el, mert abban tényleg nincs semmi, szokásos header, body, meg erre a JS-re hivatkozás, semmilyen értelmes tartalmi tag nincs benne, se input, se semmi más.

A Smartsheet terén nem a hozzáértésemmel van baj, mert elboldogulnék vele, hanem hogy nincs az adott táblázatokhoz admin jogom, így se az API-t nem tudom használni, se új formot létrehozni, se semmit. Admin joga csak a főnöknek van.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Ja, én is így vagyok vele, de mivel új vagyok, nem pofázhatok. Egyébként én értem, validálni akarja a bekerülő adatokat, és csak ezen a formon keresztül tudja megoldani. Gondolom korábban a sok normi balfék érvénytelen adatokat vitt be állandóan.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Kösz, ez is nagy segítség volt. Így normális formában átnézve a JS kódot, ez egy nagyon általános generic kód, nincs benne az adott form-ra vonatkozó specialitás. De legalább ezt a lehetőséget is szépen kizártuk. Azért halad előre a projekt, még ha lassan, mm-enként is.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Nem, nem néztem be

őő, hát két lehetőség van:

  • ez a smarsheets a kb egyetlen olyan webes alkalmazás, ami html dom nélkül rajzol beviteli mezőket egy weboldalra, és aztán oldalt galambpostával küldi el az adatokat a backendnek
  • benézted

:) Szóval de. Vagyis hát, nem érted, hogy mit nézel. Persze, hogy abban a jsben semmi form specifikus nincs, az az kód, ami az egész oldalt összerakja, elemről elemre, aztán mikor kattogtatsz rajta, akkor felküldi. Ha megnézed inspectorra a lerenderelt oldalt (és nem a html forrást), akkor látni fogod, hogy bizony ott van a domban a dinamikusan összeraktott html.

rájöttem az okára, ez nem form. Úgy néz ki, mintha form lenne, de ez egy teljesen JS-es mókolás

Igen, pont ezt mondtam, hogy ma már elég ritka (ilyen bonyolultabb interaktívabb vackoknál meg gyak nem létező), amikor úgy megy fel egy form, hogy elnavigálja a usert egy POSTttal valami x-form-url-encoded formában (pláne egy urlbe írt GETtel). Ehelyett a user által nézett oldal nem megy sehova, hanem mikor megnyomja a save gombot, akkor a javascript először is jól ellenőrizget egy sort általában, aztán tipik összerak a beviteli adatokból valami jsont, és azt hátul egy ajaxxal fel fogja küldeni, a válasz alapján meg updateli a domot hogy a user lássa pl a veri széved popupot. És ezeket a requesteket 100%, hogy fogod látni azon a netwörk tabon (és nagyobb tételben mernék fogadni, hogy rohadtul hasonlítani fognak arra, ami az api leírásban van ;)

 

A Smartsheet terén nem a hozzáértésemmel van baj

Nem, azzal a webes technológiák körül van baj, láthatólag le vagy maradva úgy nagyvonalúan 15 évvel. :)

Egyébként én meg ezt nem értem, minek ez a cowboy baszakodás? Ha ez szopás, akkor oda kell menni a főnökhöz, hogy figyumán, fel kéne rögzíteni 42 ezer ilyen fost, nem fog menni a formon. Aztán vagy hagyja, hogy csináld direktben, vagy apit hozzáférést, (elmondva, hogy valójában miért van a form, és a lock). Vagy közli, hogy márpedig leülsz, azt bepötyögöd. Mi a tökért vakarózol két napja hátulról?

 

Annyira élethűen HTML input tag-es formnak tűnik megjelenésre ez a spreadsheet-es szar, hogy tényleg nem gondoltam volna, hogy ez egy JS-es barmolás, ami csak szimulálja a form-os működést. Ez nem lemaradás, ilyet nem láttam még, hogy így oldják meg az egészet. Láttam már HTML form + AJAX-os megoldást, de olyat nem, ami így teljesen HTML input tag nélkül old meg mindent. Az is igaz, hogy nem vagyok webdev. Plusz védelmemre legyen mondva, hogy az illető JS egy 50 ezer soros szösszenet, egy sorba obfuszkálva, jó, hogy elsőre nem vágtam le belőle a poént.

Végül egyébként jó volt a gyanúm, formurl?parameter1=ertek&parameter2=bizbasz lett a megoldás. Nem küldi el automatán, de eleve kitöltve tölti be a „formot” így a böngésző. Automatán küldeni nem lehet, de azt AutoHotKey-vel oldom meg. Elvileg lehetne powershellben, a böngészőnek küldött JS-es üzengetéssel, de az AHK-t amúgy is kell használnom a folyamat során másra is, így végül is nem baj.

Volt egy kis nehézség, hogy mik a paraméternevek, de végül vagy a Spreadsheet tábla oszlopának a címe volt, vagy az form mező fölötti kiírás, így egy kis próbálkozás kellett hozzá, de megoldottam. Egyelőre ma csak leteszteltem, nem kellett még semmire, majd holnaptól nyomatom be a tételeket automatizáltan, lesz egy csomó, kb. 500 formkitöltés, ami gépírva is igénybe venne egy teljes napi munkaidőt, de így csak kevesebb, mint egy óra lesz, mivel tesztképpen még kézzel nyomkodom az elküldés gombot, ha jól vizsgázik, legközelebb már nagy tételnél is automatikus lesz az egész, akkor meg töredéke idő. Azért semmiképp nem egy pillanat egy kitöltés, mert a böngésző komotósan tölti be a formot, meg utána küldésnél is időzik, megnézi, hogy a szerver elfogadta-e az adatokat. Így kb. 5-10 mp. mindenképp rámegy egy beküldésre. Mondjuk ha teljesen URL-ben küldeném az egészet, külön böngészőrender nélkül, akkor is várni kéne két beküldés között, hogy ne tűnjön DoS/spam támadásnak.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Annyira élethűen HTML input tag-es formnak tűnik megjelenésre ez a spreadsheet-es szar, hogy tényleg nem gondoltam volna, hogy ez egy JS-es barmolás, ami csak szimulálja a form-os működést. Ez nem lemaradás, ilyet nem láttam még, hogy így oldják meg az egészet. Láttam már HTML form + AJAX-os megoldást, de olyat nem, ami így teljesen HTML input tag nélkül old meg mindent.

Persze, hogy annak tűnik, mert az. Hidd el, hogy ha egy weboldalon egy beviteli mezőt látsz, az az esetek 99.99%-ban egy <input>. Általában benne is van egy <form>-ban. Csak nem a backend rendereli ki a htmlt, mint régen, hanem a frontenden a js. Te bekvered a fejedben a form actiont meg a submit típusú inputot bele, az nincs, de attól az még egy form. Csak nem felpostoljuk/geteljük, hanem a JS csinál vele valamit.

Ma már szinte minden minden komplexebb web alkalmazás u.n. single page web app, a browser egyszer betölti, aztán az ő szempontjából többet nem történik navigáció, elindul a js, és az csinál mindent. Összerakja a html elemeket valahonnan beszedett adatokból, kezeli a gombnyomásokat, amik hatására visszaküld adatokat, meg amiket kap, azokkal on the fly updateli a renderelt htmlt (Egy átlagos angular oldal html forrása kb annyi, hogy "<body><app-root/></body>"). A backend meg olyat nem csinál, ő jellemzően json adatokat lát, és csoki. Mert valójában a klasszikus webes ide-oda navigálgatunk, az rohadt alkalmatlan komplex, interaktív feladatokra, mikor nulláról kéne újratölteni a mindenséget is egy gomnyomásra. Szóval csinálja a JS, még mikor azt hiszed, hogy navigáltál, mert változik az url, akkor is. Még ami nem SPA, és a nagyobb darabok között klasszikusan navigál, az is ezt csinálja legalább valamennyire mindenféle kicsit is komplexebb formon. És ma már ez az alap, kb bárminél, ami nem faék egyszerű. Szóval de, le vagy maradva :)

Nem kell form meg submit gomb. Igen röviden:

van egy ilyen meződ aminek az ID je data1

<div id="data1" contenteditable="true">Ezt  lehet editálni</div>

Ha valami esemény , akéemi elindit egy javascriptet, a javascript megkeresi a data1 értékét és elküldi a mgfelelő helyre..... 
Semmi submit, semmi form, a küldést intézi a js: (de már ezt az oldalt is a js-sel egy js állította elő, )

document.getElementById('data1').addEventListener('input', function() { sendData('data1'); });

senddata meg intézi. 

https://blog.claryel.hu

Erre ránézek, mert ilyet még nem láttam.

Egyelőre működik a módszerem, URL?parameter1=érték1&parameter2=blabla... módszerrel előre kitöltöm a formot, ezt is már AutoHotKey2 szkripttel küldöm a böngésző címsorába, majd elküldöm, szintén ugyanaz az AHK szkript, lemegy az oldal aljára, ott megnyomja nekem a JS-es gombot, és elküldődik a form, én csak egy dedikált gyorsbillentyűt nyomok, a többi része automata.

Sajnos kicsit lassú, 6-7 másodpercnek el kell telnie két beküldés között (erről is gondoskodik a szkript), mert ha gyorsabban csinálom, a Smartsheet szerver egyre jobban lemarad, utána meg sokáig nem is veszi be a beviteleket, csak látszólag, gondolom valami spam/DoS filterbe futok bele. Így alig gyorsabb, mint gépírva meg Ctrl+C/Ctrl+V vagy Ctrl+C/Win+V-vel töltögetni, de kevesebb mentális munka, kényelmesebb. Azért van, hogy 500 formot is elküldök egy nap, ennél mindegyiknél 11 mezőt kitölteni azért nagy munka, ehelyett könnyebb csak 500 darab gyorsbillentyűt nyomni. Majd nagyobb fokban automatizálom még, de teljesen nem lehet, mert azért van pár tétel, ami más, meg nem csak a termék sorozatszám változik, hanem más adat is, de abból is van pár ugyanolyan. Olyan sokszor van, hogy 200-300 tételnél minden megegyezik, csak a sorozatszám tér el, ennél a legnagyobb segítség a minél nagyobb fokú automatizáció.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

Get: 

Ai csinált egy js+GET metódusos küldést, xx.hu szerver persze nem válaszol majd:

irj egy htmloldalt ami egy bevitrli mezöt tartalmaz, ha ez a mezo a focusból kikerül egy javascript induljon el és get metódussal küldje el az xx.hu serverre a mezőben lévő szöveget

 

debuggolás, léptetés: F12 - sources -event lisener -> control ->blur- pipa. 
F12 - network fülön ott lesz a get a megszokott formában 

Request URL:

https://xx.hu/?input=aaaa

 

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beviteli mező</title>
    <script>
        function handleBlur(event) {
            const value = encodeURIComponent(event.target.value);
            const url = `https://xx.hu?input=${value}`;
            
            // Egy GET kérést küldünk a szerver felé.
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hiba történt a kérés során!');
                    }
                    return response.text();
                })
                .then(data => console.log('Szerver válasza:', data))
                .catch(error => console.error('Hiba:', error));
        }
    </script>
</head>
<body>
    <h1>Beviteli mező példa</h1>
    <label for="inputField">Írj be valamit:</label>
    <input type="text" id="inputField" onblur="handleBlur(event)">
</body>
</html>

https://blog.claryel.hu

F12, source, -> event listener ->mouse, keyboard. A debugger pl. ha egérlenyomást észlel elkezdi lépésenként futtatni a scriptet. 
Figyeled , tovább léptetsz és szép csendben megőszülsz...  :-)

Beállításokban source map ne legyen kipipálva.

https://blog.claryel.hu

Ezt azért kipróbálom holnap, kíváncsiságból. Ilyen event listening-es léptetést nem csináltam még, annyira kíváncsivá tettél, hogy már csak érdekességképp is kipróbálom.

Szerk.: a fenébe, ezt elfelejtettem megnézni, majd csak hétfőn tudom pótolni.

“The world runs on Excel spreadsheets.” (Dylan Beattie)

( fezo | 2025. 03. 13., cs – 16:12 )

Python - Selenium - Chrome/Gecko driver?

Minden hulla a Mount Everesten valamikor egy nagyon motivált ember volt.