ನನ್ನ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸದ್ದಿಲ್ಲದೆ ಮುರಿಯಬಹುದಾಗಿದ್ದ ಸೆಕ್ಯುರಿಟಿ ಫಿಕ್ಸ್

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

ಪರಿಚಯ

ಇತ್ತೀಚೆಗೆ, DEV Community ಯನ್ನು ಶಕ್ತಗೊಳಿಸುವ ಓಪನ್-ಸೋರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ Forem ಗೆ ಹೊಸ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸೇರಿಸಲಾಗಿದೆ. ಈ ವೈಶಿಷ್ಟ್ಯವು ಪಠ್ಯದಿಂದ ರೇಖಾಚಿತ್ರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಜನಪ್ರಿಯ ಸಾಧನವಾದ Mermaid ಅನ್ನು ಬಳಸಿಕೊಂಡು ರೇಖಾಚಿತ್ರಗಳನ್ನು ರಚಿಸಲು ಬಳಕೆದಾರರಿಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಈ ವೈಶಿಷ್ಟ್ಯದ ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ, ಅನಿರೀಕ್ಷಿತ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದಾದ ಭದ್ರತಾ ಎಚ್ಚರಿಕೆಯನ್ನು ಎತ್ತಲಾಯಿತು.

ಹೊಸ ವೈಶಿಷ್ಟ್ಯ

Mermaid ರೇಖಾಚಿತ್ರದ ಬೆಂಬಲ ಎಂದರೆ ಫೆನ್ಸ್‌ಡ್ (fenced) Mermaid ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳು ಈಗ ಕೇವಲ ಸರಳ ಪಠ್ಯದ ಬದಲಿಗೆ ನಿಜವಾದ ರೇಖಾಚಿತ್ರಗಳಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಸರಳವಾದ ಫ್ಲೋಚಾರ್ಟ್ ಅನ್ನು ನೇರವಾಗಿ ಪೋಸ್ಟ್‌ಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬಹುದು, ಸಂವಹನದ ದೃಶ್ಯ ಅಂಶವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಭದ್ರತಾ ಕಾಳಜಿ

ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಸಂಯೋಜಿಸುವಾಗ, ಇದರ ಬಳಕೆಯಿಂದಾಗಿ ಭದ್ರತಾ ಎಚ್ಚರಿಕೆಯು ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟಿತು innerHTML ಬಳಕೆದಾರ-ರಚಿತ ವಿಷಯವನ್ನು Document Object Model (DOM) ಗೆ ಸೇರಿಸಲು. ಈ ಅಭ್ಯಾಸವು Cross-Site Scripting (XSS) ನಂತಹ ದುರ್ಬಲತೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ಅಲ್ಲಿ ದಾಳಿಕೋರನು ಇತರ ಬಳಕೆದಾರರು ವೀಕ್ಷಿಸುವ ವೆಬ್ ಪುಟಗಳಿಗೆ ದುರುದ್ದೇಶಪೂರಿತ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಬಹುದು.

ಪ್ರಸ್ತಾವಿತ ಪರಿಹಾರ

ಈ ಭದ್ರತಾ ಕಾಳಜಿಯನ್ನು ಪರಿಹರಿಸಲು, ಶಿಫಾರಸು ಮಾಡಲಾದ ಪರಿಹಾರವೆಂದರೆ DOMPurify ಎಂಬ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ವಿಷಯವನ್ನು ಸ್ಯಾನಿಟೈಜ್ ಮಾಡುವುದು. ಈ ಲೈಬ್ರರಿಯು ಇನ್‌ಪುಟ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುವ ಮೊದಲು ಅದನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುವ ಮೂಲಕ XSS ದಾಳಿಗಳನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದ್ದೇಶಪೂರ್ವಕವಲ್ಲದ ಪರಿಣಾಮ

ಆದಾಗ್ಯೂ, ಈ ಪರಿಹಾರವನ್ನು ಅನ್ವಯಿಸುವುದು ಉದ್ದೇಶಪೂರ್ವಕವಲ್ಲದ ಪರಿಣಾಮವನ್ನು ಬೀರಿತು. ಇದು ಕೆಲವು ರೇಖಾಚಿತ್ರ ಪ್ರಕಾರಗಳಲ್ಲಿ ಲೇಬಲ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಕಾರಣವಾಯಿತು. ಈ ಸಮಸ್ಯೆಯು ಯಾವುದೇ ಕುಸಿತಗಳು ಅಥವಾ ಪರೀಕ್ಷೆಯ ವೈಫಲ್ಯಗಳಿಗೆ ಕಾರಣವಾಗಲಿಲ್ಲ, ಆದರೆ ರೇಖಾಚಿತ್ರಗಳನ್ನು ಪ್ರಮುಖ ಪಠ್ಯ ಅಂಶಗಳಿಲ್ಲದೆ ರೆಂಡರ್ ಮಾಡಲಾಗಿದೆ ಎಂದರ್ಥ, ಇದು ಅವುಗಳನ್ನು ಕಡಿಮೆ ಉಪಯುಕ್ತವಾಗಿಸಿತು.

ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆ

ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯು ಹಲವಾರು ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿತ್ತು:

ಹಂತ 1: ವೈಶಿಷ್ಟ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ

• Mermaid ರೇಖಾಚಿತ್ರದ ಬೆಂಬಲವನ್ನು Forem ಗೆ ಸಂಯೋಜಿಸಲಾಗಿದೆ.

ಹಂತ 2: ಭದ್ರತಾ ಎಚ್ಚರಿಕೆಯನ್ನು ಪರಿಹರಿಸಿ

• ಇದರ ಬಳಕೆಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಭದ್ರತಾ ಎಚ್ಚರಿಕೆಯನ್ನು ಎತ್ತಲಾಗಿದೆ innerHTML.
• DOMPurify ಬಳಸಿಕೊಂಡು ಇನ್‌ಪುಟ್ ಅನ್ನು ಸ್ಯಾನಿಟೈಜ್ ಮಾಡುವುದು ಪ್ರಸ್ತಾವಿತ ಪರಿಹಾರವಾಗಿತ್ತು.

ಹಂತ 3: ಪರಿಹಾರವನ್ನು ಪರೀಕ್ಷಿಸಿ

• ಪರಿಹಾರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿದ ನಂತರ, ಎಲ್ಲವೂ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸಲಾಯಿತು.
• ರೇಖಾಚಿತ್ರಗಳಿಂದ ಲೇಬಲ್‌ಗಳು ಕಾಣೆಯಾಗಿವೆ ಎಂದು ಕಂಡುಹಿಡಿಯಲಾಯಿತು, ಇದು ಗೊಂದಲಕ್ಕೆ ಕಾರಣವಾಯಿತು.

ಪ್ರಮುಖ ಟೇಕ್‌ಅವೇಗಳು

ಭದ್ರತಾ ಪರಿಹಾರಗಳನ್ನು ಅನ್ವಯಿಸುವಾಗ ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಯ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಈ ಪರಿಸ್ಥಿತಿ ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ. ಬದಲಾವಣೆಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕ್ರಿಯಾತ್ಮಕತೆಗೆ ಅಡ್ಡಿಯಾಗುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಇಲ್ಲಿ ಕಲಿತ ಕೆಲವು ಪಾಠಗಳಿವೆ:

1. ಸ್ಯಾನಿಟೈಸೇಶನ್ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ: ಸ್ಯಾನಿಟೈಜರ್ ಅನ್ನು ಸೇರಿಸುವುದರಿಂದ ಏನನ್ನು ರೆಂಡರ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಬದಲಾಯಿಸಬಹುದು, ಆದ್ದರಿಂದ ಅಂತಹ ಪರಿಹಾರಗಳನ್ನು ಅನ್ವಯಿಸಿದ ನಂತರ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವುದು ಮುಖ್ಯ.
2. ಸೈಲೆಂಟ್ ವೈಫಲ್ಯಗಳು ಸಮಸ್ಯಾತ್ಮಕವಾಗಿವೆ: ಸದ್ದಿಲ್ಲದೆ ವಿಫಲಗೊಳ್ಳುವ ಕಾನ್ಫಿಗರೇಶನ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ಇದು ಡೀಬಗ್ ಮಾಡುವಿಕೆಯನ್ನು ಇನ್ನಷ್ಟು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.
3. ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಭದ್ರತಾ ಪರಿಹಾರಗಳು ಆಕಸ್ಮಿಕವಾಗಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಮುರಿಯುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಅವುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.

ತೀರ್ಮಾನ

Forem ನಲ್ಲಿ Mermaid ರೇಖಾಚಿತ್ರ ಬೆಂಬಲದ ಏಕೀಕರಣವು ಉತ್ತಮ ಸೇರ್ಪಡೆಯಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಬಳಕೆದಾರರನ್ನು ರಕ್ಷಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದ್ದ ಭದ್ರತಾ ಪರಿಹಾರವು ಪರಿಹರಿಸಬೇಕಾದ ಆಧಾರವಾಗಿರುವ ಸಮಸ್ಯೆಗಳನ್ನು ಸಹ ಬಹಿರಂಗಪಡಿಸಿತು. ಈ ಅನುಭವವು ಸಾಫ್ಟ್‌ವೇರ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಭದ್ರತೆ ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕತೆಯ ನಡುವಿನ ಸೂಕ್ಷ್ಮ ಸಮತೋಲನದ ಜ್ಞಾಪನೆಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಗುಣಗಳು

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

ದೋಷಗಳು

• ರೇಖಾಚಿತ್ರಗಳಲ್ಲಿ ಕಾಣೆಯಾದ ಲೇಬಲ್‌ಗಳಂತಹ ಉದ್ದೇಶಪೂರ್ವಕವಲ್ಲದ ಪರಿಣಾಮಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಸೈಲೆಂಟ್ ವೈಫಲ್ಯಗಳು ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಕಷ್ಟಕರವಾಗಿಸುತ್ತವೆ.
• ಕ್ರಿಯಾತ್ಮಕತೆಯು ಹಾಗೆಯೇ ಉಳಿದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಯ ಅಗತ್ಯವಿದೆ.

ಎಚ್ಚರಿಕೆ

ಈ ಲೇಖನವು ಶೈಕ್ಷಣಿಕ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಉದ್ದೇಶಿಸಲಾಗಿದೆ. ಯಾವುದೇ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಮೌಲ್ಯಗಳನ್ನು ನೈಜ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ವಾಸ್ತವಿಕ ಡೇಟಾದೊಂದಿಗೆ ಬದಲಾಯಿಸಬೇಕು. ಓದುಗರು ಮೂಲ ಮೂಲದ ವಿರುದ್ಧ ಹಕ್ಕುಗಳನ್ನು ಅವಲಂಬಿಸುವ ಮೊದಲು ಪರಿಶೀಲಿಸಬೇಕು.

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

• DOMPurify ಎಂದರೇನು? — DOMPurify ಎಂಬುದು HTML ಅನ್ನು ಸ್ಯಾನಿಟೈಜ್ ಮಾಡಲು ಮತ್ತು XSS ದಾಳಿಗಳನ್ನು ತಡೆಯಲು ಬಳಸುವ ಲೈಬ್ರರಿಯಾಗಿದೆ.
• Cross-Site Scripting (XSS) ಎಂದರೇನು? — XSS ಎನ್ನುವುದು ಭದ್ರತಾ ದುರ್ಬಲತೆಯಾಗಿದ್ದು, ಇದು ದಾಳಿಕೋರರಿಗೆ ವೆಬ್ ಪುಟಗಳಿಗೆ ದುರುದ್ದೇಶಪೂರಿತ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.
• ರೇಖಾಚಿತ್ರಗಳಲ್ಲಿರುವ ಲೇಬಲ್‌ಗಳಿಗೆ ಏನಾಯಿತು? — ಭದ್ರತಾ ಪರಿಹಾರವು ದೋಷಗಳನ್ನು ಉಂಟುಮಾಡದೆ ಕೆಲವು ರೇಖಾಚಿತ್ರ ಪ್ರಕಾರಗಳಿಂದ ಲೇಬಲ್‌ಗಳನ್ನು ಅಜಾಗರೂಕತೆಯಿಂದ ತೆಗೆದುಹಾಕಿದೆ.
• ಭದ್ರತಾ ಪರಿಹಾರದ ನಂತರ ಪರೀಕ್ಷೆ ಏಕೆ ಮುಖ್ಯ? — ಭದ್ರತಾ ಬದಲಾವಣೆಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕ್ರಿಯಾತ್ಮಕತೆಗೆ ಅಡ್ಡಿಯಾಗುವುದಿಲ್ಲ ಎಂದು ಪರೀಕ್ಷೆಯು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• Mermaid ರೇಖಾಚಿತ್ರದ ಬೆಂಬಲ ಎಂದರೇನು? — ಇದು ಬಳಕೆದಾರರಿಗೆ Forem ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನಲ್ಲಿ ಪಠ್ಯದಿಂದ ನೇರವಾಗಿ ರೇಖಾಚಿತ್ರಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ರೆಂಡರ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.
• ಸ್ಯಾನಿಟೈಸೇಶನ್ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ? — ಸ್ಯಾನಿಟೈಸೇಶನ್ ಔಟ್‌ಪುಟ್‌ನಲ್ಲಿನ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದು ಅಥವಾ ಬದಲಾಯಿಸಬಹುದು, ಇದು ಕಾಣೆಯಾದ ವಿಷಯಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು.

ಟ್ಯಾಗ್‌ಗಳು

#security #javascript #webdev #opensource #DOMPurify #XSS #Mermaid #Forem #DEV #programming