de Anthony Ng
Conţinut
Cum se utilizează padding JSON (și alte opțiuni) pentru a ocoli aceeași politică de origine
În acest articol, vom analiza ce este JSONP, dezavantajele sale și câteva alternative la JSONP.
Este posibil să fi întâlnit situații în care efectuați un apel API de la o origine la alta. De exemplu, avem o pagină servită de la localhost: 3000 care apelează un API de la localhost: 8000.
Notă: Ne vom referi la localhost: 3000 ca serverul nostru client. Ne vom referi la localhost: 8000 ca serverul nostru API.
Dar vedem această eroare intimidantă.
Aceasta este politica privind aceeași origine care ne protejează. Această politică restricționează modul în care resursele dintr-o origine interacționează cu resursele dintr-o altă origine. Este un mecanism de securitate critic în browser. Dar există cazuri în care dorim să facem cereri încrucișate către resurse de încredere.
JSONP (JSON cu Padding) oferă o soluție pentru această problemă a politicii de aceeași origine. Să vedem cum a apărut JSONP.
Scufundare tehnică
Putem rula cod JavaScript în fișierul nostru HTML cu <scri
pt> etichete.
Putem muta codul nostru JavaScript într-un fișier JavaScript separat și îl putem referi cu eticheta noastră de script. Pagina noastră web face acum un apel de rețea externă pentru fișierul JavaScript. Dar funcțional, totul funcționează la fel.
Fișierul Javascript nu trebuie să aibă un js
extensie. Browserul va interpreta conținutul ca fiind JavaScript dacă tipul de conținut al răspunsului este JavaScript. (text/javascript
, application/javascript
).
Majoritatea serverelor vă permit să setați tipul de conținut. În Expres, ai face:
Ta <scri
pt> tag poate face referire la un URL care nu hav
ea js extensie.
Etichetele de script nu sunt limitate de politica privind aceeași origine. Există alte etichete, cum ar fi <i
mg>; and &
lt; etichete video>, care nu sunt limitate de Politica privind aceeași origine. Deci JavaScript-ul nostru poate trăi pe o altă origine.
Codul din fișierul JavaScript are acces la tot ceea ce se află în domeniul de aplicare. Puteți utiliza funcțiile definite anterior în fișierul HTML.
Puteți transmite argumente așa cum ați face pentru un apel funcțional normal.
În exemplul de mai sus, am trecut un șir codat. Dar am putea transmite și date provenind dintr-o bază de date. Serverul nostru API poate construi fișierul JavaScript cu aceste informații dinamice.
Aceasta este ceea ce este JSONP. În loc de a folosi fetch
sau XMLHttpRequest
pentru a efectua un apel API pentru a prelua date, am folosit un <scri
pt> tag. Pentru că noised a &l
t; script> tag, am reușit să ocolim politica privind aceeași origine.
După cum am menționat mai sus, JSONP înseamnă JSON cu Padding. Ce înseamnă căptușeala? Răspunsurile API normale returnează JSON. În răspunsurile JSONP, returnăm răspunsul JSON înconjurat (sau completat) cu o funcție JavaScript.
Majoritatea serverelor vă permit să specificați numele funcției dvs. de umplere.
Serverul ia numele funcției de umplere ca o interogare. Invocă funcția dvs. de umplere cu datele JSON ca argument.
Nu vă limitați la transmiterea numelor funcțiilor ca apel invers. Puteți trece JavaScript în linie în interogarea dvs.
Nu m-am gândit la un motiv pentru a face acest lucru.
Alternative la utilizarea JSONP
Nu există specificații oficiale pentru JSONP. Mă gândesc la JSONP ca mai mult la un hack.
<scri
pt> tag-urile pot face cereri GET numai. Deci, JSONP poate face doar solicitări GET.
Partajarea resurselor între origini are o specificație oficială și este modalitatea preferată de a evita politica de aceeași origine.
Puteți activa partajarea resurselor încrucișate adăugând un antet la răspunsul nostru.
Aceasta înseamnă că toate originile pot folosi această resursă fără teama de politica privind aceeași origine.
Uneori, totuși, nu aveți control asupra codului serverului. Nu veți putea include fișierul Access-Control-Allow-Origin
antet. O soluție alternativă este de a vă face propriul server proxy să facă cererea de origine încrucișată pentru dvs. Politica privind aceeași origine se aplică doar browserului. Serverele sunt libere să facă cereri cross-origin.
Întrebări? Comentarii? Vă rugăm să lăsați un mesaj mai jos.
Resurse
#Cum #utilizează #padding #JSON #și #alte #opțiuni #pentru #ocoli #aceeași #politică #origine
Cum se utilizează padding JSON (și alte opțiuni) pentru a ocoli aceeași politică de origine