Nhiều trang web sử dụng các tệp javascript nằm ở một tên miền khác. Thông thường, điều này xảy ra khi chúng tôi sao chép-dán mã sẵn sàng sử dụng cho một tập lệnh [jquery, thanh trượt, thư viện, v.v.] mà chúng tôi tìm thấy trên internet. Thực tiễn này có thể dẫn đến nhiều vấn đề và đặc biệt là các vấn đề bảo mật nghiêm trọng cho cả quản trị viên trang web và khách truy cập. Trong bài viết này, chúng tôi sẽ đề cập đến các sự cố có thể phát sinh khi sử dụng các tệp js bên ngoài và những gì chúng tôi có thể làm để đạt được tính khả dụng và bảo mật tối đa
vấn đề sẵn có
Hãy xem xét chúng tôi có thanh trượt hình ảnh bằng cách sử dụng jquery và chúng tôi sử dụng ví dụ về tệp javascript bên ngoài. com/thanh trượt. js để thanh trượt hoạt động trong trang web của chúng tôi. Hãy xem những vấn đề nào có thể phát sinh đối với trang web của chúng tôi chỉ bởi thực tế đó là một tệp bên ngoài
Tên miền khác không khả dụng
Nếu tên miền chứa tệp [ví dụ. com] không hoạt động hoặc vì lý do nào đó không khả dụng [ví dụ: do sự cố định tuyến của nhà cung cấp internet], thì tập lệnh của chúng tôi sẽ không hoạt động vì tệp js bên ngoài sẽ không được tải. Ngay cả khi trang web của chúng tôi vẫn ổn và trực tuyến, tập lệnh sẽ không hoạt động và thanh trượt sẽ bị hỏng chỉ vì một số trang web khác, không liên quan, không hoạt động. Điều này hợp lệ cho google, microsoft và bất kỳ trang web nào khác mà bạn nghĩ sẽ trực tuyến mãi mãi
giảm tốc độ
Trình duyệt web mất nhiều thời gian hơn để tải tệp từ các trang bên ngoài vì nó truy vấn các trang thứ ba khiến trang tải chậm hơn. Một trang web bao gồm nhiều tệp [hình ảnh, video, javascript, v.v.]. Đối với mỗi tệp, trình duyệt đưa ra yêu cầu tới máy chủ web để tải tệp đó. Nếu bạn chú ý đến dòng dưới cùng của trình duyệt web [ví dụ: Firefox] khi bạn truy cập một trang, nó sẽ hiển thị cho bạn các tệp mà nó tải. Các tệp cục bộ được tải nhanh hơn các tệp bên ngoài. Điều này hợp lệ cho mọi loại tệp, hình ảnh, javascript, css, v.v.
Tập tin không còn tồn tại nữa
Chủ sở hữu ví dụ. com có thể xóa, đổi tên hoặc di chuyển tệp javascript mà bạn có liên kết bất kỳ lúc nào. toàn bộ ví dụ. com thậm chí có thể đóng hoàn toàn dưới dạng một trang web. Thanh trượt sẽ ngừng hoạt động và bạn sẽ phải vật lộn để hiểu tại sao điều này lại xảy ra. Trong trường hợp tên miền khác bị đóng, bạn sẽ gặp thêm sự cố khi tìm tệp js mà thanh trượt của bạn cần để hoạt động
Vấn đề an ninh
Bây giờ, những vấn đề nghiêm trọng nhất. Chủ sở hữu ví dụ. com bất cứ lúc nào cũng có thể thay đổi nội dung của tệp js hoặc thêm nội dung bổ sung vào tệp không liên quan đến chức năng của thanh trượt. Điều tương tự cũng có thể xảy ra với người thứ ba nếu ví dụ. com bị hack. Tin tặc không muốn bị chú ý và vì vậy rất có thể chúng sẽ để nguyên mã của thanh trượt - để các thanh trượt trên các trang web chúng sử dụng tiếp tục hoạt động - và thêm mã độc vào cuối tệp. Rất khó để nhận thấy một sự thay đổi như vậy. Mã độc bổ sung này trong tệp js có thể là gì? . Chỉ dành cho thông tin của bạn Elxis 4. 2+ sử dụng cookie CHỈ HTTP, điều đó có nghĩa là javascript không có quyền truy cập vào cookie do Elxis tạo. Vì vậy, ít nhất là cho Elxis 4. 2+ bạn an toàn trước mối đe dọa này, nhưng không an toàn cho các phiên bản cũ hơn hoặc các CMS/trang web khác
Họ thậm chí có thể thêm sự kiện title vào biểu mẫu đăng nhập để khi bạn nhấn nút gửi, tên người dùng và mật khẩu đăng nhập được gửi qua ajax tới e-mail hoặc được ghi vào tệp. Lưu ý rằng tin tặc không cần có quyền truy cập vào bất kỳ tệp nào trên trang web của bạn để thực hiện việc này. Anh ấy có thể làm mọi thứ từ tệp js mà anh ấy lưu trữ trên trang web của mình
Nếu bạn có một giỏ hàng, anh ta có thể đánh cắp thông tin chi tiết về thẻ tín dụng của khách hàng hoặc bất kỳ thông tin nào khác mà họ gửi trên trang web của bạn. Thông qua tệp js bên ngoài này và bằng cách sử dụng AJAX, người có quyền truy cập vào tệp có thể theo dõi các yêu cầu trên trang web của bạn và sao chép dữ liệu mà anh ta quan tâm ở một nơi khác
Giải pháp - Sử dụng liên kết nội bộ
Sợ hãi? . Nhưng đừng lo lắng, giải pháp rất đơn giản. Chỉ cần sao chép cục bộ tệp JS bên ngoài vào trang web của bạn và trong mã tích hợp của tập lệnh của bạn [ví dụ: thanh trượt], hãy thay đổi liên kết trỏ đến tệp bên ngoài [ví dụ. com/thanh trượt. js] vào đường dẫn của tệp cục bộ đã sao chép [my-own-site. com/cái gì đó/thanh trượt. js]. Đó là tất cả
Tải JavaScript bên ngoài giống như đợi cho đến khi thời gian chạy để biên dịch phần phụ thuộc bên ngoài. Rất nhiều có thể đi sai. Rất khó để thoát khỏi nhu cầu tải JavaScript bên ngoài trên nhiều ứng dụng web ngày nay. Nhiều trang web của chúng tôi cần tổng hợp chức năng từ mạng xã hội, bộ xử lý giao dịch, phân tích và mạng quảng cáo với nội dung của riêng chúng tôi. Nó ở mọi nơi
Hãy xem xét một ví dụ, giả sử bạn muốn sử dụng bộ xử lý thanh toán của bên thứ ba để bạn có thể lấy thẻ tín dụng. Họ yêu cầu bạn bao gồm tập lệnh của họ và sau đó bạn thực hiện cuộc gọi vào chức năng của họ. Có lẽ một cái gì đó như thế này
cashmoney.setMyKey["AwesomeApp"];
var $form = $["#checkout-form"];
$form.on["submit", function[] {
$form.token = cashmoney.card.getToken[];
}];
Bản saoĐủ đơn giản phải không? . Vậy vấn đề là gì?
ReferenceError: cashmoney is not defined.Bản sao
Sao có thể như thế được?. Có phải mọi người đang gây rối với chúng tôi? . Điều này có thể có tất cả các loại vấn đề tiềm ẩn đối với hành vi và bảo mật của trang, nhưng nó cũng có thể gây ra một số trải nghiệm người dùng thực sự tồi tệ
Chúng tôi đang tải cashmoney.js từ một máy chủ bên ngoài và rất nhiều lỗi có thể xảy ra giữa máy khách và máy chủ. Nhiều khách truy cập của bạn sẽ đến với bạn trên trình duyệt di động qua các kết nối mạng “kém lý tưởng”. Mạng di động là nguy hiểm. Rất nhiều điều có thể xảy ra giữa trình duyệt tải trang của bạn lúc đầu và thực hiện yêu cầu DNS đầu tiên tới cdn.cashmoney.com hoặc bắt đầu bắt tay SSL, giống như đi vào một đường hầm. Vì bất kỳ lý do gì, mạng của họ hoạt động tốt khi trình duyệt bắt đầu xây dựng trang, nhưng không thành công khi cố tải tài nguyên từ CashMoney. Nếu tài nguyên của họ không tải, thì cashmoney sẽ không bao giờ được xác định và bạn sẽ gặp khó khăn
Mặc dù điều này không phổ biến, nhưng tại TrackJS, chúng tôi thấy bằng chứng về điều này xảy ra trên hầu hết các trang web có lượng lớn người xem trên thiết bị di động. Nó có thể đã ảnh hưởng đến một số người dùng của bạn. Vậy chúng ta nên làm thế nào với nó đây?
// Make sure that cashmoney loaded successfully before we blindly reference it.
if [!window.cashmoney] {
// Show User UI that the order form is temporarily unavailable
// Probably log this so we know that it happened
trackJs.track["cashmoney failed to load for a visitor"];
return;
}
cashmoney.setMyKey["AwesomeApp"];
...
Bản saoKiểm tra đơn giản như thế này hoàn toàn giải quyết được loại vấn đề này. Chỉ cần đảm bảo API JavaScript đã được tải trước khi sử dụng. Giờ đây, bạn có cơ hội can thiệp và mang lại trải nghiệm người dùng tốt hơn nhiều cho khách hàng khi có sự cố xảy ra
Bất cứ khi nào bạn giới thiệu một miền bên ngoài, chẳng hạn như dịch vụ của bên thứ ba hoặc CDN, sự cố này có thể tự xuất hiện. Cẩn tắc vô ưu. Hãy xem cơ sở mã của bạn và đảm bảo rằng bạn đang kiểm tra an toàn cho mọi tập lệnh bên ngoài mà bạn có thể đang tải
Đây là một trong những lý do tại sao chúng tôi cung cấp thư viện TrackJS trên NPM. Bằng cách tham khảo tập lệnh và đưa tập lệnh đó vào thời gian xây dựng, bạn có thể yên tâm rằng tập lệnh sẽ được phân phối cùng với phần còn lại của ứng dụng web của bạn
Như bạn đã biết, rất nhiều lỗi có thể xảy ra khi chạy một ứng dụng web. Lỗi tải chỉ là một ví dụ. Bạn sẽ cần các công cụ vững chắc để giúp bạn hiểu khi nào sự cố xảy ra và cách khắc phục chúng nhanh chóng. Nếu bạn cần trợ giúp, hãy xem TrackJS với bản dùng thử 14 ngày miễn phí. Tôi hứa, nó có thể giúp làm cho ứng dụng của bạn trở nên tuyệt vời hơn nữa