SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

MVP ShowCast 2013
Aplicações e serviços Web interoperáveis com o
padrão Cross-Origin Resource Sharing (CORS)
Rogério Moraes de Carvalho
Visual C#
Diretor de Tecnologia – VITA Informática
@rogeriomc
rogeriomc.wordpress.com
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

Agenda
♦User-Agent
♦Web Origin
♦Same-Origin Policy
♦JSON-P
♦Cross-Origin Resource Sharing
♦Cross-Domain AJAX com CORS
♦Demonstração: Cross-Domain AJAX com CORS
♦Documentação
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

TRILHA: INTEROPERABILIDADE
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

User-Agent
♦O que é um agente de usuário (user agent)?
♦ É um software que age em nome de um usuário
♦ Exemplos
♦ Browser (Chrome, Internet Explorer, Firefox, Safari, Opera, etc.)
♦ Cliente de e-mail (Outlook, Windows Mail, Mac OS X Mail, Thunderbird, etc.)

♦Cenário comum
♦ Agente de usuário como cliente num protocolo de rede usado em
comunicações cliente/servidor
♦ Exemplo
♦ O protocolo HTTP identifica o software cliente que origina uma requisição usando o
cabeçalho User-Agent
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

Web Origin
♦O que são Web Origins?
♦ Forma de agentes de usuário agruparem URIs juntas em domínios protegidos

♦Regra para dois URIs serem classificadas na mesma origem web
♦ Devem ter os mesmos: esquemas, hospedeiros e portas

♦Caracterização de uma Web Origin
♦ Trio (esquema, hospedeiro, porta): esquema://hospedeiro[:porta]
♦ Esquema do URI
♦ Hospedeiro do URI
♦ Porta do URI (se omitida, então assume-se a porta padrão do protocolo do esquema)

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

Same-Origin Policy
♦O que é a Same-Origin Policy (política de mesma origem)?
♦ Documentos recuperados de origens distintas são isolados uns dos outros
♦ Em domínios protegidos uns dos outros

♦ Exemplo
♦ Um documento em http://mvpshowcast.azurewebsites.net/Evento não pode acessar o
DOM de um documento em https://mvpshowcast.azurewebsites.net/MVP
♦ Origem do documento http://mvpshowcast.azurewebsites.net/Evento
♦ Esquema: http; Hospedeiro: mvpshowcast.azurewebsites.net; Porta: 80
♦ Origem do documento https://mvpshowcast.azurewebsites.net/MVP
♦ Esquema: https; Hospedeiro: mvpshowcast.azurewebsites.net; Porta: 443

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

Cross-domain AJAX
♦O que é AJAX?
♦ Um acrônimo para Asynchronous JavaScript and XML
♦ Grupo de técnicas relacionadas de desenvolvimento web usadas do lado do
cliente para criar aplicações web assíncronas
♦ O objeto XMLHttpRequest é usado para trafegar os dados entre cliente e servidor
♦ Independente do nome, XML não é obrigatório
♦ JSON é usado com frequência
♦ Existe o termo AJAJ (Asynchronous JavaScript and JSON), mas é pouco usado

♦O que é cross-domain AJAX?
♦ A ideia de realizar requisições entre diferentes domínios em oposição à
restrição Same-Origin Policy
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

JSON-P
♦O que é JSON-P?
♦ Significa JSON with padding
♦ Mecanismo para requisições de conteúdo cross-domain com o tag <script>
function processarDados(dadosJSON) {
// O argumento dadosJSON deve ser uma representação JSON dos dados.
...
}
<script type="text/javascript"
src="http://dominiocruzado.com.br/servicoweb?jsonp=processarDados">
</script>
processarDados({ webcast: "CORS", trilha: "Interoperabilidade", sessao: "IT" });
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

Cross-Origin Resource Sharing (CORS)
♦O que é Cross-Origin Resource Sharing (CORS)?
♦ Mecanismo que habilita requisições do lado do cliente de origens cruzadas

♦Especificação no W3C
♦ Cross-Origin Resource Sharing
♦ W3C Candidate Recommendation 29 January 2013
♦ http://www.w3.org/TR/cors/
♦ Produzido em conjunto por dois grupos de trabalho no W3C
♦ Web Applications (WebApps) e Web Application Security (WebAppSec)

♦Benefícios da padronização
♦ APIs que fazem requisições de origens cruzadas podem usar os algoritmos
definidos na especificação
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

Cross-Domain AJAX com CORS
♦O que é XMLHttpRequest?
♦ É uma API que fornece funcionalidades do lado do cliente para transmissão
de dados entre um cliente e um servidor

♦Especificação XMLHttpRequest no W3C
♦ W3C Working Draft 6 December 2012
♦ http://www.w3.org/TR/XMLHttpRequest/

♦A nova especificação XMLHttpRequest introduz novos recursos
♦ Requisições de origens cruzadas
♦ Eventos de progresso de upload
♦ Suporte para upload e download de dados binários
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
SESSÃO: INFRAESTRUTURA

Demonstração
Cross-Domain AJAX com CORS
♦Criação de uma solução no Visual Studio 2013
♦ Projeto de uma API web
♦ MvpShowCast.WebApi

♦ Projeto de uma aplicação web
♦ MvpShowCast.WebSite

♦Publicação da solução no Windows Azure
♦ API web: mvpshowcastwebapi.azurewebsites.net
♦ Aplicação web: mvpshowcastwebsite.azurewebsites.net
♦ Aplicação web 2: mvpshowcastwebsite2.azurewebsites.net

♦Habilitação de CORS na API web
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

TRILHA: INTEROPERABILIDADE
SESSÃO: INFRAESTRUTURA

Documentação
♦HTTP/1.1 User-Agent
♦ http://tools.ietf.org/html/rfc2616#section-14.43

♦The Web Origin Concept
♦ http://tools.ietf.org/html/rfc6454

♦Same-Origin Policy
♦ http://www.w3.org/Security/wiki/Same_Origin_Policy

♦Cross-Origin Resource Sharing
♦ W3C Candidate Recommendation 29 January 2013
♦ http://www.w3.org/TR/cors/
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

TRILHA: INTEROPERABILIDADE
SESSÃO: INFRAESTRUTURA

TRILHA: INTEROPERABILIDADE

Perguntas & Respostas

Rogério Moraes de Carvalho
Visual C#
Diretor de Tecnologia – VITA Informática
@rogeriomc
rogeriomc.wordpress.com

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource Sharing (CORS) [MVP ShowCast 2013 - IT - Interoperabilidade]

  • 1.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE MVPShowCast 2013 Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource Sharing (CORS) Rogério Moraes de Carvalho Visual C# Diretor de Tecnologia – VITA Informática @rogeriomc rogeriomc.wordpress.com © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 2.
    SESSÃO: INFRAESTRUTURA Agenda ♦User-Agent ♦Web Origin ♦Same-OriginPolicy ♦JSON-P ♦Cross-Origin Resource Sharing ♦Cross-Domain AJAX com CORS ♦Demonstração: Cross-Domain AJAX com CORS ♦Documentação © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: INTEROPERABILIDADE
  • 3.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE User-Agent ♦Oque é um agente de usuário (user agent)? ♦ É um software que age em nome de um usuário ♦ Exemplos ♦ Browser (Chrome, Internet Explorer, Firefox, Safari, Opera, etc.) ♦ Cliente de e-mail (Outlook, Windows Mail, Mac OS X Mail, Thunderbird, etc.) ♦Cenário comum ♦ Agente de usuário como cliente num protocolo de rede usado em comunicações cliente/servidor ♦ Exemplo ♦ O protocolo HTTP identifica o software cliente que origina uma requisição usando o cabeçalho User-Agent © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 4.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE WebOrigin ♦O que são Web Origins? ♦ Forma de agentes de usuário agruparem URIs juntas em domínios protegidos ♦Regra para dois URIs serem classificadas na mesma origem web ♦ Devem ter os mesmos: esquemas, hospedeiros e portas ♦Caracterização de uma Web Origin ♦ Trio (esquema, hospedeiro, porta): esquema://hospedeiro[:porta] ♦ Esquema do URI ♦ Hospedeiro do URI ♦ Porta do URI (se omitida, então assume-se a porta padrão do protocolo do esquema) © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 5.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE Same-OriginPolicy ♦O que é a Same-Origin Policy (política de mesma origem)? ♦ Documentos recuperados de origens distintas são isolados uns dos outros ♦ Em domínios protegidos uns dos outros ♦ Exemplo ♦ Um documento em http://mvpshowcast.azurewebsites.net/Evento não pode acessar o DOM de um documento em https://mvpshowcast.azurewebsites.net/MVP ♦ Origem do documento http://mvpshowcast.azurewebsites.net/Evento ♦ Esquema: http; Hospedeiro: mvpshowcast.azurewebsites.net; Porta: 80 ♦ Origem do documento https://mvpshowcast.azurewebsites.net/MVP ♦ Esquema: https; Hospedeiro: mvpshowcast.azurewebsites.net; Porta: 443 © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 6.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE Cross-domainAJAX ♦O que é AJAX? ♦ Um acrônimo para Asynchronous JavaScript and XML ♦ Grupo de técnicas relacionadas de desenvolvimento web usadas do lado do cliente para criar aplicações web assíncronas ♦ O objeto XMLHttpRequest é usado para trafegar os dados entre cliente e servidor ♦ Independente do nome, XML não é obrigatório ♦ JSON é usado com frequência ♦ Existe o termo AJAJ (Asynchronous JavaScript and JSON), mas é pouco usado ♦O que é cross-domain AJAX? ♦ A ideia de realizar requisições entre diferentes domínios em oposição à restrição Same-Origin Policy © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 7.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE JSON-P ♦Oque é JSON-P? ♦ Significa JSON with padding ♦ Mecanismo para requisições de conteúdo cross-domain com o tag <script> function processarDados(dadosJSON) { // O argumento dadosJSON deve ser uma representação JSON dos dados. ... } <script type="text/javascript" src="http://dominiocruzado.com.br/servicoweb?jsonp=processarDados"> </script> processarDados({ webcast: "CORS", trilha: "Interoperabilidade", sessao: "IT" }); © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 8.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE Cross-OriginResource Sharing (CORS) ♦O que é Cross-Origin Resource Sharing (CORS)? ♦ Mecanismo que habilita requisições do lado do cliente de origens cruzadas ♦Especificação no W3C ♦ Cross-Origin Resource Sharing ♦ W3C Candidate Recommendation 29 January 2013 ♦ http://www.w3.org/TR/cors/ ♦ Produzido em conjunto por dois grupos de trabalho no W3C ♦ Web Applications (WebApps) e Web Application Security (WebAppSec) ♦Benefícios da padronização ♦ APIs que fazem requisições de origens cruzadas podem usar os algoritmos definidos na especificação © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 9.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE Cross-DomainAJAX com CORS ♦O que é XMLHttpRequest? ♦ É uma API que fornece funcionalidades do lado do cliente para transmissão de dados entre um cliente e um servidor ♦Especificação XMLHttpRequest no W3C ♦ W3C Working Draft 6 December 2012 ♦ http://www.w3.org/TR/XMLHttpRequest/ ♦A nova especificação XMLHttpRequest introduz novos recursos ♦ Requisições de origens cruzadas ♦ Eventos de progresso de upload ♦ Suporte para upload e download de dados binários © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 10.
    SESSÃO: INFRAESTRUTURA Demonstração Cross-Domain AJAXcom CORS ♦Criação de uma solução no Visual Studio 2013 ♦ Projeto de uma API web ♦ MvpShowCast.WebApi ♦ Projeto de uma aplicação web ♦ MvpShowCast.WebSite ♦Publicação da solução no Windows Azure ♦ API web: mvpshowcastwebapi.azurewebsites.net ♦ Aplicação web: mvpshowcastwebsite.azurewebsites.net ♦ Aplicação web 2: mvpshowcastwebsite2.azurewebsites.net ♦Habilitação de CORS na API web © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: INTEROPERABILIDADE
  • 11.
    SESSÃO: INFRAESTRUTURA Documentação ♦HTTP/1.1 User-Agent ♦http://tools.ietf.org/html/rfc2616#section-14.43 ♦The Web Origin Concept ♦ http://tools.ietf.org/html/rfc6454 ♦Same-Origin Policy ♦ http://www.w3.org/Security/wiki/Same_Origin_Policy ♦Cross-Origin Resource Sharing ♦ W3C Candidate Recommendation 29 January 2013 ♦ http://www.w3.org/TR/cors/ © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: INTEROPERABILIDADE
  • 12.
    SESSÃO: INFRAESTRUTURA TRILHA: INTEROPERABILIDADE Perguntas& Respostas Rogério Moraes de Carvalho Visual C# Diretor de Tecnologia – VITA Informática @rogeriomc rogeriomc.wordpress.com © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.