ક્રોસ-ઓરિજિન કોમ્યુનિકેશન: પોસ્ટમેસેજ API સાથે સુરક્ષા પેટર્ન

આધુનિક વેબમાં, એપ્લિકેશન્સને વારંવાર જુદા-જુદા ઓરિજિનના રિસોર્સ સાથે ઇન્ટરેક્ટ કરવાની જરૂર પડે છે. સેમ-ઓરિજિન પોલિસી (SOP) એ એક મહત્વપૂર્ણ સુરક્ષા પદ્ધતિ છે જે સ્ક્રિપ્ટને જુદા ઓરિજિનના રિસોર્સને એક્સેસ કરવાથી રોકે છે. જોકે, એવા કાયદેસરના સંજોગો હોય છે જ્યાં ક્રોસ-ઓરિજિન કોમ્યુનિકેશન જરૂરી હોય છે. postMessage API આ હાંસલ કરવા માટે એક નિયંત્રિત પદ્ધતિ પ્રદાન કરે છે, પરંતુ તેના સંભવિત સુરક્ષા જોખમોને સમજવું અને યોગ્ય સુરક્ષા પેટર્નનો અમલ કરવો ખૂબ જ મહત્વપૂર્ણ છે.

સેમ-ઓરિજિન પોલિસી (SOP) ને સમજવું

સેમ-ઓરિજિન પોલિસી વેબ બ્રાઉઝર્સમાં એક મૂળભૂત સુરક્ષા ખ્યાલ છે. તે વેબ પેજને તે ડોમેન કરતાં અલગ ડોમેન પર વિનંતીઓ કરવાથી પ્રતિબંધિત કરે છે. ઓરિજિન સ્કીમ (પ્રોટોકોલ), હોસ્ટ (ડોમેન) અને પોર્ટ દ્વારા વ્યાખ્યાયિત થાય છે. જો આમાંથી કોઈ પણ અલગ હોય, તો ઓરિજિનને અલગ ગણવામાં આવે છે. ઉદાહરણ તરીકે:

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

આ બધા જુદા-જુદા ઓરિજિન છે, અને SOP તેમની વચ્ચે સીધા સ્ક્રિપ્ટ એક્સેસને પ્રતિબંધિત કરે છે.

પોસ્ટમેસેજ API નો પરિચય

postMessage API ક્રોસ-ઓરિજિન કોમ્યુનિકેશન માટે એક સુરક્ષિત અને નિયંત્રિત પદ્ધતિ પ્રદાન કરે છે. તે સ્ક્રિપ્ટને તેમના ઓરિજિનને ધ્યાનમાં લીધા વિના અન્ય વિન્ડોઝ (દા.ત., iframes, નવી વિન્ડોઝ, અથવા ટેબ્સ) પર સંદેશા મોકલવાની મંજૂરી આપે છે. પ્રાપ્ત કરનાર વિન્ડો પછી આ સંદેશા સાંભળી શકે છે અને તે મુજબ તેમની પ્રક્રિયા કરી શકે છે.

સંદેશ મોકલવા માટેનો મૂળભૂત સિન્ટેક્સ છે:

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 SOP પ્રતિબંધોને બાયપાસ કરવાનો માર્ગ પ્રદાન કરે છે, ત્યારે જો કાળજીપૂર્વક અમલમાં ન આવે તો તે સંભવિત સુરક્ષા જોખમો પણ રજૂ કરે છે. અહીં કેટલીક સામાન્ય નબળાઈઓ છે:

૧. ટાર્ગેટ ઓરિજિન મિસમેચ

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('Received message from untrusted origin:', event.origin);
    return;
  }

  processMessage(event.data);
});

૨. ડેટા ઇન્જેક્શન

પ્રાપ્ત ડેટા (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);
}

૩. મેન-ઇન-ધ-મિડલ (MITM) હુમલાઓ

જો કોમ્યુનિકેશન અસુરક્ષિત ચેનલ (HTTP) પર થાય છે, તો MITM હુમલાખોર સંદેશાને અટકાવી અને તેમાં ફેરફાર કરી શકે છે. સુરક્ષિત કોમ્યુનિકેશન માટે હંમેશા HTTPS નો ઉપયોગ કરો.

૪. ક્રોસ-સાઇટ રિક્વેસ્ટ ફોર્જરી (CSRF)

જો પ્રાપ્તકર્તા યોગ્ય માન્યતા વિના પ્રાપ્ત સંદેશના આધારે ક્રિયાઓ કરે છે, તો હુમલાખોર પ્રાપ્તકર્તાને અનિચ્છનીય ક્રિયાઓ કરવા માટે છેતરવા માટે સંદેશા બનાવટી કરી શકે છે. CSRF સુરક્ષા પદ્ધતિઓ લાગુ કરો, જેમ કે સંદેશમાં સિક્રેટ ટોકનનો સમાવેશ કરવો અને પ્રાપ્તકર્તાની બાજુએ તેની ચકાસણી કરવી.

૫. targetOrigin માં વાઇલ્ડકાર્ડનો ઉપયોગ કરવો

targetOrigin ને * પર સેટ કરવાથી કોઈપણ ઓરિજિનને સંદેશ પ્રાપ્ત કરવાની મંજૂરી મળે છે. આને ટાળવું જોઈએ સિવાય કે તે અત્યંત જરૂરી હોય, કારણ કે તે ઓરિજિન-આધારિત સુરક્ષાના હેતુને નિષ્ફળ બનાવે છે. જો તમારે * નો ઉપયોગ કરવો જ હોય, તો ખાતરી કરો કે તમે અન્ય મજબૂત સુરક્ષા પગલાં લાગુ કરો છો, જેમ કે મેસેજ ઓથેન્ટિકેશન કોડ્સ (MACs).

ઉદાહરણ (આ ટાળો):

otherWindow.postMessage(message, '*'); // '*' નો ઉપયોગ ટાળો સિવાય કે તે અત્યંત જરૂરી હોય

સુરક્ષા પેટર્ન અને શ્રેષ્ઠ પદ્ધતિઓ

postMessage સાથે સંકળાયેલા જોખમોને ઘટાડવા માટે, આ સુરક્ષા પેટર્ન અને શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો:

૧. સખત ઓરિજિન માન્યતા

પ્રાપ્તકર્તાની બાજુએ હંમેશા event.origin પ્રોપર્ટીને માન્ય કરો. તેની તુલના વિશ્વસનીય ઓરિજિન્સની પૂર્વવ્યાખ્યાયિત સૂચિ સાથે કરો. સરખામણી માટે સખત સમાનતા (===) નો ઉપયોગ કરો.

૨. ડેટા સેનિટાઇઝેશન અને માન્યતા

postMessage દ્વારા પ્રાપ્ત તમામ ડેટાનો ઉપયોગ કરતા પહેલા તેને સેનિટાઇઝ અને માન્ય કરો. ડેટાનો ઉપયોગ કેવી રીતે કરવામાં આવશે તેના આધારે યોગ્ય સેનિટાઇઝેશન તકનીકોનો ઉપયોગ કરો (દા.ત., HTML એસ્કેપિંગ, URL એન્કોડિંગ, ઇનપુટ માન્યતા). HTML ને સેનિટાઇઝ કરવા માટે DOMPurify જેવી લાઇબ્રેરીઓનો ઉપયોગ કરો.

૩. મેસેજ ઓથેન્ટિકેશન કોડ્સ (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('Received message from untrusted origin:', 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('Message is authentic!');
    processMessage(message); // સંદેશની પ્રક્રિયા સાથે આગળ વધો
  } else {
    console.error('Message signature verification failed!');
  }
}

મહત્વપૂર્ણ: શેર્ડ સિક્રેટ કી સુરક્ષિત રીતે જનરેટ અને સંગ્રહિત થવી જોઈએ. કોડમાં કી ને હાર્ડકોડ કરવાનું ટાળો.

૪. નોન્સ (Nonce) અને ટાઇમસ્ટેમ્પનો ઉપયોગ કરવો

રિપ્લે હુમલાઓ અટકાવવા માટે, સંદેશમાં એક અનન્ય નોન્સ (એકવાર વપરાયેલ નંબર) અને ટાઇમસ્ટેમ્પ શામેલ કરો. પ્રાપ્તકર્તા પછી ચકાસી શકે છે કે નોન્સનો પહેલાં ઉપયોગ થયો નથી અને ટાઇમસ્ટેમ્પ સ્વીકાર્ય સમયમર્યાદામાં છે. આ હુમલાખોર દ્વારા અગાઉ અટકાવવામાં આવેલા સંદેશાને ફરીથી ચલાવવાના જોખમને ઘટાડે છે.

૫. લઘુત્તમ વિશેષાધિકારનો સિદ્ધાંત

અન્ય વિન્ડોને ફક્ત ન્યૂનતમ જરૂરી વિશેષાધિકારો આપો. ઉદાહરણ તરીકે, જો અન્ય વિન્ડોને ફક્ત ડેટા વાંચવાની જરૂર હોય, તો તેને ડેટા લખવાની મંજૂરી આપશો નહીં. તમારી કોમ્યુનિકેશન પ્રોટોકોલને લઘુત્તમ વિશેષાધિકારના સિદ્ધાંતને ધ્યાનમાં રાખીને ડિઝાઇન કરો.

૬. કન્ટેન્ટ સિક્યુરિટી પોલિસી (CSP)

સ્ક્રિપ્ટ કયા સ્રોતોમાંથી લોડ થઈ શકે છે અને સ્ક્રિપ્ટ કઈ ક્રિયાઓ કરી શકે છે તેને પ્રતિબંધિત કરવા માટે કન્ટેન્ટ સિક્યુરિટી પોલિસી (CSP) નો ઉપયોગ કરો. આ postMessage ડેટાના અયોગ્ય હેન્ડલિંગથી ઉદ્ભવી શકે તેવી XSS નબળાઈઓની અસરને ઘટાડવામાં મદદ કરી શકે છે.

૭. ઇનપુટ માન્યતા

પ્રાપ્ત ડેટાની રચના અને ફોર્મેટને હંમેશા માન્ય કરો. એક સ્પષ્ટ મેસેજ ફોર્મેટ વ્યાખ્યાયિત કરો અને ખાતરી કરો કે પ્રાપ્ત ડેટા આ ફોર્મેટને અનુરૂપ છે. આ અનપેક્ષિત વર્તન અને નબળાઈઓને રોકવામાં મદદ કરે છે.

૮. સુરક્ષિત ડેટા સિરિયલાઇઝેશન

સંદેશાને સિરિયલાઇઝ અને ડિસિરિયલાઇઝ કરવા માટે સુરક્ષિત ડેટા સિરિયલાઇઝેશન ફોર્મેટ, જેમ કે JSON, નો ઉપયોગ કરો. એવા ફોર્મેટ્સનો ઉપયોગ ટાળો જે કોડ એક્ઝેક્યુશનને મંજૂરી આપે છે, જેમ કે eval() અથવા Function().

૯. સંદેશના કદને મર્યાદિત કરો

postMessage દ્વારા મોકલવામાં આવતા સંદેશાઓના કદને મર્યાદિત કરો. મોટા સંદેશાઓ વધુ પડતા સંસાધનોનો વપરાશ કરી શકે છે અને સંભવિતપણે ડિનાયલ-ઓફ-સર્વિસ હુમલાઓ તરફ દોરી શકે છે.

૧૦. નિયમિત સુરક્ષા ઓડિટ

તમારા કોડમાં સંભવિત નબળાઈઓને ઓળખવા અને તેને દૂર કરવા માટે નિયમિત સુરક્ષા ઓડિટ કરો. postMessage ના અમલીકરણ પર વિશેષ ધ્યાન આપો અને ખાતરી કરો કે બધી સુરક્ષા શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરવામાં આવે છે.

ઉદાહરણનું દૃશ્ય: એક Iframe અને તેના પેરેન્ટ વચ્ચે સુરક્ષિત કોમ્યુનિકેશન

એક દૃશ્યનો વિચાર કરો જ્યાં https://iframe.example.com પર હોસ્ટ કરેલ iframe ને https://parent.example.com પર હોસ્ટ કરેલ તેના પેરેન્ટ પેજ સાથે કોમ્યુનિકેટ કરવાની જરૂર છે. iframe ને પ્રોસેસિંગ માટે પેરેન્ટ પેજ પર યુઝર ડેટા મોકલવાની જરૂર છે.

Iframe (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):

// શેર્ડ સિક્રેટ કી (iframe ની કી સાથે મેળ ખાવી જોઈએ)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

window.addEventListener('message', async function(event) {
  if (event.origin !== 'https://iframe.example.com') {
    console.warn('Received message from untrusted origin:', 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('Message is authentic!');
    // યુઝર ડેટા પર પ્રક્રિયા કરો
    console.log('User data:', userData);
  } else {
    console.error('Message signature verification failed!');
  }
});

મહત્વપૂર્ણ નોંધો:

• YOUR_SECURE_SHARED_SECRET ને સુરક્ષિત રીતે જનરેટ કરેલી શેર્ડ સિક્રેટ કી સાથે બદલો.
• શેર્ડ સિક્રેટ કી iframe અને પેરેન્ટ પેજ બંનેમાં સમાન હોવી જોઈએ.
• આ ઉદાહરણ મેસેજ ઓથેન્ટિકેશન માટે HMAC-SHA256 નો ઉપયોગ કરે છે.

નિષ્કર્ષ

postMessage API વેબ એપ્લિકેશન્સમાં ક્રોસ-ઓરિજિન કોમ્યુનિકેશનને સક્ષમ કરવા માટે એક શક્તિશાળી સાધન છે. જોકે, સંભવિત સુરક્ષા જોખમોને સમજવું અને આ જોખમોને ઘટાડવા માટે યોગ્ય સુરક્ષા પેટર્નનો અમલ કરવો ખૂબ જ મહત્વપૂર્ણ છે. આ માર્ગદર્શિકામાં દર્શાવેલ સુરક્ષા પેટર્ન અને શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને, તમે મજબૂત અને સુરક્ષિત વેબ એપ્લિકેશન્સ બનાવવા માટે postMessage નો સુરક્ષિત રીતે ઉપયોગ કરી શકો છો.

હંમેશા સુરક્ષાને પ્રાથમિકતા આપવાનું યાદ રાખો અને વેબ ડેવલપમેન્ટ માટે નવીનતમ સુરક્ષા શ્રેષ્ઠ પદ્ધતિઓ સાથે અપ-ટુ-ડેટ રહો. તમારી એપ્લિકેશન્સ સંભવિત નબળાઈઓથી સુરક્ષિત છે તેની ખાતરી કરવા માટે નિયમિતપણે તમારા કોડ અને સુરક્ષા રૂપરેખાંકનોની સમીક્ષા કરો.