Hướng dẫn how do i fix javascript script error? - làm cách nào để sửa lỗi tập lệnh javascript?

Biên tập viên Lưu ý: Bài viết này đã được cập nhật vào tháng 12 năm 2019 để được cập nhật hơn.

Lỗi tập lệnh của Nhật Bản là một trong những thông báo lỗi khó hiểu nhất mà bạn có thể gặp phải. Khiếu nại chính là nó không cung cấp thông tin về nguyên nhân thực tế của vấn đề. Tuy nhiên, bí mật này không phải là một lỗi, mà là một tính năng dự định bảo vệ trang web của bạn khỏi các cuộc tấn công độc hại.

Vui lòng tham khảo tài liệu kỹ thuật của Raygun liên quan đến lỗi tập lệnh để biết các bản sửa lỗi nhanh đến các nguyên nhân phổ biến nhất.

Lỗi tập lệnh là gì?

Lỗi tập lệnh xảy ra khi tập lệnh phía máy khách vi phạm chính sách đồng nghĩa của trình duyệt của người dùng bằng cách thực hiện yêu cầu HTTP có nguồn gốc chéo không hợp lệ.

Nếu bạn làm việc trên một trang web và báo cáo về sự cố Raygun được nối vào JavaScript phía máy khách của bạn, thì Lỗi tập lệnh có thể sẽ là một trong những điều đầu tiên bạn sẽ nhận thấy xuất hiện trong bảng điều khiển của mình.

đường dẫn nhanh

• Điều gì gây ra lỗi tập lệnh?
  
• Kịch bản dài là gì?
• Lỗi tập lệnh-Chính sách đồng nghĩa
• Kiểm soát chính sách đồng nghĩa
• Sử dụng một proxy web
• Các hành vi trình duyệt khác nhau về lỗi tập lệnh

Các lỗi tập lệnh hầu như có khả năng là do lỗi trong một tập lệnh mà Lừa lưu trữ trên một miền khác (ví dụ: tập lệnh CDN). Do đó, trình duyệt của người dùng ngăn chặn tập lệnh thực thi để ngăn chặn một cuộc tấn công gọi là giả mạo yêu cầu chéo. Tuy nhiên, nó cũng có thể là một vấn đề nếu tập lệnh được lưu trữ trên cùng một miền nhưng sử dụng một cổng, giao thức khác (ví dụ http:// thay vì https://) hoặc tên miền phụ.

Ví dụ: một lỗi trong tập lệnh trên miền khác có thể trông như thế này:

// File: https://another-domain.com/index.js
const a = {};
console.log(a.b.c);

Trong miền của bạn, gọi tập lệnh đó có thể trông như thế này. Kịch bản này sẽ mang lại một lỗi tập lệnh được gửi đến Raygun4JS.

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

Kịch bản dài là gì?

Lỗi tập lệnh-Chính sách đồng nghĩa

Kiểm soát chính sách đồng nghĩa

Sử dụng một proxy web

Các hành vi trình duyệt khác nhau về lỗi tập lệnh

Các lỗi tập lệnh hầu như có khả năng là do lỗi trong một tập lệnh mà Lừa lưu trữ trên một miền khác (ví dụ: tập lệnh CDN). Do đó, trình duyệt của người dùng ngăn chặn tập lệnh thực thi để ngăn chặn một cuộc tấn công gọi là giả mạo yêu cầu chéo. Tuy nhiên, nó cũng có thể là một vấn đề nếu tập lệnh được lưu trữ trên cùng một miền nhưng sử dụng một cổng, giao thức khác (ví dụ http:// thay vì https://) hoặc tên miền phụ.

Ví dụ: một lỗi trong tập lệnh trên miền khác có thể trông như thế này:

Trong miền của bạn, gọi tập lệnh đó có thể trông như thế này. Kịch bản này sẽ mang lại một lỗi tập lệnh được gửi đến Raygun4JS.

Bạn cũng có thể tìm thấy một lỗi tương tự như lỗi tập lệnh trong bảng điều khiển Raygun của mình, được gọi là tập lệnh chạy dài. Tên của họ tương tự nhau, nhưng chúng là những lỗi hoàn toàn khác nhau mà bạn cần xử lý khác nhau.

Kiểm soát chính sách đồng nghĩa

Sử dụng một proxy web

Các hành vi trình duyệt khác nhau về lỗi tập lệnh

Các lỗi tập lệnh hầu như có khả năng là do lỗi trong một tập lệnh mà Lừa lưu trữ trên một miền khác (ví dụ: tập lệnh CDN). Do đó, trình duyệt của người dùng ngăn chặn tập lệnh thực thi để ngăn chặn một cuộc tấn công gọi là giả mạo yêu cầu chéo. Tuy nhiên, nó cũng có thể là một vấn đề nếu tập lệnh được lưu trữ trên cùng một miền nhưng sử dụng một cổng, giao thức khác (ví dụ http:// thay vì https://) hoặc tên miền phụ.

Ví dụ: một lỗi trong tập lệnh trên miền khác có thể trông như thế này:

// File: origin-domain.com/index.html
<script crossorigin="anonymous" src="//another-domain.com/index.js"></script>

Không có thuộc tính

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

Khi bạn thêm thuộc tính

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

2. Trên miền của bên thứ ba

Bit dữ liệu quan trọng thứ hai là sự hiện diện của tiêu đề HTTP trên phản hồi từ miền của bên thứ ba chứa JavaScript. Cụ thể, tiêu đề

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

Access-Control-Allow-Origin: *

Lưỡi đại diện trong ví dụ này cho phép các yêu cầu chéo đến bất kỳ trang web nào. Điều này phù hợp cho một CDN trong đó tập lệnh có thể được yêu cầu bởi bất kỳ miền của bên thứ ba. Nếu đây là một máy chủ riêng cho một bộ tên miền đã biết, ví dụ, bạn có thể cung cấp danh sách đó thay cho ký tự đại diện::

Access-Control-Allow-Origin: http://origin-domain.com

Bạn cần thực hiện tiêu đề phản hồi

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

Ví dụ: đây là một ví dụ mã bạn có thể sử dụng trên máy chủ Apache. Bạn có thể thêm nó vào tệp

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

<FilesMatch "\.(js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Hoặc, nếu bạn không chỉ muốn thêm hỗ trợ CORS cho các tập lệnh nhưng các tài nguyên khác mà bạn có thể cần, chẳng hạn như phông chữ web và CSS, bạn có thể sử dụng mã sau thay vào đó: thay vào đó:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Chẳng hạn, ở đây, những gì tôi nhận được trong Chrome 66, mà không có máy chủ của bên thứ ba gửi tiêu đề HTTP thích hợp:

Sau khi thêm hỗ trợ CORS vào máy chủ, tiêu đề

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

Nếu bạn muốn thêm hỗ trợ CORS vào một nền tảng máy chủ khác, thì có một trang web tuyệt vời có tên là kích hoạt CORS mà bạn có thể thấy hữu ích. Nó chia sẻ các ví dụ và triển khai mã cho một số nền tảng khác nhau như IIS, Nginx, Tomcat và các nền tảng khác. Ngoài ra, các nhà cung cấp CDN lớn hơn như KEYCDN cũng thường có các trang hỗ trợ giải thích cách bạn có thể đặt các tiêu đề HTTP tùy chỉnh trên nền tảng của họ.

Sử dụng một proxy web

Sử dụng proxy web là một phương pháp thay thế bạn có thể sử dụng để giải quyết vấn đề. Nó có thể đặc biệt hữu ích nếu, vì một số lý do, bạn có thể sửa đổi tiêu đề HTTP được gửi bởi máy chủ của bên thứ ba. Bạn cần thiết lập một proxy trên máy chủ web của mình, sau đó thực hiện các yêu cầu AJAX của bạn, không phải là miền của bên thứ ba, mà là proxy Web được lưu trữ trên cùng một miền.

Máy chủ proxy chuyển tiếp yêu cầu đến máy chủ của bên thứ ba, tìm nạp tập lệnh và gửi lại cho trang web của bạn. Do đó, trình duyệt giải thích nó như một yêu cầu đồng nghĩa và cho phép mã frontend của bạn truy cập tập lệnh của bên thứ ba. Trên thực tế, proxy Web có chức năng như một trung gian cho các yêu cầu của bạn từ các máy chủ khác.

Có một số proxy CORS nguồn mở có sẵn trên web, chẳng hạn như Crossorigin.me hoặc CORS ở bất cứ đâu. Tuy nhiên, các dịch vụ này chỉ nên được sử dụng trong phát triển. Không bao giờ sử dụng proxy CORS mở trên trang web sản xuất, chúng không đáng tin cậy và có thể gây ra rủi ro bảo mật nghiêm trọng.

Các hành vi trình duyệt khác nhau về lỗi tập lệnh

Tùy thuộc vào trình duyệt mà người dùng của bạn đang chạy, các thuộc tính trên có thể có hoặc không có hiệu ứng. Điều này tổng hợp tình huống khi viết, liên quan đến hỗ trợ trình duyệt cho thuộc tính

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

• Chrome 30+
• Firefox 13+
  
• Opera 12.50+
• Safari (ít nhất là 6+)
  
• Cạnh 0.10+

Trong các trình duyệt này, nếu có thẻ

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

Firefox có một hành vi bổ sung cho các lỗi thời gian chạy. Chúng sẽ được cung cấp cho window.onerror, bất kể hai thuộc tính. Đây là một rủi ro bảo mật. Tuy nhiên, các lỗi cú pháp sẽ bị chặn trong cả trình duyệt Gecko và WebKit, nếu thuộc tính

// File: origin-domain.com/index.html
<script src="http://another-domain.com/index.js"></script>

trình duyệt web IE

Lỗi sẽ được báo cáo với tất cả dữ liệu có sẵn trong IE 10 trở xuống. Bây giờ được coi là một vấn đề bảo mật.

Internet Explorer 11+

Các lỗi của bên thứ ba đã giành được bất kỳ dữ liệu nào và các thuộc tính không được tôn trọng tại thời điểm viết.

Sẵn sàng để nổ tung lỗi kịch bản?

Báo cáo sự cố Raygun bề mặt lỗi tập lệnh của bạn cho bạn. Xem những gì tiếng vang là về và bắt đầu dùng thử 14 ngày miễn phí của bạn.