Ternyata penting untuk memberikan lapisan keamanan melalui konten di aplikasi kita
Sebagai seorang frontend developer, kita adalah garis depan yang berurusan dengan user. Dengan pemahaman tersebut, harusnya kita aware bahwa kebutuhan user adalah hal yang jadi prioritas kita dalam mengembangkan sebuah aplikasi. Nah, salah satu kebutuhan dasar dari user tentunya adalah rasa aman untuk menggunakan aplikasi buatan kita a.k.a security.
Kita tentunya enggak mau dong user merasa enggak safe pake aplikasi kita, di sisi lain kita juga enggak mau dong aplikasi yang kita buat masak vulnerable gitu. Ngisin-ngisini (re: memalukan), kecuali kamu developer buat aplikasi pemerintah sih ya, yang udah berkali-kali memang proven bukan hanya vulnerable tapi enggak layak naik production.
Oke back to topic terkait security, kali ini saya pengen buat semacam series untuk membahas hal-hal yang bisa kita perhatikan dan tingkatkan untuk membantu meningkatkan security di aplikasi kita yang hasil akhirnya tentu bisa meningkatkan rasa aman user kita dan jadinya semakin banyak user yang pakai aplikasi kita.
Kenapa dibuat series, soalnya banyak yang bisa dicover, kalo dijadikan satu artikel tu nanti… saya bingung nulisnya, soalnya masih latihan nulis lagi di medium. Hehe
Pada edisi pertama ini, saya mau membahas hal terkait security yang mungkin tidak terlalu familiar, namun ternyata ini cukup penting untuk diimplement. Apalagi jika aplikasi kita melibatkan proses upload content seperti image, yaitu cleaning EXIF data.
EXIF (Exchangeable Image File Format) data adalah informasi metadata yang tersimpan di file gambar, biasanya ini bawaan dari kamera digital atau aplikasi image editor. Beberapa data yang ada di dalam EXIF diantaranya: tanggal & waktu, camera settings, resolusi, lokasi, model device, dan perangkat lunak editing kalo ada.
Dari penjelasan singkat di atas, kita bisa notice kalo ada dua data yang relate dengan security dan privacy, yaitu tanggal dan waktu dan lokasi. Untuk tanggal dan waktu mungkin masih debatable lah ya, tapi kalo lokasi kan sudah masuk ranah privasi meskipun bisa juga dianggap sebagai public data karena bisa ditrack.
Terus enggak issue dong, ash?! Yo issue lah gimana sih…. debatable tu berarti ya bisa berarti “iya”
Balik lagi, kenapa ini penting, karena image ini kan mostly dalam aplikasi kita dia sifatnya publik ya. Semua orang bisa download image itu kalo contentnya memang muncul di layar user, berbeda dengan data sensitive yang mungkin bisa didapatkan kalo emang ada data breach atau leaked.
Dan banyak juga kasus-kasus kejahatan kan bermodalkan track dari 2 data tadi, yaitu tanggal dan waktu sama lokasi. Juga model kamera ataupun data perangkat lunak dapat digunakan juga oleh pihak yang enggak bertanggung jawab untuk attempt eksploitasi keamanan.
So…. what should we do?
Untungnya sebagai frontend developer, kita berinteraksi dekat dengan file-file user yang akan diupload melalui sistem, jadi kita bisa melakukan pencegahan-pencegahan untuk mengamankan data tersebut. Caranya ya jelas, sebelum kita melakukan proses upload ke backend kita perlu melakukan exif cleansing/exif remove.
Bermodalkan library exifremove dari NPM, kita bisa membuat helper seperti ini:
import exifRemover from 'exifremove';
/**
* Delete Image Exif
* @description
* delete exif data from jpg or jpeg image
* and return clean image
* @param {string | ArrayBuffer} image
* @param {any} imageType
* @returns
*/
export const deleteImageExif = (image: string | ArrayBuffer, imageType: any) => {
// @ts-ignore
const buffer = Buffer.from(image);
const tempBuffer = exifRemover.remove(buffer);
const blob = new Blob([tempBuffer], { type: imageType });
const resultImageDeletedExif = new File(
[blob],
`temp.${imageType.split('/')[1]}`,
{ type: imageType },
);
return resultImageDeletedExif;
};
The usage:
const readerBuffer = new FileReader();
const imageFile = e.target.files[0];
readerBuffer.readAsArrayBuffer(imageFile);
const { type: imageType, size } = imageFile;
readerBuffer.onloadend = (event) => {
const imageLoaded = {
previewUrl: URL.createObjectURL(imageFile),
file: null,
};
if (imageType === 'image/jpeg' || imageType === 'image/jpg') {
const deletedExif = deleteImageExif(event.target.result, imageType);
imageLoaded.file = deletedExif;
} else {
imageLoaded.file = imageFile;
}
setFile(imageLoaded.file, imageLoaded.previewUrl, 'image');
};
// Terus tinggal upload deh filenya
Dah as simple as that, terus apasih manfaat implement ini? Kenapa kita perlu aware terkait ini selain terkait privacy tadi?
Dalam beberapa kasus, terutama dengan regional yang punya regulasi yang ketat seperti di Eropa, menyimpan data pribadi kaya lokasi tanpa persetujuan pengguna tuh bisa dianggap sebagai pelanggaran hukum. Jadi implementasi seperti ini bisa sangat bermanfaat untuk menghindari masalah hukum terkait privasi
Data-data EXIF ini juga menambah ukuran file gambar, jadi dengan implementasi ini kita bisa mengurangi ukuran file gambar dan mungkin bisa juga kita implement image optimization helper yang lain di dalamnya
Relate dengan EXIF yang menambah ukuran file gambar, nyatanya data EXIF ini banyak yang enggak terlalu diperlukan untuk kebutuhan aplikasi kita, jadi yaa… gitu deh
Jadi dengan begini kamu, aku, dia, dan mereka alias kita-kita semua sudah sedikit lebih dekat untuk memberikan pelayanan prima ke user dengan menambah rasa aman user dalam menggunakan aplikasi kita.
Sampai jumpa di edisi selanjutnya, have a great day!