PHP-nytt fra London, og frontend fokus på skjema

Transkript

1 KristiansandPHP PHP-nytt fra London, og frontend fokus på skjema Møte nr 1

2 PHP user groups

3 Norden: København, Helsinki og Kristiansand

4 Agenda 18:00 velkommen 18:15 PHP fokus 19:00 pizza! 19:15 frontend fokus 19:45 uformell mingling 20:00 ferdig

5 Kort om Morten Jobbet som webutvikler (frontend og fullstack) i 13 år Perl, Java, PHP, ASP og ASP.NET Jobbet for Ericsson, Logit-Systems, Current Software og Netlab Bakgrunn fra drift, support og opplæring Hobby-firma, getonweb i 12 år (av og til er det litt kjedelig på jobb )

6 Hvem er vi? Navn? Firma? Hva du lager? Hvor mange år har du programmert i? Hvilke andre språk har du jobbet med? IDE/editor?

7 list=pl_apvo2hegf_vdltpuf6ving LC7Raph0i PHP UK Conference 2015 Morten har vært på PHP UK Conference 2015 nettopp, og kom hjem til Norge med mange impulser og fantastiske opplevelser. 700 PHP-nerder samlet i 2 hele dager, foredragsholdere fra USA, Italia, Tyskland og England :-)

8

9 Alle andre Objekt orientert programmering, alt annet er latterlig GIT er selvsagt Composer er forventet API, det er kult og alle bruker det Community, dersom du ikke er en del av det, så går du glipp av mye!

10 Coderabbi`s råd for læring Mentor Lær av andre Det er mye læring i å lære til andre Kollega Code review (begge kan lære) Open source (viktig for egen læring) Rubber ducking (code review self) Pair coding / ekstrem programmering

11

12 Lornajane nytt i PHP Er du på eldre enn v5.5? Oppgrader! date.timezone må settes i v5.5 ellers kan det bli uforutsigbart Les E_STRICT loggen (nyttig til forbedring, spesielt ved oppgradering) Traits likner på klasser, men de er PHP snippets som blir "kopiert" inn Ny passord håndtering i PHP, salt og algoritme i passordet er sterkt anbefalt! password_hash() password_verify() Built-in OpCache, opensource fra Zend, men må enables ;-)

13

14 Jordi - Composer best practices Jordi og Adermann har lagd Composer Viktig med README.md Kommandoen "composer require " er enklere enn å hacke json-filen Bruk Packagist for å søke etter komponenter Vær bevist på hvilke versjoner du henter ned, spesialtegn hjelper med kontroll på dette: ^ ~ * er tegn som kan kombineres med versjonsnummer F.eks. ~2 vil gi alle updateringer av versjon, men ikke v3. Bra oppdatering/kontroll Og han anbefaler Monolog: Logs to files, sockets, inboxes, db, web services. Tips for optimalisering: -optimizer-autoload -prefer-dist

15 Javier, continuosly delivering git + github Jenkins Ansible Phing (tilsvarende Ant i Java...)

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31 Rob Allan - API with Apigility (Zend) Bruk HTTP codes for alt det er verdt! Apigility provides the boring bits of API building: Content negotiation, versioning, validation, authentication, documentation Anbefaling: swagger.io og frisbyjs.com

32 HTTP Methods for RESTful Services PUT PATCH POST DELETE GET komplett replace enkelte endringer nye objekter sletting henting av data

33

34 Trust no one! Steps for input: 1. Filter fikser input. Eks: trim(); 2. Validering av filtrert data. Eks: epost sjekk, steng lengde HTTP codes for errors: 400: client error 422: partly wrong data Gi klare feilmeldinger

35

36 Versjon i URL eller i Accept?

37 Hypermedia in JSON (Collection)

38 Authentication HTTP Basic (htpassword) and Digest, for internal APIs OAuth2 (Facebook, Google ), for public APIs Correct errors: 401, 403, etc.

39 MVVM and Silex Halve salen bruker Silex (Symfony light...) Bower.io er tilsvarende Composer MVVM rammeverk: Angular (mest populært) Backbone (lang fartstid)

40 AngularJS fra Google er populær...

41 OWASP.org - top 10, av Gary Hockin Basert på omfang og alvorlighetsgrad, har OWASP kommet fram til de viktigste sårbarhetene. Listen revideres jevnlig.

42 10. UNVALIDATED REDIRECTS AND FORWARDS Alternative løsninger: Whitelist Bare interne lenker på forward

43 9. USING COMPONENTS WITH KNOWN VULNERABILITIES COMPOSER === EPIC COMPOSER === BAD Not just your dependencies, but the dependencies of the dependencies of the dependencies

44 8. CROSS-SITE REQUEST FORGERY (CSRF) Use only POST Require user interaction Don t use sticky logins for anything that important Use CSRF token Eks: neste gang du går inn på Amazone, så er det kanskje en ukjent bok i handlevognen din

45 7. MISSING FUNCTION LEVEL ACCESS CONTROL F.eks: delete, uten rettighets sjekk

46 6. SENSITIVE DATA EXPOSURE If you re loading your form over http you re already too late Password_hash Don t store sensitive data at all Listen to an You re a developer, not a security expert Don t store naked pictures of yourself on a a cloud server you don t control" - Gary Hockin

47 5. SECURITY MISCONFIGURATION You re a developer, not a security expert You re a developer, the code is your problem

48 4. INSECURE DIRECT OBJECT REFERENCES F.eks hacke url og få tilgang til noe du ikke burde

49 3. CROSS-SITE SCRIPTING (XSS) Escape all user input all the time Whitelist allowable characters rather than blacklisting bad characters Good escaping libraries are out there

50

51

52

53

54 2. BROKEN AUTHENTICATION AND SESSION MANAGEMENT Session.Use_only_cookies Session regeneration Password confirmation, inni applikasjonen for ekstra sikkerhet på enkelte elementer Secure sessions: $_SESSION[ ipadr ] = $ipadr; if ($ipadr!== $_SESSION[ ipadr ]) session_destroy();

55 1. INJECTION Filter all the tings all the time! news.php?news_id=;drop TABLE news;

56 Enda et injection eksempel login.php?user=m.moss&password=1 %20OR%201=1;

57 PHP har innebygd filter funksjon $username = filter_var($_get[ username ], FILTER_SANITIZE_ ); $priority=filter_input(input_get, 'priority', FILTER_VALIDATE_INT);

58 Use parameterised queries (binding) $stmt = $pdo->prepare( 'SELECT user_id FROM user WHERE username = :username & password = :password ); $result = $stmt->execute([ username => $username, password => $password]);

59 PHP binding mot Oracle db $stid = oci_parse($conn,"insert INTO mytab (id, text) VALUES(:id_bv, :text_bv) ); oci_bind_by_name($stid, ":id_bv", $id); oci_bind_by_name($stid, ":text_bv", $text); oci_execute($stid);

60 My debugging and performance toolbox Charles - http proxy (Fidler for Windows brukere) XDebug - remote debugging, tips: ini_set("xdebug.scream") Xhprof - profiling JMeter - load testing PHPunit - unit testing Behat - behavior-driven development

61 Frontend - skjema

62 Skjema - et nødvendig onde Skjema står mellom bruker og mål Login -> tilgang Registrering ->gi veldighet Gi info -> få nedlastning Selvbetjening Bestille sydentur Søk og filtrering

63 Konvertering Tommelfinger regel: 5% reduksjon pr felt i skjema Det man forstår vil man lettere oppgi Det man ikke forstår, vil man være motvillig til å oppgi Graden av motivasjon har innvirkning på hvor mye motstand man orker å jobbe seg gjennom Kan du flytte noen spørsmål/valg til etterpå?

64 Bedre skjema Økt omsetning Lavere administrasjonskostnader Fornøyde brukere

65

66 Don`t make me think Tekstene er viktige, både label, placeholder, hjelpetekst og feilmelding Bruk riktig input type Riktig rekkefølge Intern og ekstern konsekvent design, ikke vær kreativ Det er bedre å fikse, enn å komme med feilmelding (trim, regex, uppercase osv)

67 Don`t waste my time Ikke spørr om unødvendigheter Ikke tving meg til å lese lange tekster Bruk oppslag på postnr, mobil, medlemsnr osv (spesielt viktig på mobile devicer, der inntasting er kostbart) Ikke spørr om noe som systemet kan/bør vite, er du innlogget, eller kommer via en PURL, så utnytt det til å gjøre det enkelt for bruker Det som er inn nå, er å gjette hva bruker vil, og så heller ha en undo-mulighet. Noen valg er opplagte

68 Brukervennlighet Tips og hjelp nærme feltet Feilmelding som er til hjelp Tydlig design på feilmeldinger Validering med JavaScipt (evt. ajax, om det trengs en tur til serveren) Possitiv validering kan i noen tilfeller forbedre skjema betraktelig (f.eks. om ønsket brukernavn er ledig)

69 Standard fargebruk

70 Captcha er dårlig brukeropplevelse Bruk heller et skjult felt Som skal være tomt Som skal ha fast innhold Som skal ha et bestemt innhol, som du programmer mot, serverside

71 UU - Universal Utforming Mange krav til skjema Label koblet med for=id Hjelpetekster og feilmeldinger Knapper må være tydelig knapper Tastatur navigering

72 HTML kode pattern og required er glimrende for validering novalidate på skjema hindrer browser fra å validere, bedre at vi gjør det data- gir oss utrolig mange mulighet, f.eks. datamsg= Vi trenger din e-post for.

73 Litt jquery har aldri skadet noen // vise felt for e-post, dersom man vil ha nyhetsbrev $( #nyhetsbrev ).on( change, function(){ if($(this).is( :checked )) $( #epost ).slidedown(); else $( #epost ).slideup(); }); // vis resten av skjema, dersom bruker trykker på knappen $( #add ).on( click, function(){ $(this).remove(); $( #more ).fadein(); });

74 PHP snacks $c = $a?: $b; $_POST=array_map( trim,$_post); $array = (array)$object; if (!isset($_session)) session_start(); $item ItemModel */ echo $item->title;

75 Tools og anbefalinger - ta vare på code snippets - sjekk composer.lock - alternativ til Excel for å jobbe med copy&paste og export/import

76 jquery plugins