Tip: Μην χρησιμοποιείτε εξωτερικά αρχεία javascript

Συζητήσεις για το Ελληνικό Elxis CMS

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
webgift
Δημοσιεύσεις: 50
Εγγραφή: 25 Απρ 2012 23:49
Επικοινωνία:

Tip: Μην χρησιμοποιείτε εξωτερικά αρχεία javascript

Δημοσίευση από webgift » 04 Σεπ 2014 10:55

Πολλές ιστοσελίδες χρησιμοποιούν αρχεία javascript η πηγή των οποίων είναι κάποιο άλλο domain. Συνήθως αυτό γίνεται αντιγράφοντας έτοιμο κώδικα ενσωμάτωσης κάποιου script (jquery, slider, gallery, κλπ) που βρήκαμε στο internet. Αυτή η πρακτική μπορεί να οδηγήσει σε πολλά προβλήματα και κυρίως σε σοβαρά θέματα ασφαλείας τόσο για τον ιδιοκτήτη του ιστότοπου όσο και για τους επισκέπτες του. Σε αυτό το άρθρο θα αναδείξουμε τα προβλήματα που μπορούν να ανακύψουν από την χρήση εξωτερικών αρχείων js και το τι μπορούμε να κάνουμε εναλλακτικά ώστε να εξασφαλίσουμε μέγιστη αξιοπιστία και ασφάλεια.

Προβλήματα αξιοπιστίας

Ας υποθέσουμε πως έχουμε έναν image slider που χρησιμοποιεί jquery και χρησιμοποιούμε ένα εξωτερικό αρχείο javascript example.com/slider.js ώστε να δουλέψει ο slider στο site μας. Δείτε τι μπορεί να συμβεί και να δημιουργηθεί πρόβλημα στο site μας από το γεγονός και μόνο ότι πρόκειται για εξωτερικό αρχείο.

Το άλλο domain δεν είναι διαθέσιμο

Αν το domain από το οποίο τραβάμε το αρχείο js (example.com) είναι κάτω, ή για κάποιο λόγο μη προσβάσιμο (πχ προβλήματα routing του internet provider), τότε το script μας δεν θα δουλέψει γιατί δεν θα μπορεί να φορτωθεί το αρχείο js. Ενώ το site μας είναι μία χαρά και online το script δεν θα δουλέψει και ο slider θα κρεμάσει επειδή κάποιο άλλο, άσχετο, site είναι κάτω. Αυτό ισχύει και για την google, την microsoft, και όποιο άλλο site νομίζετε ότι είναι 100% διαθέσιμο αιωνίως.

Μείωση ταχύτητας

Ο περιηγητής μας κάνει περισσότερη ώρα να φορτώσει αρχεία από εξωτερικά site καθώς πρέπει να κάνει query τρίτο site πράγμα που προσθέτει καθυστέρηση στην φόρτωση των σελίδων μας. Μία σελίδα στο διαδίκτυο αποτελείται από πολλά αρχεία (εικόνες, πολυμέσα, javascript, κλπ). Για κάθε τέτοιο αρχείο ο browser κάνει ένα query για να το φορτώσει. Αν παρατηρήσετε τον περιηγητή σας (πχ Firefox) στο κάτω μέρος του θα δείτε ότι όταν επισκέπτεστε μία σελίδα σας δείχνει τα αρχεία που φορτώνει. Ενώ τα τοπικά αρχεία φορτώνονται γρήγορα, στα εξωτερικά αρχεία μένει συγκριτικά πιο πολύ ώρα. Αυτό ισχύει για οποιονδήποτε τύπο αρχείου, εικόνες, javascript, css, κ.α.

Το αρχείο δεν υπάρχει πια

Ο ιδιοκτήτης του example.com μπορεί ανά πάσα στιγμή να διαγράψει, μετονομάσει, ή μετακινήσει το αρχείο javascript στο οποίο έχετε σύνδεσμο. Μπορεί ακόμα και το ίδιο το example.com να κλείσει ως site. Ο slider σας θα πάψει να δουλεύει και θα πασχίζετε να καταλάβετε γιατί συμβαίνει αυτό. Στη δε περίπτωση που το άλλο domain κλείσει εντελώς άντε να βρείτε το αρχείο js που χρειάζεστε ώστε να συνεχίσει να δουλεύει ο slider σας.

Προβλήματα ασφάλειας

Και πάμε τώρα στα πιο σοβαρά. Ο ιδιοκτήτης του example.com μπορεί ανά πάσα στιγμή να αλλάξει τα περιεχόμενα του αρχείου js ή να προσθέσει κάτι επιπλέον στο αρχείο άσχετο με την λειτουργία του slider. Το ίδιο μπορεί να συμβεί από κάποιον τρίτο αν το example.com έχει πέσει θύμα hacking. Οι hackers δεν θέλουν να γίνονται αντιληπτοί, γι αυτό το πιθανότερο είναι να αφήσουν τον κώδικα του slider ως έχει, ώστε να συνεχίσει να δουλεύει στα site που τον χρησιμοποιούν, και να προσθέσουν κακόβουλο κώδικα στο τέλος του αρχείου. Κάτι τέτοιο είναι πολύ δύκολο να το αντιληφθείτε. Τι μπορεί να είναι αυτός ο πρόσθετος κακόβουλος κώδικας στο αρχείο js; Μπορούν εύκολα να σας κλέψουν τα cookies στα οποία αποθηκεύονται στοιχεία της σύνδεσής σας στον ιστότοπο. Ενημερωτικά το Elxis 4.2+ χρησιμοποιεί HTTP ONLY cookies πράγμα που σημαίνει ότι η javascript δεν έχει πρόσβαση στα cookies που δημιουργεί το Elxis. Οπότε τουλάχιστον στο Elxis 4.2+ είστε ασφαλείς από αυτό, όχι όμως σε παλαιότερες διανομές ή άλλα CMS/site.

Μπορούν επίσης να προσθέσουν ένα onclick event σε μία φόρμα σύνδεσης οπότε την στιγμή που πατάτε το κουμπί να συνδεθείτε να στέλνει τα στοιχεία σύνδεσης username και password μέσω ajax σε ένα email ή να τα καταγράφει σε ένα αρχείο. Σημειώστε πως ο hacker ΔΕΝ χρειάζεται να έχει πρόσβαση σε κανένα αρχείο στο site σας για να το κάνει αυτό. Από το αρχείο js που έχει στο site του μπορεί να κάνει τα πάντα.

Αν έχετε ηλεκτρονικό κατάστημα μπορεί να κλέψει στοιχεία πιστωτικών καρτών των πελατών σας και οποιοδήποτε άλλο στοιχείο πληκτρολογήσει ο πελάτης. Πρακτικά μέσω του αρχείου αυτού και με την χρήση AJAX το άτομο που έχει πρόσβαση στο εξωτερικό αρχείο JS μπορεί να αντιγράψει όλη την κίνηση και τις πληροφορίες που τον ενδιαφέρουν από το site σας κάπου αλλού.

Η λύση - Χρήση εσωτερικών συνδέσμων

Τρομάξατε; Ελπίζω ναι. Μην ανησυχείτε όμως, η λύση είναι πολύ απλή. Απλά αντιγράψτε το εξωτερικό αρχείο JS κάπου στο site σας και αλλάξτε στον κώδικα ενσωμάτωσης του script σας (πχ του slider) τον σύνδεσμο προς το εξωτερικό αρχείο js (example.com/slider.js) στην διαδρομή που αντιστοιχεί στο σημείο που το βάλατε στο site σας (my-own-site.com/something/slider.js). Αυτό είναι όλο!


Πηγή άρθρου: elxis.org
Κατεβάστε δωρεάν σήμερα το Elxis.org

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Tip: Μην χρησιμοποιείτε εξωτερικά αρχεία javascript

Δημοσίευση από alou » 04 Σεπ 2014 12:50

Αν και όσα γράφονται είναι ένας σωστός αρχικός προβληματισμός για ενσωμάτωση αρχείων από CDN, διαφωνώ 100% με τον τίτλο και την προτροπή να μη χρησιμοποιείται γενικά cdn ειδικά για javascript, που οποιοδήποτε πρόβλημα αντιμετωπίζεται προγραμματιστικά. Πιθανώς να το σκεφτόμουν περισσότερο για CSS.

Όλα τα παραπάνω θέματα, αν τα έχει κάποιος υπόψιν, αντιμετωπίζονται 100%.

Προβλήματα αξιοπιστίας / μη διαθέσιμο domain:
Προφανώς κανένας server ή domain που χρησιμοποιούμε δεν είναι πιο αξιόπιστο από π.χ. google cdn, οπότε απλά προσέχουμε από που ζητάμε τα αρχεία. Οι έμπιστες και αξιόπιστες εναλλακτικές είναι πάρα πολλές και απλά θα θυμίσω και το
http://www.freestuff.gr/forums//viewtop ... highlight=
που είναι και "δικός μας" άνθρωπος.

Μείωση ταχύτητας:
Καμμία σχέση. Με προϋπόθεση το παραπάνω, μόνο κέρδος έχουμε σε όλα και ειδικά στην περίπτωση cached content, πολύ μεγάλο κέρδος.

Το αρχείο δεν υπάρχει πια:
Ισχύει το 1ο, δεν έχω αντιμετωπίσει ποτέ τέτοιο πρόβλημα από έγκυρο cdn.

Ασφάλεια:
Αν έχουν χακάρει το google, μεγειά τους με χαρά τους...

Για οποιοδήποτε πρόβλημα όμως και να αντιμετωπίσει κάποιος, ισχύουν οι λύσεις τοπικής ενσωμάτωσης ΑΛΛΑ ως FALLBACK. Παράδειγμα, αν θέλουμε να ενσωματώσουμε το jQuery και το google ξέχασε να πληρώσει τον server και δεν είναι διαθέσιμο το CDN, απλά τσεκάρουμε:

Κώδικας: Επιλογή όλων

<script src="//ajax.googleapis.com/ajax/libs/jquery/x.y.z/jquery.min.js"></script>
<script>window.jQuery || document.write&#40;'<script src="/path-to-local-js/jquery-x.y.z.min.js"><\/script>'&#41;</script>
δηλαδή αν δεν υπάρχει το jquery object το προσθέτουμε ως fallback λύση από τοπικό αρχείο. Το ίδιο μπορεί να γίνει και με οποιοδήποτε plugin, πχ αν θέλουμε να χρησιμοποιήσουμε το someGallery plugin

Κώδικας: Επιλογή όλων

if &#40;typeof $.someGallery === 'undefined'&#41; &#123;
        document.write&#40;'<script src="path-to-local-js/someGallery.js"><\/script>'&#41;;
&#125;
Γνώμες υπάρχουν όσες και ο καθένας μας αλλά νομίζω καλό θα ήταν να μη δίνουμε συμβουλές που είναι εντελώς αντίθετες από αυτά που γενικώς θεωρούνται best practices, εκτός φυσικά αν υπάρχει κάποια διαφωνία στα επιχειρήματα, οπότε το συζητάμε.

Άβαταρ μέλους
webgift
Δημοσιεύσεις: 50
Εγγραφή: 25 Απρ 2012 23:49
Επικοινωνία:

Tip: Μην χρησιμοποιείτε εξωτερικά αρχεία javascript

Δημοσίευση από webgift » 04 Σεπ 2014 14:54

Ο καθένας πράττει όπως κρίνει. Το εν λόγω θέμα δημιουργήθηκε σε συγκεκριμένη περιοχή του φόρουμ θέλοντας να δείξω ότι είναι άποψη κοινότητας. Σαφώς δεν υπάρχει κανένα πρόβλημα περαιτέρω συζήτησης.

Τώρα προφανώς σκέψεις του στυλ: "Αν έχουν χακάρει το google, μεγειά τους με χαρά τους..." δεν υιοθετούνται οπότε και δεν νομίζω να βρούμε κάποιο σημείο επαφής.

Anyway:

- Γιατί να μην κάνεις Cache οτιδήποτε χρειάζεσαι και να έχεις 100% εξουσία στην ιστοσελίδα σου παρά να εξαρτάσαι από εξωτερικές πηγές (τι έχουν κάνει και τι όχι);

- Τι γίνεται στην περίπτωση 'μείωση ταχύτητας' όταν και εσύ και η εξωτερική πηγή έχετε cached content, minified files κτλ; Η εξωτερική πηγή θα φορτώνει το αρχείο πιο γρήγορα; Θεωρητικά και ναι αλλά και όχι μιας και εμπλέκεται θέμα Server και όχι μόνο.

- Γιατί να κάνεις, κάθε φορά που το document φορτώνει, έλεγχο αν υπάρχει η εξωτερική πηγή σου παρά να την φορτώνεις απευθείας από εσένα; Ελέγχεις αν υπάρχει το αρχείο άλλα χάνεις χρόνο (Performance) οπότε μειωμένο page load.

Εδώ πάμε να διασφαλίσουμε ότι η ιστοσελίδα μας είτε θα δουλεύει όπως την φτιάξαμε είτε δεν θα δουλεύει. Σαφώς τίποτε δεν είναι αξιόπιστο στο διαδίκτυο γιατί όμως να μην πούμε στο τέλος ότι προσπαθήσαμε προς την ορθή κατεύθυνση;

Απάντηση

Επιστροφή στο “Elxis CMS”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης