ಕ್ರಾಸ್-ಒರಿಜಿನ್ ಸಂವಹನ: ಪೋಸ್ಟ್ ಮೆಸೇಜ್ API ಜೊತೆಗಿನ ಭದ್ರತಾ ಮಾದರಿಗಳು

ಆಧುನಿಕ ವೆಬ್‌ನಲ್ಲಿ, ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಆಗಾಗ್ಗೆ ವಿವಿಧ ಒರಿಜಿನ್‌ಗಳಿಂದ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬೇಕಾಗುತ್ತದೆ. ಸೇಮ್-ಒರಿಜಿನ್ ಪಾಲಿಸಿ (SOP) ಒಂದು ನಿರ್ಣಾಯಕ ಭದ್ರತಾ ಕಾರ್ಯವಿಧಾನವಾಗಿದ್ದು, ಇದು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಬೇರೆ ಒರಿಜಿನ್‌ನಿಂದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಕ್ರಾಸ್-ಒರಿಜಿನ್ ಸಂವಹನವು ಅಗತ್ಯವಿರುವ ನ್ಯಾಯಸಮ್ಮತ ಸನ್ನಿವೇಶಗಳಿವೆ. postMessage API ಇದನ್ನು ಸಾಧಿಸಲು ನಿಯಂತ್ರಿತ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಅದರ ಸಂಭಾವ್ಯ ಭದ್ರತಾ ಅಪಾಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಸೂಕ್ತವಾದ ಭದ್ರತಾ ಮಾದರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ.

ಸೇಮ್-ಒರಿಜಿನ್ ಪಾಲಿಸಿ (SOP) ಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಸೇಮ್-ಒರಿಜಿನ್ ಪಾಲಿಸಿಯು ವೆಬ್ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಭದ್ರತಾ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ. ಇದು ವೆಬ್ ಪುಟವನ್ನು ಪೂರೈಸಿದ ಡೊಮೇನ್‌ಗಿಂತ ಬೇರೆ ಡೊಮೇನ್‌ಗೆ ವಿನಂತಿಗಳನ್ನು ಮಾಡುವುದರಿಂದ ವೆಬ್ ಪುಟಗಳನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ಒಂದು ಒರಿಜಿನ್ ಅನ್ನು ಸ್ಕೀಮ್ (ಪ್ರೋಟೋಕಾಲ್), ಹೋಸ್ಟ್ (ಡೊಮೇನ್), ಮತ್ತು ಪೋರ್ಟ್‌ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಇವುಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಭಿನ್ನವಾಗಿದ್ದರೆ, ಒರಿಜಿನ್‌ಗಳನ್ನು ವಿಭಿನ್ನವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

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

ಇವೆಲ್ಲವೂ ವಿಭಿನ್ನ ಒರಿಜಿನ್‌ಗಳಾಗಿವೆ, ಮತ್ತು SOP ಅವುಗಳ ನಡುವೆ ನೇರ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರವೇಶವನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ.

ಪೋಸ್ಟ್ ಮೆಸೇಜ್ API ಪರಿಚಯ

postMessage API ಕ್ರಾಸ್-ಒರಿಜಿನ್ ಸಂವಹನಕ್ಕೆ ಸುರಕ್ಷಿತ ಮತ್ತು ನಿಯಂತ್ರಿತ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ ತಮ್ಮ ಒರಿಜಿನ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ಇತರ ವಿಂಡೋಗಳಿಗೆ (ಉದಾ. ಐಫ್ರೇಮ್‌ಗಳು, ಹೊಸ ವಿಂಡೋಗಳು, ಅಥವಾ ಟ್ಯಾಬ್‌ಗಳು) ಸಂದೇಶಗಳನ್ನು ಕಳುಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಸ್ವೀಕರಿಸುವ ವಿಂಡೋ ನಂತರ ಈ ಸಂದೇಶಗಳಿಗಾಗಿ ಕಾಯಬಹುದು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದು.

ಸಂದೇಶವನ್ನು ಕಳುಹಿಸಲು ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೀಗಿದೆ:

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 ನಿರ್ಬಂಧಗಳನ್ನು ತಪ್ಪಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಅದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಅಳವಡಿಸದಿದ್ದರೆ ಸಂಭಾವ್ಯ ಭದ್ರತಾ ಅಪಾಯಗಳನ್ನು ಸಹ ಪರಿಚಯಿಸುತ್ತದೆ. ಕೆಲವು ಸಾಮಾನ್ಯ ದುರ್ಬಲತೆಗಳು ಇಲ್ಲಿವೆ:

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. ಕನಿಷ್ಠ ಸವಲತ್ತುಗಳ ತತ್ವ

ಇನ್ನೊಂದು ವಿಂಡೋಗೆ ಕನಿಷ್ಠ ಅಗತ್ಯ ಸವಲತ್ತುಗಳನ್ನು ಮಾತ್ರ ನೀಡಿ. ಉದಾಹರಣೆಗೆ, ಇನ್ನೊಂದು ವಿಂಡೋಗೆ ಕೇವಲ ಡೇಟಾವನ್ನು ಓದುವ ಅಗತ್ಯವಿದ್ದರೆ, ಅದಕ್ಕೆ ಡೇಟಾವನ್ನು ಬರೆಯಲು ಅನುಮತಿಸಬೇಡಿ. ಕನಿಷ್ಠ ಸವಲತ್ತುಗಳ ತತ್ವವನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು ನಿಮ್ಮ ಸಂವಹನ ಪ್ರೋಟೋಕಾಲ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ.

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 API ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಕ್ರಾಸ್-ಒರಿಜಿನ್ ಸಂವಹನವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಸಂಭಾವ್ಯ ಭದ್ರತಾ ಅಪಾಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಈ ಅಪಾಯಗಳನ್ನು ತಗ್ಗಿಸಲು ಸೂಕ್ತವಾದ ಭದ್ರತಾ ಮಾದರಿಗಳನ್ನು ಅಳವಡಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಭದ್ರತಾ ಮಾದರಿಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ದೃಢವಾದ ಮತ್ತು ಸುರಕ್ಷಿತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನೀವು postMessage ಅನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಬಳಸಬಹುದು.

ಯಾವಾಗಲೂ ಭದ್ರತೆಗೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ ಮತ್ತು ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಇತ್ತೀಚಿನ ಭದ್ರತಾ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳೊಂದಿಗೆ ನವೀಕೃತವಾಗಿರಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಂಭಾವ್ಯ ದುರ್ಬಲತೆಗಳಿಂದ ರಕ್ಷಿಸಲ್ಪಟ್ಟಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಕೋಡ್ ಮತ್ತು ಭದ್ರತಾ ಸಂರಚನೆಗಳನ್ನು ನಿಯಮಿತವಾಗಿ ಪರಿಶೀಲಿಸಿ.