de Anthony Ng

Cum se utilizează padding JSON (și alte opțiuni) pentru a ocoli aceeași politică de origine

Cum se utilizeaza padding JSON si alte optiuni pentru a
Fotografie de Ed. 259 pe Unsplash

Î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ă.

Cum se utilizeaza padding JSON si alte optiuni pentru a
Eroare la încercarea de a efectua apeluri de la serverul client la serverul API

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 <script> 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:

1612041486 142 Cum se utilizeaza padding JSON si alte optiuni pentru a
Setarea antetului tip conținut pentru răspuns

Ta <script> tag poate face referire la un URL care nu havea js extensie.

Etichetele de script nu sunt limitate de politica privind aceeași origine. Există alte etichete, cum ar fi <img>; 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 <script> tag. Pentru că noised a &lt; 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.

1612041486 412 Cum se utilizeaza padding JSON si alte optiuni pentru a
Interpretarea artistului de JSON cu Padding

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.

<script> 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.

1612041486 850 Cum se utilizeaza padding JSON si alte optiuni pentru a

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