HTTP headers & cookies
Um breve exemplo com explicações elementares
Nosso servidor HTTP, até o momento, responde apenas um texto simples "Hello".
1
require 'socket'
2
3
socket = TCPServer.new(3000)
4
puts 'Listening to the port 3000...'
5
6
loop do
7
client = socket.accept
8
9
response =
10
"""
11
HTTP/1.1 200\r\n
12
\r\n
13
\r\n
14
Hello
15
"""
16
17
client.puts(response.strip.gsub(/\n+/, "\n"))
18
client.close
19
end
Copied!
Ao acessarmos
http://localhost:3000 no navegador, o resultado é este:
Entretanto o conteúdo apresentado é um texto simples. Se decidirmos escrever uma página inteira apenas com texto simples, seria irritante para o usuário. Por isto, precisamos formatar o conteúdo, marcar algumas partes com destaque e prover uma experiência melhor ao usuário do site.
Um pouco de HTML
HTML é uma linguagem de marcação para conteúdo hypertexto, que pode ter diferentes características de acordo com a marcação desejada.
Vamos supor que queremos responder com conteúdo HTML um contador de quantas vezes uma mesma pessoa visita a página. Vamos alterar a resposta HTTP para conter o corpo da mensagem em formato HTML:
1
# ...
2
response =
3
"""
4
HTTP/1.1 200\r\n
5
\r\n
6
\r\n
7
<h1>Counter: 1</h1>
8
"""
9
# ...
Copied!
O texto com o counter (
<h1>Counter: 1</h1>) deve ser destacado em forma de título na página. Ao entrarmos no site:
O conteúdo foi mostrado exatamente da forma como enviamos no socket, pois tudo é
string de dados sendo transportada via socket TCP.HTTP headers
Mas como fazer o navegador "interpretar" aquele conteúdo HTTP como sendo HTML? Devemos enviar este "metadado" em uma parte especial da mensagem HTTP, que se chama HTTP header.
1
# ...
2
response =
3
"""
4
HTTP/1.1 200\r\n
5
Content-Type: text/html\r\n
6
\r\n
7
<h1>Counter: 1</h1>
8
"""
9
# ...
Copied!
Desta forma, estamos instruindo o HTTP client, no caso o web browser, que o conteúdo é do tipo HTML, assim o browser consegue renderizar o HTML corretamente:
Ok, mas o counter está sempre fixo no valor "1". Como podemos deixar isto dinâmico?
1
# ...
2
counter = 1 # <-- como fazer o counter ser dinâmico a ponto de ser enviado entre browser e server diversas vezes?
3
4
response =
5
"""
6
HTTP/1.1 200\r\n
7
Content-Type: text/html\r\n
8
\r\n
9
<h1>Counter: #{counter}</h1>
10
"""
11
# ...
Copied!
HTTP é stateless por definição
Vamos lembrar que, por estar condicionado a uma conexão TCP, o HTTP não guarda estado, isto é, a cada vez que um user fizer refresh à página, o server não consegue saber, a princípio, quem é o cliente, sempre tratando o pedido como se fosse um novo cliente.
1
# (...)
2
loop do
3
client = socket.accept # <-- aguarda até chegar novo cliente
4
5
client.puts("HTTP/1.1 (etc ....)") # <-- envia resposta ao cliente
6
client.close # <-- fecha conexão com cliente e o ciclo de aguardo inicia novamente
7
end
8
# (...)
Copied!
Para que o cliente seja "lembrado", é preciso que o server envie algum metadado ao cliente, para que este reencaminhe o metadado de volta ao server nos pedidos subsequentes.
A especificação HTTP contempla este cenário onde podemos ter algum tipo de "estado" entre conexões HTTP distintas de um mesmo cliente, sendo que web browsers e servidores web já implementam este envio mútuo de metadado de forma automática.
Já sabemos que para enviar um metadado, é através de HTTP headers, como vimos no exemplo do
Content-Type.Para o caso do "counter" ser enviado entre vários pedidos, o HTTP especifica o envio deste metadado através de headers que são HTTP Cookies.
HTTP Cookies
- 1.o server envia um metadado qualquer através do header
Set-Cookie - 2.o browser recebe a mensagem e verifica que há um header
Set-Cookie, então pega o valor do cookie e coloca numa área específica da memória do navegador chamada cookie storage. - 3.para pedidos futuros neste mesmo site, o browser já sabe que tem que enviar o cookie de volta ao servidor, portanto, no request HTTP, inclui um header chamado
Cookiecom o valor armazenado. - 4.o server verifica se o browser enviou algum header
Cookie, e caso tenha sido enviado, lê o valor do cookie para manipular/atualizar a informação de alguma forma e o ciclo se repete
Como funciona um típico sistema de Login na Web
Convém lembrar que um sistema de login web funciona exatamente desta forma, onde a primeira resposta do servidor é através de
Set-Cookie que contém a identificação do user ou algo do gênero. Desta forma, o browser envia o cookie nos pedidos subsequentes e com isto temos um sistema de login onde temos a impressão que estamos "autenticados"."Autenticados" com muitas aspas. É apenas uma sensação, pois a informação é sempre trocada através de headers em cima de um protocolo que NÃO guarda estado por definicão.
Para enviar um metadado ao cliente, já vimos que é preciso utilizar HTTP headers. Neste caso não será diferente. E a especificação HTTP contempla um header chamado
Set-Cookie que permite "persisVoltando ao nosso exemplo do counter
Vamos então ver como fica o response HTTP com o header
Set-Cookie enviando o valor do counter:1
# ...
2
counter = 1
3
4
response =
5
"""
6
HTTP/1.1 200\r\n
7
Content-Type: text/html\r\n
8
Set-Cookie: counter=#{counter}; path=/; HttpOnly\r\n
9
\r\n
10
<h1>Counter: #{counter}</h1>
11
"""
12
# ...
Copied!
A resposta HTTP que chega ao browser é esta:
Pelo que o browser guarda o cookie no cookie storage do próprio browser, ou seja, fica na memória do browser:
Por conta disto, se o user apagar as cookies, o próximo pedido ao server não vai ser o valor no header portanto para o server será como se fosse a "primeira vez" daquele cliente.
Vamos ver como fica o request HTTP enviado do browser ao servidor:
Nesta imagem, podemos ver que há diversos HTTP headers que o browser envia ao server, dentre eles o nosso cookie:
1
Cookie: counter=1
Copied!
Yay!
Lendo o valor do request HTTP Cookie
Apesar de que conseguimos enviar do server ao browser, nosso server ainda não é capaz de ler os headers da mensagem, pois ainda não escrevemos este código.
Para isto, precisamos ler a mensagem através do socket TCP, uma linha de cada vez no socket:
1
client = socket.accept
2
3
first_line = client.gets
4
second_line = client.gets
5
6
# and so on...
Copied!
Já deu pra entender quantas linhas teríamos que escrever para ler a mensagem toda, pois não? Vamos então fazer um loop e ler todas as linhas enquanto houver mensagem no socket:
1
request = ''
2
3
while line = client.gets
4
break if line == "\r\n"
5
6
request += line
7
end
Copied!
Só isto não basta, temos que agora conseguir encontrar um padrão
Cookie: <qualquerChave>:<qualquerValor> no meio da mensagem. Para encontrar padrões, vamos utilizar expressões regulares:1
cookie = {}
2
3
if cookie_match = request.match(/Cookie:\s(.*)=(.*)\r$/)
4
cookie[cookie_match[1]] = cookie_match[2]
5
end
Copied!
Vamos pular explicação de expressões regulares por agora, pode ser tema para outra sessão. Mas com este código conseguimos guardar numa hash todos os cookies vindo do request HTTP.
Próxima linha é buscar o valor do counter na hash
cookie, caso esteja ausente (primeiro request de um cliente, por exemplo), o valor é 0. Caso contrário, é o valor encontrado no cookie.A este valor, incrementamos o valor
1, dando assim a característica de um counter:1
counter = cookie.fetch('counter', 0).to_i + 1
Copied!
E pra finalizar, nosso response com os devidos headers:
1
response =
2
"""
3
HTTP/1.1 200\r\n
4
Content-Type: text/html\r\n
5
Set-Cookie: counter=#{counter}; path=/; HttpOnly\r\n
6
\r\n
7
<h1>Counter: #{counter}</h1>
8
"""
Copied!
Ao rodarmos o server e entrarmos 2 vezes na página:
Yay! Já temos nosso counter funcionando com HTTP cookies!
Conclusão
Esta sessão foi uma explicação de como funcionam HTTP headers, HTTP cookies e como podemos tirar proveito disto para envio mútuo de metadados para que sempre consigamos "lembrar" do cliente, mesmo utilizando um protocolo que não guarda estado.
Last modified 4mo ago