Slide 1

Slide 1 text

Developing cacheable PHP applications Thijs Feryn

Slide 2

Slide 2 text

Slow websites suck

Slide 3

Slide 3 text

Hi, I’m Thijs

Slide 4

Slide 4 text

I’m @ThijsFeryn on Twitter

Slide 5

Slide 5 text

I’m an Evangelist At

Slide 6

Slide 6 text

I’m an Evangelist At

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Cache

Slide 9

Slide 9 text

Don’t recompute if the data hasn’t changed

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

What if we could design our software with HTTP caching in mind?

Slide 12

Slide 12 text

✓Portability ✓Developer empowerment ✓Control ✓Consistent caching behavior Caching state of mind

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Reverse caching proxy

Slide 15

Slide 15 text

Normally User Server

Slide 16

Slide 16 text

With ReCaPro * User ReCaPro Server * Reverse Caching Proxy

Slide 17

Slide 17 text

Content Delivery Network

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

HTTP caching mechanisms Expires: Sat, 09 Sep 2017 14:30:00 GMT Cache-control: public, max-age=3600, s-maxage=86400 Cache-control: private, no-cache, no-store

Slide 20

Slide 20 text

In an ideal world

Slide 21

Slide 21 text

✓Stateless ✓Well-defined TTL ✓Cache / no-cache per resource ✓Cache variations ✓Conditional requests ✓HTTP fragments for non- cacheable content In an ideal world

Slide 22

Slide 22 text

Reality sucks

Slide 23

Slide 23 text

Common problems

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Time To Live

Slide 27

Slide 27 text

Cache variations

Slide 28

Slide 28 text

Authentication

Slide 29

Slide 29 text

Legacy

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Twig templates

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

✓Multi-lingual (Accept-Language) ✓Nav ✓Header ✓Footer ✓Main ✓Login page & private content

Slide 34

Slide 34 text

composer require symfony/flex composer require annotations twig translation

Slide 35

Slide 35 text

render('index.twig'); } } src/Controller/DefaultController.php

Slide 36

Slide 36 text

{% block title %}{% endblock %}
{{ include('header.twig') }}
{{ include('nav.twig') }}
{% block content %}{% endblock %}
{{ include('footer.twig') }}
templates/base.twig

Slide 37

Slide 37 text

{% extends "base.twig" %} {% block title %}Home{% endblock %} {% block content %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat orci eget libero sollicitudin, non ultrices turpis mollis. Aliquam sit amet tempus elit. Ut viverra risus enim, ut venenatis justo accumsan nec. Praesent a dolor tellus. Maecenas non mauris leo. Pellentesque lobortis turpis at dapibus laoreet. Mauris rhoncus nulla et urna mollis, et lobortis magna ornare. Etiam et sapien consequat, egestas felis sit amet, dignissim enim.

Quisque quis mollis justo, imperdiet fermentum velit. Aliquam nulla justo, consectetur et diam non, luctus commodo metus. Vestibulum fermentum efficitur nulla non luctus. Nunc lorem nunc, mollis id efficitur et, aliquet sit amet ante. Sed ipsum turpis, vehicula eu semper eu, malesuada eget leo. Vestibulum venenatis dui id pulvinar suscipit. Etiam nec massa pharetra justo pharetra dignissim quis non magna. Integer id convallis lectus. Nam non ullamcorper metus. Ut vestibulum ex ut massa posuere tincidunt. Vestibulum hendrerit neque id lorem rhoncus aliquam. Duis a facilisis metus, a faucibus nulla.

{% endblock %} templates/index.twig

Slide 38

Slide 38 text

templates/nav.twig

Slide 39

Slide 39 text


Footer templates/footer.twig

Slide 40

Slide 40 text

home: Home welcome : Welcome to the site rendered : Rendered at %date% example : An example page log_in : Log in login : Login log_out : Log out username : Username password : Password private : Private privatetext : Looks like some very private data translations/messages.en.yml

Slide 41

Slide 41 text

home: Start welcome : Welkom op de site rendered : Samengesteld op %date% example : Een voorbeeldpagina log_in : Inloggen login : Login log_out : Uitloggen username : Gebruikersnaam password : Wachtwoord private : Privé privatetext : Deze tekst ziet er vrij privé uit translations/messages.nl.yml

Slide 42

Slide 42 text

getRequest(); $preferredLanguage = $request->getPreferredLanguage(); if(null !== $preferredLanguage) { $request->setLocale($preferredLanguage); } } } src/EventListener/LocaleListener.php

Slide 43

Slide 43 text

services: _defaults: autowire: true autoconfigure: true public: false App\: resource: '../src/*' exclude: '../src/{Entity,Migrations,Tests,Kernel.php}' App\Controller\: resource: '../src/Controller' tags: ['controller.service_arguments'] App\EventListener\LocaleListener: tags: - { name: kernel.event_listener, event: kernel.request, priority: 100} config/services.yml

Slide 44

Slide 44 text

Accept-Language: en Accept-Language: nl VS

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

The mission Maximum Cacheability

Slide 48

Slide 48 text

Cache-control

Slide 49

Slide 49 text

Cache-Control: public, s-maxage=500

Slide 50

Slide 50 text

render('index.twig') ->setSharedMaxAge(500) ->setPublic(); } }

Slide 51

Slide 51 text

Conditional requests

Slide 52

Slide 52 text

Only fetch payload that has changed

Slide 53

Slide 53 text

HTTP/1.1 200 OK

Slide 54

Slide 54 text

Otherwise: HTTP/1.1 304 Not Modified

Slide 55

Slide 55 text

Conditional requests HTTP/1.1 200 OK Host: localhost Etag: 7c9d70604c6061da9bb9377d3f00eb27 Content-type: text/html; charset=UTF-8 Hello world output GET / HTTP/1.1 Host: localhost User-Agent: curl/7.48.0

Slide 56

Slide 56 text

Conditional requests HTTP/1.0 304 Not Modified Host: localhost Etag: 7c9d70604c6061da9bb9377d3f00eb27 GET / HTTP/1.1 Host: localhost User-Agent: curl/7.48.0 If-None-Match: 7c9d70604c6061da9bb9377d3f00eb27

Slide 57

Slide 57 text

Conditional requests HTTP/1.1 200 OK Host: localhost Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT Content-type: text/html; charset=UTF-8 Hello world output GET / HTTP/1.1 Host: localhost User-Agent: curl/7.48.0

Slide 58

Slide 58 text

Conditional requests HTTP/1.0 304 Not Modified Host: localhost Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT GET / HTTP/1.1 Host: localhost User-Agent: curl/7.48.0 If-Last-Modified: Fri, 22 Jul 2016 10:11:16 GMT

Slide 59

Slide 59 text

composer require symfony-bundles/redis-bundle

Slide 60

Slide 60 text

redis = $redis; $this->logger = $logger; } protected function isModified(Request $request, $etag) { if ($etags = $request->getETags()) { return in_array($etag, $etags) || in_array('*', $etags); } return true; } ... src/EventListener/ConditionalRequestListener.php

Slide 61

Slide 61 text

{ $this->redis = $redis; $this->logger = $logger; } protected function isModified(Request $request, $etag) { if ($etags = $request->getETags()) { return in_array($etag, $etags) || in_array('*', $etags); } return true; } public function onKernelRequest(GetResponseEvent $event) { $request = $event->getRequest(); $etag = $this->redis->get('etag:'.md5($request->getUri())); if(!$this->isModified($request,$etag)) { $event->setResponse(Response::create('Not Modified',Response::HTTP_NOT_MODIFIED)); } } public function onKernelResponse(FilterResponseEvent $event) { $response = $event->getResponse(); $request = $event->getRequest(); $etag = md5($response->getContent()); $response->setEtag($etag); if($this->isModified($request,$etag)) { $this->redis->set('etag:'.md5($request->getUri()),$etag); } } } src/EventListener/ConditionalRequestListener.php

Slide 62

Slide 62 text

Do not cache

Slide 63

Slide 63 text

Cache-Control: private, no-store

Slide 64

Slide 64 text

/** * @Route("/private", name="private") */ public function private() { $response = $this ->render('private.twig') ->setPrivate(); $response->headers->addCacheControlDirective('no-store'); return $response; } Dot not cache private page

Slide 65

Slide 65 text

session cookie No cache

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Code renders single HTTP response

Slide 68

Slide 68 text

Lowest common denominator: no cache

Slide 69

Slide 69 text

Block caching

Slide 70

Slide 70 text

Edge Side Includes ✓Placeholder ✓Parsed by Varnish ✓Output is a composition of blocks ✓State per block ✓TTL per block

Slide 71

Slide 71 text

Surrogate-Capability: key="ESI/1.0" Surrogate-Control: content="ESI/1.0" Varnish Backend Parse ESI placeholders Varnish

Slide 72

Slide 72 text

ESI vs AJAX

Slide 73

Slide 73 text

✓ Server-side ✓ Standardized ✓ Processed on the “edge”, no in the browser ✓ Generally faster Edge-Side Includes - Sequential - One fails, all fail - Limited implementation in Varnish

Slide 74

Slide 74 text

✓ Client-side ✓ Common knowledge ✓ Parallel processing ✓ Graceful degradation AJAX - Processed by the browser - Extra roundtrips - Somewhat slower

Slide 75

Slide 75 text

Subrequests

Slide 76

Slide 76 text


 {{ include('header.twig') }}


 {{ include('nav.twig') }}


 {% block content %}{% endblock %}


 {{ include('footer.twig') }}


 {{ render_esi(url('header')) }}


 {{ render_esi(url('nav')) }}


 {% block content %}{% endblock %}


 {{ render_esi(url('footer')) }}


Slide 77

Slide 77 text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat orci eget libero sollicitudin,…

Slide 78

Slide 78 text

/** * @Route("/", name="home") */ public function index() { return $this ->render('index.twig') ->setPublic() ->setSharedMaxAge(500); } /** * @Route("/header", name="header") */ public function header() { $response = $this ->render('header.twig') ->setPrivate(); $response->headers->addCacheControlDirective('no-store'); return $response; } /** * @Route("/footer", name="footer") */ public function footer() { $response = $this->render('footer.twig'); $response ->setSharedMaxAge(500) ->setPublic(); return $response; } /** * @Route("/nav", name="nav") */ public function nav() { $response = $this->render('nav.twig'); $response ->setVary('X-Login',false) ->setSharedMaxAge(500) ->setPublic(); return $response; } Controller action per fragment

Slide 79

Slide 79 text

Problem: no language cache variation

Slide 80

Slide 80 text

Vary: Accept-Language

Slide 81

Slide 81 text

getResponse(); $response->setVary('Accept-Language',false); } } src/EventListener/VaryListener.php

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

✓Navigation page ✓Private page Weak spots Not cached because of stateful content

Slide 84

Slide 84 text

Move state client-side

Slide 85

Slide 85 text

Replace PHP session with JSON Web Tokens

Slide 86

Slide 86 text

JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhZG1pb iIsImV4cCI6MTQ5NTUyODc1NiwibG9naW4iOnRydWV9.u4Idy- SYnrFdnH1h9_sNc4OasORBJcrh2fPo1EOTre8 ✓3 parts ✓Dot separated ✓Base64 encoded JSON ✓Header ✓Payload ✓Signature (HMAC with secret)

Slide 87

Slide 87 text

eyJzdWIiOiJhZG1pbiIsIm V4cCI6MTQ5NTUyODc1Niwi bG9naW4iOnRydWV9 { "alg": "HS256", "typ": "JWT" } { "sub": "admin", "exp": 1495528756, "login": true } HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret ) eyJhbGciOiJIUzI1NiIsI nR5cCI6IkpXVCJ9 u4Idy- SYnrFdnH1h9_sNc4OasOR BJcrh2fPo1EOTre8

Slide 88

Slide 88 text

JWT Cookie:token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz dWIiOiJhZG1pbiIsImV4cCI6MTQ5NTUyODc1NiwibG9naW4iOnRydW V9.u4Idy-SYnrFdnH1h9_sNc4OasORBJcrh2fPo1EOTre8 ✓Stored in a cookie ✓Can be validated by Varnish ✓Payload can be processed by any language (e.g. Javascript)

Slide 89

Slide 89 text

sub jwt { std.log("Ready to perform some JWT magic"); if(cookie.isset("jwt_cookie")) { #Extract header data from JWT var.set("token", cookie.get("jwt_cookie")); var.set("header", regsub(var.get("token"),"([^\.]+)\.[^\.]+\.[^\.]+","\1")); var.set("type", regsub(digest.base64url_decode(var.get("header")),{"^.*?"typ"\s*:\s*"(\w+)".*?$"},"\1")); var.set("algorithm", regsub(digest.base64url_decode(var.get("header")),{"^.*?"alg"\s*:\s*"(\w+)".*?$"},"\1")); #Don't allow invalid JWT header if(var.get("type") == "JWT" && var.get("algorithm") == "HS256") { #Extract signature & payload data from JWT var.set("rawPayload",regsub(var.get("token"),"[^\.]+\.([^\.]+)\.[^\.]+$","\1")); var.set("signature",regsub(var.get("token"),"^[^\.]+\.[^\.]+\.([^\.]+)$","\1")); var.set("currentSignature",digest.base64url_nopad_hex(digest.hmac_sha256(var.get("key"),var.get("header") + "." + var.get("rawPayload")))); var.set("payload", digest.base64url_decode(var.get("rawPayload"))); var.set("exp",regsub(var.get("payload"),{"^.*?"exp"\s*:\s*([0-9]+).*?$"},"\1")); var.set("jti",regsub(var.get("payload"),{"^.*?"jti"\s*:\s*"([a-z0-9A-Z_\-]+)".*?$"},"\1")); var.set("userId",regsub(var.get("payload"),{"^.*?"uid"\s*:\s*"([0-9]+)".*?$"},"\1")); var.set("roles",regsub(var.get("payload"),{"^.*?"roles"\s*:\s*"([a-z0-9A-Z_\-, ]+)".*?$"},"\1")); #Only allow valid userId if(var.get("userId") ~ "^\d+$") { #Don't allow expired JWT if(std.time(var.get("exp"),now) >= now) { #SessionId should match JTI value from JWT if(cookie.get(var.get("sessionCookie")) == var.get("jti")) { #Don't allow invalid JWT signature if(var.get("signature") == var.get("currentSignature")) { #The sweet spot set req.http.X-login="true"; } else { std.log("JWT: signature doesn't match. Received: " + var.get("signature") + ", expected: " + var.get("currentSignature")); } } else { std.log("JWT: session cookie doesn't match JTI." + var.get("sessionCookie") + ": " + cookie.get(var.get("sessionCookie")) + ", JTI:" + var.get("jti")); } } else { std.log("JWT: token has expired"); } } else { std.log("UserId '"+ var.get("userId") +"', is not numeric"); } } else { std.log("JWT: type is not JWT or algorithm is not HS256"); } std.log("JWT processing finished. UserId: " + var.get("userId") + ". X-Login: " + req.http.X-login); } #Look for full private content if(req.url ~ "/node/2" && req.url !~ "^/user/login") { if(req.http.X-login != "true") { return(synth(302,"/user/login?destination=" + req.url)); } } } Insert incomprehensible Varnish VCL code here …

Slide 90

Slide 90 text

X-Login: true End result: X-Login: false Custom request header set by Varnish

Slide 91

Slide 91 text

Extra cache variation required

Slide 92

Slide 92 text

Vary: Accept-Language, X-Login Content for logged-in & anonymous differs

Slide 93

Slide 93 text


 function getCookie(name) {
 var value = "; " + document.cookie;
 var parts = value.split("; " + name + "=");
 if (parts.length == 2) return parts.pop().split(";").shift();
 }
 function parseJwt (token) {
 var base64Url = token.split('.')[1];
 var base64 = base64Url.replace('-', '+').replace('_', '/');
 return JSON.parse(window.atob(base64));
 };
 $(document).ready(function(){
 if ($.cookie('token') != null ){
 var token = parseJwt($.cookie("token"));
 $("#usernameLabel").html(', ' + token.sub);
 }
 });
 Parse JWT in Javascript

Slide 94

Slide 94 text

Does not require backend access

Slide 95

Slide 95 text

composer require firebase/php-jwt

Slide 96

Slide 96 text

key = $key; $this->username = $username; $this->password = $password; } public function jwt($username) { return JWT::encode([ 'sub'=>$username, 'exp'=>time() + (4 * 24 * 60 * 60), 'login'=>true, ],$this->key); } public function createCookie($username) { return new Cookie("token",$this->jwt($username), time() + (3600 * 48), '/', null, false, false); } public function validate($token) { src/Service/JwtAuthentication.php

Slide 97

Slide 97 text

$this->password = $password; } public function jwt($username) { return JWT::encode([ 'sub'=>$username, 'exp'=>time() + (4 * 24 * 60 * 60), //'exp'=>time() + 60, 'login'=>true, ],$this->key); } public function createCookie($username) { return new Cookie("token",$this->jwt($username), time() + (3600 * 48), '/', null, false, false); } public function validate($token) { try { $data = JWT::decode($token,$this->key,['HS256']); $data = (array)$data; if($data['sub'] !== $this->username) { return false; } return true; } catch(\UnexpectedValueException $e) { return false; } } } src/Service/JwtAuthentication.php

Slide 98

Slide 98 text

services: App\Service\JwtAuthentication: arguments: $key: '%env(JWT_KEY)%' $username: '%env(JWT_USERNAME)%' $password: '%env(JWT_PASSWORD)%' src/Service/JwtAuthentication.php

Slide 99

Slide 99 text

###> JWT authentication ### JWT_KEY=SlowWebSitesSuck JWT_USERNAME=admin JWT_PASSWORD=$2y$10$431rvq1qS9ewNFP0Gti/o.kBbuMK4zs8IDTLlxm5uzV7cbv8wKt0K ###< JWT authentication ### .env

Slide 100

Slide 100 text

/** * @Route("/login", name="login", methods="GET") */ public function login(Request $request, JwtAuthentication $jwt) { if($jwt->validate($request->cookies->get('token'))) { return new RedirectResponse($this->generateUrl('home')); } $response = $this->render('login.twig',['loginLogoutUrl'=>$this- >generateUrl('login'),'loginLogoutLabel'=>'log_in']); $response ->setSharedMaxAge(500) ->setVary('X-Login',false) ->setPublic(); return $response; } /** * @Route("/login", name="loginpost", methods="POST") */ public function loginpost(Request $request, JwtAuthentication $jwt) { $username = $request->get('username'); $password = $request->get('password'); if(!$username || !$password || getenv('JWT_USERNAME') != $username || ! password_verify($password,getenv('JWT_PASSWORD'))) { return new RedirectResponse($this->generateUrl('login')); } $response = new RedirectResponse($this->generateUrl('home')); $response->headers->setCookie($jwt->createCookie($username)); return $response; } src/Controller/DefaultController.php

Slide 101

Slide 101 text

/** * @Route("/logout", name="logout") */ public function logout() { $response = new RedirectResponse($this->generateUrl('login')); $response->headers->clearCookie('token'); return $response; } src/Controller/DefaultController.php

Slide 102

Slide 102 text

/** * @Route("/nav", name="nav") */ public function nav(Request $request, JwtAuthentication $jwt) { if($jwt->validate($request->cookies->get('token'))) { $loginLogoutUrl = $loginLogoutUrl = $this->generateUrl('logout'); $loginLogoutLabel = 'log_out'; } else { $loginLogoutUrl = $this->generateUrl('login'); $loginLogoutLabel = 'log_in'; } $response = $this->render('nav.twig', ['loginLogoutUrl'=>$loginLogoutUrl,'loginLogoutLabel'=>$loginLogoutLabel]); $response ->setVary('X-Login',false) ->setSharedMaxAge(500) ->setPublic(); return $response; } src/Controller/DefaultController.php

Slide 103

Slide 103 text

{% extends "base.twig" %} {% block title %}Login{% endblock %} {% block content %}
{{ 'username' | trans }}
{{ 'password' | trans }}
{{ 'log_in' | trans }}
{% endblock %} templates/login.twig

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

Cookie: token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni J9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTUyMDk0M jExNSwibG9naW4iOnRydWV9._161Lf8BKkbzjqVv 5d62O5aMdCotKvCqd7F8qFqZC2Y

Slide 107

Slide 107 text

With the proper VCL, Varnish can process the JWT and make cache variations for authenticated & anonymous content

Slide 108

Slide 108 text

https://github.com/ThijsFeryn/ cacheable-sites-symfony4

Slide 109

Slide 109 text

https://feryn.eu https://twitter.com/ThijsFeryn https://instagram.com/ThijsFeryn

Slide 110

Slide 110 text

No content