പോസ്റ്റ്‌മെസ്സേജ് എപിഐ ഉപയോഗിച്ചുള്ള ക്രോസ്-ഒറിജിൻ കമ്മ്യൂണിക്കേഷൻ: സുരക്ഷാ പാറ്റേണുകൾ

ആധുനിക വെബിൽ, ആപ്ലിക്കേഷനുകൾക്ക് പലപ്പോഴും വ്യത്യസ്ത ഒറിജിനുകളിൽ നിന്നുള്ള റിസോഴ്‌സുകളുമായി സംവദിക്കേണ്ടതായി വരുന്നു. ഒരു സ്ക്രിപ്റ്റ് മറ്റൊരു ഒറിജിനിൽ നിന്നുള്ള റിസോഴ്‌സുകൾ ആക്‌സസ് ചെയ്യുന്നത് തടയുന്ന ഒരു പ്രധാന സുരക്ഷാ സംവിധാനമാണ് സെയിം-ഒറിജിൻ പോളിസി (SOP). എന്നിരുന്നാലും, ക്രോസ്-ഒറിജിൻ ആശയവിനിമയം ആവശ്യമായി വരുന്ന സാഹചര്യങ്ങളുമുണ്ട്. postMessage എപിഐ ഇതിനായി ഒരു നിയന്ത്രിത സംവിധാനം നൽകുന്നു, പക്ഷേ അതിൻ്റെ സുരക്ഷാ അപകടസാധ്യതകൾ മനസ്സിലാക്കുകയും ഉചിതമായ സുരക്ഷാ പാറ്റേണുകൾ നടപ്പിലാക്കുകയും ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്.

സെയിം-ഒറിജിൻ പോളിസി (SOP) മനസ്സിലാക്കാം

വെബ് ബ്രൗസറുകളിലെ ഒരു അടിസ്ഥാന സുരക്ഷാ ആശയമാണ് സെയിം-ഒറിജിൻ പോളിസി. ഒരു വെബ് പേജ് സെർവ് ചെയ്ത ഡൊമെയ്‌നിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു ഡൊമെയ്‌നിലേക്ക് അഭ്യർത്ഥനകൾ നടത്തുന്നത് ഇത് നിയന്ത്രിക്കുന്നു. സ്കീം (പ്രോട്ടോക്കോൾ), ഹോസ്റ്റ് (ഡൊമെയ്ൻ), പോർട്ട് എന്നിവ ഉപയോഗിച്ചാണ് ഒരു ഒറിജിൻ നിർവചിക്കുന്നത്. ഇവയിലേതെങ്കിലും വ്യത്യാസപ്പെട്ടിരുന്നാൽ, ഒറിജിനുകൾ വ്യത്യസ്തമായി കണക്കാക്കപ്പെടുന്നു. ഉദാഹരണത്തിന്:

• https://example.com
• https://www.example.com
• http://example.com
• https://example.com:8080

ഇവയെല്ലാം വ്യത്യസ്ത ഒറിജിനുകളാണ്, ഇവ തമ്മിലുള്ള നേരിട്ടുള്ള സ്ക്രിപ്റ്റ് ആക്‌സസ് SOP നിയന്ത്രിക്കുന്നു.

പോസ്റ്റ്‌മെസ്സേജ് എപിഐ: ഒരു ആമുഖം

ക്രോസ്-ഒറിജിൻ ആശയവിനിമയത്തിനായി സുരക്ഷിതവും നിയന്ത്രിതവുമായ ഒരു സംവിധാനം postMessage എപിഐ നൽകുന്നു. ഇത് സ്ക്രിപ്റ്റുകൾക്ക് ഒറിജിൻ പരിഗണിക്കാതെ മറ്റ് വിൻഡോകളിലേക്ക് (ഉദാഹരണത്തിന്, ഐഫ്രെയിമുകൾ, പുതിയ വിൻഡോകൾ, അല്ലെങ്കിൽ ടാബുകൾ) സന്ദേശങ്ങൾ അയക്കാൻ അനുവദിക്കുന്നു. സന്ദേശം സ്വീകരിക്കുന്ന വിൻഡോയ്ക്ക് ഈ സന്ദേശങ്ങൾക്കായി കാത്തിരിക്കാനും അതിനനുസരിച്ച് പ്രോസസ്സ് ചെയ്യാനും കഴിയും.

ഒരു സന്ദേശം അയക്കുന്നതിനുള്ള അടിസ്ഥാന സിൻ്റാക്സ് ഇതാണ്:

otherWindow.postMessage(message, targetOrigin);

• otherWindow: ടാർഗെറ്റ് വിൻഡോയിലേക്കുള്ള ഒരു റഫറൻസ് (ഉദാഹരണത്തിന്, window.parent, iframe.contentWindow, അല്ലെങ്കിൽ window.open-ൽ നിന്ന് ലഭിച്ച ഒരു വിൻഡോ ഒബ്ജക്റ്റ്).
• message: നിങ്ങൾ അയക്കാൻ ആഗ്രഹിക്കുന്ന ഡാറ്റ. ഇത് സീരിയലൈസ് ചെയ്യാൻ കഴിയുന്ന ഏതൊരു ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റും ആകാം (ഉദാഹരണത്തിന്, സ്ട്രിംഗുകൾ, നമ്പറുകൾ, ഒബ്ജക്റ്റുകൾ, അറേകൾ).
• targetOrigin: നിങ്ങൾ ഏത് ഒറിജിനിലേക്കാണ് സന്ദേശം അയക്കാൻ ആഗ്രഹിക്കുന്നതെന്ന് വ്യക്തമാക്കുന്നു. ഇത് ഒരു നിർണായക സുരക്ഷാ പാരാമീറ്ററാണ്.

സ്വീകരിക്കുന്ന ഭാഗത്ത്, നിങ്ങൾ message ഇവന്റിനായി കാത്തിരിക്കേണ്ടതുണ്ട്:

window.addEventListener('message', function(event) {
  // ...
});

event ഒബ്ജക്റ്റിൽ താഴെ പറയുന്ന പ്രോപ്പർട്ടികൾ അടങ്ങിയിരിക്കുന്നു:

• event.data: മറ്റ് വിൻഡോ അയച്ച സന്ദേശം.
• event.origin: സന്ദേശം അയച്ച വിൻഡോയുടെ ഒറിജിൻ.
• event.source: സന്ദേശം അയച്ച വിൻഡോയിലേക്കുള്ള ഒരു റഫറൻസ്.

സുരക്ഷാ അപകടസാധ്യതകളും കേടുപാടുകളും

postMessage സെയിം-ഒറിജിൻ പോളിസി നിയന്ത്രണങ്ങളെ മറികടക്കാൻ ഒരു വഴി വാഗ്ദാനം ചെയ്യുന്നുണ്ടെങ്കിലും, ശ്രദ്ധയോടെ നടപ്പിലാക്കിയില്ലെങ്കിൽ അത് സുരക്ഷാ അപകടസാധ്യതകൾക്ക് കാരണമാകും. സാധാരണയായി കാണുന്ന ചില കേടുപാടുകൾ താഴെ നൽകുന്നു:

1. ടാർഗെറ്റ് ഒറിജിൻ പൊരുത്തക്കേട്

event.origin പ്രോപ്പർട്ടി പരിശോധിക്കുന്നതിൽ പരാജയപ്പെടുന്നത് ഒരു നിർണായകമായ കേടുപാടാണ്. സന്ദേശം സ്വീകരിക്കുന്നയാൾ അത് അന്ധമായി വിശ്വസിക്കുകയാണെങ്കിൽ, ഏത് വെബ്സൈറ്റിനും ക്ഷുദ്രകരമായ ഡാറ്റ അയക്കാൻ കഴിയും. സന്ദേശം പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പ് event.origin പ്രതീക്ഷിക്കുന്ന ഒറിജിനുമായി പൊരുത്തപ്പെടുന്നുണ്ടോ എന്ന് എപ്പോഴും പരിശോധിക്കുക.

ഉദാഹരണം (സുരക്ഷിതമല്ലാത്ത കോഡ്):

window.addEventListener('message', function(event) {
  // ഇത് ചെയ്യരുത്!
  processMessage(event.data);
});

ഉദാഹരണം (സുരക്ഷിതമായ കോഡ്):

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('വിശ്വസനീയമല്ലാത്ത ഒറിജിനിൽ നിന്ന് സന്ദേശം ലഭിച്ചു:', event.origin);
    return;
  }

  processMessage(event.data);
});

2. ഡാറ്റാ ഇൻജെക്ഷൻ

ലഭിച്ച ഡാറ്റ (event.data) എക്സിക്യൂട്ടബിൾ കോഡായി പരിഗണിക്കുകയോ അല്ലെങ്കിൽ നേരിട്ട് ഡോമിലേക്ക് (DOM) ചേർക്കുകയോ ചെയ്യുന്നത് ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ് (XSS) കേടുപാടുകളിലേക്ക് നയിച്ചേക്കാം. ലഭിച്ച ഡാറ്റ ഉപയോഗിക്കുന്നതിന് മുമ്പ് എല്ലായ്പ്പോഴും അത് സാനിറ്റൈസ് ചെയ്യുകയും സാധൂകരിക്കുകയും ചെയ്യുക.

ഉദാഹരണം (സുരക്ഷിതമല്ലാത്ത കോഡ്):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    document.body.innerHTML = event.data; // ഇത് ചെയ്യരുത്!
  }
});

ഉദാഹരണം (സുരക്ഷിതമായ കോഡ്):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    const sanitizedData = sanitize(event.data); // ശരിയായ ഒരു സാനിറ്റൈസേഷൻ ഫംഗ്ഷൻ നടപ്പിലാക്കുക
    document.getElementById('message-container').textContent = sanitizedData;
  }
});

function sanitize(data) {
    // ശക്തമായ സാനിറ്റൈസേഷൻ ലോജിക് ഇവിടെ നടപ്പിലാക്കുക.
    // ഉദാഹരണത്തിന്, DOMPurify അല്ലെങ്കിൽ സമാനമായ ലൈബ്രറി ഉപയോഗിക്കുക
    return DOMPurify.sanitize(data);
}

3. മാൻ-ഇൻ-ദി-മിഡിൽ (MITM) ആക്രമണങ്ങൾ

ആശയവിനിമയം സുരക്ഷിതമല്ലാത്ത ഒരു ചാനലിലൂടെ (HTTP) നടക്കുകയാണെങ്കിൽ, ഒരു MITM ആക്രമണകാരിക്ക് സന്ദേശങ്ങൾ തടസ്സപ്പെടുത്താനും മാറ്റം വരുത്താനും കഴിയും. സുരക്ഷിതമായ ആശയവിനിമയത്തിനായി എപ്പോഴും HTTPS ഉപയോഗിക്കുക.

4. ക്രോസ്-സൈറ്റ് റിക്വസ്റ്റ് ഫോർജറി (CSRF)

സ്വീകരിക്കുന്നയാൾ ശരിയായ പരിശോധനയില്ലാതെ ലഭിച്ച സന്ദേശത്തെ അടിസ്ഥാനമാക്കി പ്രവർത്തനങ്ങൾ നടത്തുകയാണെങ്കിൽ, ഒരു ആക്രമണകാരിക്ക് ഉദ്ദേശിക്കാത്ത പ്രവർത്തനങ്ങൾ ചെയ്യാൻ സ്വീകരിക്കുന്നയാളെ കബളിപ്പിക്കുന്നതിനായി സന്ദേശങ്ങൾ വ്യാജമായി നിർമ്മിക്കാൻ കഴിഞ്ഞേക്കാം. CSRF സംരക്ഷണ സംവിധാനങ്ങൾ നടപ്പിലാക്കുക, ഉദാഹരണത്തിന് സന്ദേശത്തിൽ ഒരു രഹസ്യ ടോക്കൺ ഉൾപ്പെടുത്തുകയും സ്വീകരിക്കുന്ന ഭാഗത്ത് അത് പരിശോധിക്കുകയും ചെയ്യുക.

5. targetOrigin-ൽ വൈൽഡ്കാർഡുകൾ ഉപയോഗിക്കുന്നത്

targetOrigin എന്നത് * ആയി സജ്ജീകരിക്കുന്നത് ഏത് ഒറിജിനും സന്ദേശം സ്വീകരിക്കാൻ അനുവദിക്കുന്നു. ഇത് തികച്ചും ആവശ്യമില്ലെങ്കിൽ ഒഴിവാക്കണം, കാരണം ഇത് ഒറിജിൻ അടിസ്ഥാനമാക്കിയുള്ള സുരക്ഷയുടെ ഉദ്ദേശ്യത്തെ പരാജയപ്പെടുത്തുന്നു. നിങ്ങൾ * ഉപയോഗിക്കുകയാണെങ്കിൽ, മെസ്സേജ് ഓതൻ്റിക്കേഷൻ കോഡുകൾ (MACs) പോലുള്ള മറ്റ് ശക്തമായ സുരക്ഷാ നടപടികൾ നടപ്പിലാക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.

ഉദാഹരണം (ഇത് ഒഴിവാക്കുക):

otherWindow.postMessage(message, '*'); // തികച്ചും ആവശ്യമില്ലെങ്കിൽ '*' ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക

സുരക്ഷാ പാറ്റേണുകളും മികച്ച രീതികളും

postMessage-മായി ബന്ധപ്പെട്ട അപകടസാധ്യതകൾ ലഘൂകരിക്കുന്നതിന്, ഈ സുരക്ഷാ പാറ്റേണുകളും മികച്ച രീതികളും പിന്തുടരുക:

1. കർശനമായ ഒറിജിൻ പരിശോധന

സ്വീകരിക്കുന്ന ഭാഗത്ത് എല്ലായ്പ്പോഴും event.origin പ്രോപ്പർട്ടി സാധൂകരിക്കുക. വിശ്വസനീയമായ ഒറിജിനുകളുടെ മുൻകൂട്ടി നിശ്ചയിച്ച ലിസ്റ്റുമായി അതിനെ താരതമ്യം ചെയ്യുക. താരതമ്യത്തിനായി സ്ട്രിക്റ്റ് ഇക്വാളിറ്റി (===) ഉപയോഗിക്കുക.

2. ഡാറ്റാ സാനിറ്റൈസേഷനും വാലിഡേഷനും

postMessage വഴി ലഭിക്കുന്ന എല്ലാ ഡാറ്റയും ഉപയോഗിക്കുന്നതിന് മുമ്പ് സാനിറ്റൈസ് ചെയ്യുകയും സാധൂകരിക്കുകയും ചെയ്യുക. ഡാറ്റ എങ്ങനെ ഉപയോഗിക്കും എന്നതിനെ ആശ്രയിച്ച് ഉചിതമായ സാനിറ്റൈസേഷൻ രീതികൾ ഉപയോഗിക്കുക (ഉദാഹരണത്തിന്, HTML എസ്കേപ്പിംഗ്, URL എൻകോഡിംഗ്, ഇൻപുട്ട് വാലിഡേഷൻ). HTML സാനിറ്റൈസ് ചെയ്യുന്നതിന് DOMPurify പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുക.

3. മെസ്സേജ് ഓതൻ്റിക്കേഷൻ കോഡുകൾ (MACs)

സന്ദേശത്തിൻ്റെ സമഗ്രതയും ആധികാരികതയും ഉറപ്പാക്കുന്നതിന് സന്ദേശത്തിൽ ഒരു മെസ്സേജ് ഓതൻ്റിക്കേഷൻ കോഡ് (MAC) ഉൾപ്പെടുത്തുക. അയക്കുന്നയാൾ ഒരു ഷെയർഡ് സീക്രട്ട് കീ ഉപയോഗിച്ച് MAC കണക്കാക്കുകയും അത് സന്ദേശത്തിൽ ഉൾപ്പെടുത്തുകയും ചെയ്യുന്നു. സ്വീകരിക്കുന്നയാൾ അതേ ഷെയർഡ് സീക്രട്ട് കീ ഉപയോഗിച്ച് MAC വീണ്ടും കണക്കാക്കുകയും ലഭിച്ച MAC-മായി താരതമ്യം ചെയ്യുകയും ചെയ്യുന്നു. അവ പൊരുത്തപ്പെടുന്നുവെങ്കിൽ, സന്ദേശം ആധികാരികവും മാറ്റം വരുത്താത്തതുമായി കണക്കാക്കപ്പെടുന്നു.

ഉദാഹരണം (HMAC-SHA256 ഉപയോഗിച്ച്):

// അയക്കുന്നയാൾ
async function sendMessage(message, targetOrigin, sharedSecret) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: message,
    signature: signatureHex
  };

  otherWindow.postMessage(securedMessage, targetOrigin);
}

// സ്വീകരിക്കുന്നയാൾ
async function receiveMessage(event, sharedSecret) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('വിശ്വസനീയമല്ലാത്ത ഒറിജിനിൽ നിന്ന് സന്ദേശം ലഭിച്ചു:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const message = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  if (signatureHex === receivedSignature) {
    console.log('സന്ദേശം ആധികാരികമാണ്!');
    processMessage(message); // സന്ദേശം പ്രോസസ്സ് ചെയ്യുന്നത് തുടരുക
  } else {
    console.error('സന്ദേശത്തിൻ്റെ സിഗ്നേച്ചർ പരിശോധന പരാജയപ്പെട്ടു!');
  }
}

പ്രധാനമായി ശ്രദ്ധിക്കുക: ഷെയർഡ് സീക്രട്ട് കീ സുരക്ഷിതമായി ഉണ്ടാക്കുകയും സൂക്ഷിക്കുകയും വേണം. കോഡിൽ കീ ഹാർഡ്‌കോഡ് ചെയ്യുന്നത് ഒഴിവാക്കുക.

4. നോൺസും ടൈംസ്റ്റാമ്പുകളും ഉപയോഗിക്കുന്നത്

റീപ്ലേ ആക്രമണങ്ങൾ തടയുന്നതിന്, സന്ദേശത്തിൽ ഒരു യുണീക് നോൺസ് (ഒരിക്കൽ മാത്രം ഉപയോഗിക്കുന്ന നമ്പർ), ഒരു ടൈംസ്റ്റാമ്പ് എന്നിവ ഉൾപ്പെടുത്തുക. സ്വീകരിക്കുന്നയാൾക്ക് നോൺസ് മുമ്പ് ഉപയോഗിച്ചിട്ടില്ലെന്നും ടൈംസ്റ്റാമ്പ് സ്വീകാര്യമായ ഒരു സമയപരിധിക്കുള്ളിലാണെന്നും പരിശോധിക്കാൻ കഴിയും. ഇത് ആക്രമണകാരി മുമ്പ് തടഞ്ഞുവെച്ച സന്ദേശങ്ങൾ വീണ്ടും അയക്കുന്നതിനുള്ള സാധ്യത കുറയ്ക്കുന്നു.

5. ഏറ്റവും കുറഞ്ഞ പ്രിവിലേജ് തത്വം (Principle of Least Privilege)

മറ്റേ വിൻഡോയ്ക്ക് ഏറ്റവും കുറഞ്ഞ ആവശ്യമായ പ്രിവിലേജുകൾ മാത്രം നൽകുക. ഉദാഹരണത്തിന്, മറ്റേ വിൻഡോയ്ക്ക് ഡാറ്റ വായിക്കാൻ മാത്രമേ ആവശ്യമുള്ളൂവെങ്കിൽ, അത് ഡാറ്റ എഴുതാൻ അനുവദിക്കരുത്. ഏറ്റവും കുറഞ്ഞ പ്രിവിലേജ് തത്വം മനസ്സിൽ വെച്ചുകൊണ്ട് നിങ്ങളുടെ ആശയവിനിമയ പ്രോട്ടോക്കോൾ രൂപകൽപ്പന ചെയ്യുക.

6. കണ്ടൻ്റ് സെക്യൂരിറ്റി പോളിസി (CSP)

സ്ക്രിപ്റ്റുകൾ ലോഡുചെയ്യാൻ കഴിയുന്ന ഉറവിടങ്ങളെയും സ്ക്രിപ്റ്റുകൾക്ക് ചെയ്യാൻ കഴിയുന്ന പ്രവർത്തനങ്ങളെയും നിയന്ത്രിക്കുന്നതിന് കണ്ടൻ്റ് സെക്യൂരിറ്റി പോളിസി (CSP) ഉപയോഗിക്കുക. postMessage ഡാറ്റയുടെ തെറ്റായ കൈകാര്യം ചെയ്യൽ മൂലം ഉണ്ടാകാനിടയുള്ള XSS കേടുപാടുകളുടെ ആഘാതം ലഘൂകരിക്കാൻ ഇത് സഹായിക്കും.

7. ഇൻപുട്ട് വാലിഡേഷൻ

ലഭിച്ച ഡാറ്റയുടെ ഘടനയും ഫോർമാറ്റും എപ്പോഴും സാധൂകരിക്കുക. വ്യക്തമായ ഒരു സന്ദേശ ഫോർമാറ്റ് നിർവചിക്കുകയും ലഭിച്ച ഡാറ്റ ഈ ഫോർമാറ്റിന് അനുസൃതമാണെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുക. ഇത് അപ്രതീക്ഷിതമായ പെരുമാറ്റങ്ങളും കേടുപാടുകളും തടയാൻ സഹായിക്കുന്നു.

8. സുരക്ഷിതമായ ഡാറ്റാ സീരിയലൈസേഷൻ

സന്ദേശങ്ങൾ സീരിയലൈസ് ചെയ്യാനും ഡീസീരിയലൈസ് ചെയ്യാനും JSON പോലുള്ള ഒരു സുരക്ഷിതമായ ഡാറ്റാ സീരിയലൈസേഷൻ ഫോർമാറ്റ് ഉപയോഗിക്കുക. eval() അല്ലെങ്കിൽ Function() പോലുള്ള കോഡ് എക്സിക്യൂഷൻ അനുവദിക്കുന്ന ഫോർമാറ്റുകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.

9. സന്ദേശത്തിന്റെ വലുപ്പം പരിമിതപ്പെടുത്തുക

postMessage വഴി അയക്കുന്ന സന്ദേശങ്ങളുടെ വലുപ്പം പരിമിതപ്പെടുത്തുക. വലിയ സന്ദേശങ്ങൾ അമിതമായ റിസോഴ്‌സുകൾ ഉപയോഗിക്കുകയും ഡിനയൽ-ഓഫ്-സർവീസ് ആക്രമണങ്ങൾക്ക് കാരണമാവുകയും ചെയ്യും.

10. പതിവായ സുരക്ഷാ ഓഡിറ്റുകൾ

നിങ്ങളുടെ കോഡിലെ സാധ്യമായ കേടുപാടുകൾ തിരിച്ചറിയാനും പരിഹരിക്കാനും പതിവായി സുരക്ഷാ ഓഡിറ്റുകൾ നടത്തുക. postMessage നടപ്പിലാക്കുന്നതിൽ പ്രത്യേക ശ്രദ്ധ നൽകുകയും എല്ലാ സുരക്ഷാ മികച്ച രീതികളും പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുക.

ഉദാഹരണം: ഒരു ഐഫ്രെയിമും അതിൻ്റെ പാരൻ്റും തമ്മിലുള്ള സുരക്ഷിതമായ ആശയവിനിമയം

https://iframe.example.com-ൽ ഹോസ്റ്റ് ചെയ്തിരിക്കുന്ന ഒരു ഐഫ്രെയിമിന് അതിൻ്റെ പാരൻ്റ് പേജായ https://parent.example.com-മായി ആശയവിനിമയം നടത്തേണ്ട ഒരു സാഹചര്യം പരിഗണിക്കുക. ഐഫ്രെയിമിന് ഉപയോക്താവിൻ്റെ ഡാറ്റ പ്രോസസ്സിംഗിനായി പാരൻ്റ് പേജിലേക്ക് അയക്കേണ്ടതുണ്ട്.

ഐഫ്രെയിം (https://iframe.example.com):

// ഒരു ഷെയർഡ് സീക്രട്ട് കീ ഉണ്ടാക്കുക (സുരക്ഷിതമായ കീ ഉണ്ടാക്കുന്ന രീതി ഉപയോഗിച്ച് ഇത് മാറ്റുക)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

// ഉപയോക്താവിൻ്റെ ഡാറ്റ എടുക്കുക
const userData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// ഉപയോക്താവിൻ്റെ ഡാറ്റ പാരൻ്റ് പേജിലേക്ക് അയക്കുക
async function sendUserData(userData) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: userData,
    signature: signatureHex
  };
  parent.postMessage(securedMessage, 'https://parent.example.com');
}

sendUserData(userData);

പാരൻ്റ് പേജ് (https://parent.example.com):

// ഷെയർഡ് സീക്രട്ട് കീ (ഐഫ്രെയിമിൻ്റെ കീ യുമായി പൊരുത്തപ്പെടണം)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

window.addEventListener('message', async function(event) {
  if (event.origin !== 'https://iframe.example.com') {
    console.warn('വിശ്വസനീയമല്ലാത്ത ഒറിജിനിൽ നിന്ന് സന്ദേശം ലഭിച്ചു:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const userData = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');


  if (signatureHex === receivedSignature) {
    console.log('സന്ദേശം ആധികാരികമാണ്!');
    // ഉപയോക്താവിൻ്റെ ഡാറ്റ പ്രോസസ്സ് ചെയ്യുക
    console.log('ഉപയോക്താവിൻ്റെ ഡാറ്റ:', userData);
  } else {
    console.error('സന്ദേശത്തിൻ്റെ സിഗ്നേച്ചർ പരിശോധന പരാജയപ്പെട്ടു!');
  }
});

പ്രധാന കുറിപ്പുകൾ:

• YOUR_SECURE_SHARED_SECRET എന്നതിന് പകരം സുരക്ഷിതമായി ഉണ്ടാക്കിയ ഒരു ഷെയർഡ് സീക്രട്ട് കീ ഉപയോഗിക്കുക.
• ഷെയർഡ് സീക്രട്ട് കീ ഐഫ്രെയിമിലും പാരൻ്റ് പേജിലും ഒന്ന് തന്നെയായിരിക്കണം.
• ഈ ഉദാഹരണം മെസ്സേജ് ഓതൻ്റിക്കേഷനായി HMAC-SHA256 ഉപയോഗിക്കുന്നു.

ഉപസംഹാരം

വെബ് ആപ്ലിക്കേഷനുകളിൽ ക്രോസ്-ഒറിജിൻ ആശയവിനിമയം സാധ്യമാക്കുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണ് postMessage എപിഐ. എന്നിരുന്നാലും, സാധ്യമായ സുരക്ഷാ അപകടസാധ്യതകൾ മനസ്സിലാക്കുകയും അവ ലഘൂകരിക്കുന്നതിന് ഉചിതമായ സുരക്ഷാ പാറ്റേണുകൾ നടപ്പിലാക്കുകയും ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. ഈ ഗൈഡിൽ പ്രതിപാദിച്ചിരിക്കുന്ന സുരക്ഷാ പാറ്റേണുകളും മികച്ച രീതികളും പിന്തുടരുന്നതിലൂടെ, നിങ്ങൾക്ക് ശക്തവും സുരക്ഷിതവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് postMessage സുരക്ഷിതമായി ഉപയോഗിക്കാൻ കഴിയും.

എല്ലായ്പ്പോഴും സുരക്ഷയ്ക്ക് മുൻഗണന നൽകാനും വെബ് ഡെവലപ്‌മെൻ്റിനായുള്ള ഏറ്റവും പുതിയ സുരക്ഷാ മികച്ച രീതികളെക്കുറിച്ച് അപ്‌ഡേറ്റായിരിക്കാനും ഓർക്കുക. നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ സാധ്യമായ കേടുപാടുകളിൽ നിന്ന് സംരക്ഷിക്കപ്പെട്ടിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ കോഡും സുരക്ഷാ കോൺഫിഗറേഷനുകളും പതിവായി അവലോകനം ചെയ്യുക.