Bagaimana memposting json di html?

Seorang rekan kerja dan saya sedang melihat sebuah aplikasi hari ini yang, seperti banyak aplikasi web modern lainnya, menawarkan RESTful API dengan JSON yang digunakan untuk serialisasi permintaan/tanggapan. Dia mencatat bahwa aplikasi tersebut tidak menyertakan token CSRF apa pun dan sepertinya tidak menggunakan salah satu header (X-Requested-With, Referer, Origin, dll. ) sebagai "token CSRF orang miskin", tetapi karena memposting JSON, apakah benar-benar rentan terhadap CSRF?

Menariknya, ini mengingatkan banyak kebingungan antara server dan browser yang dijelaskan dalam The Tangled Web karya Michal Zalewski

Gagasan bahwa penggunaan pengkodean tertentu adalah batas keamanan, paling buruk, adalah gagasan keamanan yang sepenuhnya salah, dan paling banter, sementara sampai W3C, vendor browser, atau penyerang pintar mendapatkan API Anda. Mari kita periksa pengodean JSON sebagai perlindungan terhadap CSRF dan mendemonstrasikan mini-PoC

Aplikasi

Kami memiliki aplikasi dasar yang ditulis dalam Go. Pengecekan autentikasi dihilangkan untuk ukuran posting, tetapi ini bukan hanya titik akhir yang tidak diautentikasi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

type Secrets struct {
	Secret int
}

var storage Secrets

func handler(w http.ResponseWriter, r *http.Request) {
	if r.Method == "POST" {
		json.NewDecoder(r.Body).Decode(&storage)
	}
	fmt.Fprintf(w, "The secret is %d", storage.Secret)
}

func main() {
	http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}
Seperti yang Anda lihat, ini pada dasarnya menyajikan nomor rahasia yang dapat diperbarui melalui HTTP POST dari objek JSON. Jika kami mencoba URL-encoded atau multipart POST, decoding JSON gagal total dan rahasianya tetap tidak berubah. Kita harus POST JSON untuk mengubah nilai rahasia
Menjelajahi Pilihan
Jadi mari kita jelajahi opsi kita di sini. Situs dapat menggunakan AJAX secara lokal melalui API XMLHTTPRequest, tetapi karena Kebijakan Asal-Sama, situs penyerang tidak dapat menggunakan ini. Untuk sebagian besar CSRF, cara menyiasatinya adalah formulir HTML biasa, karena pengiriman formulir tidak tunduk pada Kebijakan Asal-Sama. W3C memiliki draf spesifikasi untuk formulir JSON, tetapi telah ditinggalkan sejak akhir 2015, dan tidak didukung di browser mana pun. Mungkin ada beberapa teknik yang bisa menggunakan Flash atau plugin browser lainnya (bukankah selalu ada?) tetapi bahkan bisa dilakukan dengan bentuk dasar, hanya perlu sedikit usaha.



JSON dalam Formulir
Biasanya, jika kami mencoba untuk POST JSON sebagai, katakanlah, nilai formulir, itu akhirnya disandikan URL, belum lagi termasuk nama bidang
1
2
3
4
<form method='POST'>
  <input name='json' value='{"foo": "bar"}'>
  <input type='submit'>
</form>
Hasil dalam badan POST dari



1
json=%7B%22foo%22%3A+%22bar%22%7D
Semoga berhasil mendekodekannya sebagai JSON
Melakukannya sebagai nama bidang formulir tidak menjadi lebih baik



1
%7B%22foo%22%3A+%22bar%22%7D=value
Ternyata Anda dapat mengatur enctype formulir Anda ke 
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

type Secrets struct {
	Secret int
}

var storage Secrets

func handler(w http.ResponseWriter, r *http.Request) {
	if r.Method == "POST" {
		json.NewDecoder(r.Body).Decode(&storage)
	}
	fmt.Fprintf(w, "The secret is %d", storage.Secret)
}

func main() {
	http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}
4 dan menghindari penyandian URL pada data formulir. Pada titik ini, Anda akan mendapatkan sesuatu seperti
1
json={"foo": "bar"}
Sayangnya, kami masih harus berurusan dengan nama bidang formulir dan pemisah (
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

type Secrets struct {
	Secret int
}

var storage Secrets

func handler(w http.ResponseWriter, r *http.Request) {
	if r.Method == "POST" {
		json.NewDecoder(r.Body).Decode(&storage)
	}
	fmt.Fprintf(w, "The secret is %d", storage.Secret)
}

func main() {
	http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}
5). Ini adalah masalah sederhana membagi payload kami di kedua nama bidang dan nilai, dan menempelkan tanda sama dengan di bidang yang tidak digunakan. (Atau Anda dapat menggunakannya sebagai bagian dari muatan Anda jika Anda membutuhkannya. )
 

Bagaimana cara memposting data JSON dalam HTML?
Pendekatan . 
 
Buat formulir dengan inputnya dan kirim input/tombol seperti yang biasa Anda lakukan
 
Berikan formulir Id unik
 
Tambahkan pendengar acara kirim ke formulir dan berikan objek acara dengannya
 
Buat badan permintaan dalam format JSON menggunakan kelas FormData
 
Tambahkan tajuk apa pun, jika perlu
 
Bisakah saya memasukkan JSON ke dalam HTML?
Jawabannya. Ya, Anda dapat menyisipkan data terstruktur JSON baik di badan atau kepala . 
Bagaimana cara mengirim data JSON dalam HTTP POST?
Untuk mengirim data JSON ke server, Anda perlu menyediakan data JSON di badan permintaan HTTP POST dan meneruskan "Jenis Konten. tajuk permintaan aplikasi/json" . Header permintaan Content-Type menentukan jenis media untuk sumber daya di dalam tubuh. 
Bagaimana cara mendapatkan data JSON ke halaman HTML?
Kode jQuery menggunakan metode getJSON() untuk mengambil data dari lokasi file menggunakan permintaan HTTP GET AJAX . Dibutuhkan dua argumen. Salah satunya adalah lokasi file JSON dan yang lainnya adalah fungsi yang berisi data JSON. Fungsi each() digunakan untuk mengiterasi semua objek dalam array.