Post: https://medium.com/@viniciuskneves/handling-a-jsonp-nightmare-3865c9d8bfdd

1. Como tratar múltiplos
JSONPs com o mesmo
callback name?
Vinicius Kiatkoski Neves
@viniciuskneves

2. Quem sou eu?
● Formado em Engenharia de Controle e
Automação - UFSC
● Desenvolvedor @ Chaordic
● Organizador do VueFloripa
● Amante de Javascript, cerveja e churrasco
no parque
● Minha primeira talk =]
2

3. Descrição do
problema
● Consumir API do cliente (preço dos
produtos) entre diversos serviços
● API só poderia ser usada com JSONP
(decisão do cliente)
● Outros parceiros usavam a mesma API
● Callback do JSONP não era customizável
3

4. O que é JSONP?
● Maneira de enviar um JSON sem se preocupar com problemas de CORS
○ JSONP suportar apenas GET
○ CORS suporta todos os verbos HTTP
○ CORS somente IE10+, IE8&9 tem suporte parcial (XDomainRequest)
○ XDomainRequest não aceita HTTP Headers
○ CORS → Maioria bloqueia OPTIONS que é essencial para o funcionamento
○ Solução para problemas na época do IE7
4

5. ● Tag <script> não tem restrição de CORS
● Como funciona:
○ Criamos globalmente uma função que é o callback do JSONP
○ Adicionamos uma tag <script> com source sendo a URL da API com o nome do callback criado
○ Assim que a request terminar, o script irá executar o callback com os dados desejados
O que é JSONP?
5

6. jQuery e outras
libs encapsulam
tudo
6

7. Descrição do
problema
● Consumir API do cliente (preço dos
produtos) entre diversos serviços
● API só poderia ser usada com JSONP
(decisão do cliente)
● Outros parceiros usavam a mesma API
● Callback do JSONP não era customizável
7

8. Qual o problema?
Funções com o mesmo nome no mesmo contexto.
8

9. Qual a solução?
Múltiplos contextos para poder ter a mesma
função (callback) espalhada entre eles.
9

10. Como fazer isso no
browser sem abrir
várias abas do
navegador? =]
10

11. <iframe>
“From the DOM iframe element, scripts can get access to the
window object of the included HTML page via the
contentWindow property.” - MDN
11

12. Qual a ideia?
● Para cada chamada JSONP, criar um novo <iframe>
● Criar o callback do JSONP dentro do window do <iframe>
● Inserir o script (fazer a chamada) do JSONP dentro do <iframe>
● Do callback criado eu consigo acessar o window anterior para manipular o que for
necessário
12

13. Resultado dos contextos criados
13
window.top
iframe
contentWindow.X = function (data) {...}
iframe
contentWindow.X = function (data) {...}

14. Resultado ● Não preciso me preocupar com outros
serviços (internos ou concorrentes)
● Tudo ocorre em paralelo sem problema
algum (melhoramos performance)
● Evitamos um desgaste com o cliente (que
já estava se prolongando a um tempo)
● Conceito simples e coisas isoladas, fácil de
outros membros darem manutenção
14

15. Obrigado.
15
@viniciuskneves
http://bit.ly/2zrhLOV