Hướng dẫn django pass variable to javascript file - django chuyển biến vào tệp javascript

You want to pass your data from your Django view to JavaScript, in your template. And, you want to do it securely, with no risk of accidentally allowing malicious code injection. Great, this is the post for you!

Chúng tôi sẽ xem xét các vấn đề với JavaScript tạo khuôn mẫu, sau đó là hai kỹ thuật:

• Thuộc tính dữ liệu cho các giá trị đơn giản

• 
     var my_var = '{{ python_object|escapejs }}';
  
  

  8 cho các giá trị phức tạp

Và cuối cùng, một số lựa chọn khác mà tôi không đề xuất.

Đi nào!

CẬP NHẬT [2022-10-21] Kênh YouTube Bugbytes có video dựa trên bài đăng này, thể hiện hai kỹ thuật được phê duyệt. The BugBytes Youtube channel has a video based on this post, demonstrating the two approved techniques.

Templating javascript don don làm việc

Nhiều nhà phát triển thử trực tiếp các thẻ nội tuyến

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

{# DON’T DO THIS #}

    const username = "{{ username }}";

Tôi khuyên bạn không bao giờ làm điều này!never do this!

Điều này nói chung không hoạt động, vì Django thực hiện HTML-ESCAPING trên giá trị. Ví dụ: nếu

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

my_cool_js_function[some_param]{
    // do some cool stuff
}

Điều này có nghĩa là hiển thị tên người dùng không chính xác.

Ngoài ra, nó cực kỳ nguy hiểm nếu bạn mẫu các biến không chuỗi hoặc sử dụng các mẫu JavaScript [các chuỗi F F sử dụng BackTicks]. Ví dụ: lấy mẫu này:

my_cool_js_function[some_param]{
    // do some cool stuff
}

Một giá trị độc hại có thể sử dụng backtick để kết thúc theo nghĩa đen, sau đó thêm JavaScript tùy ý. Ví dụ: nếu

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

my_cool_js_function[some_param]{
    // do some cool stuff
}

Sau đó, HTML sẽ là:

my_cool_js_function[some_param]{
    // do some cool stuff
}

Mã này xác định

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

Hệ thống mẫu Django chỉ thoát HTML. Nó không được thiết kế để thoát các giá trị bên trong JavaScript, có cú pháp rộng hơn.

Trong khi khuôn mẫu JavaScript hoạt động trong các tình huống hạn chế, vì nó không an toàn, tôi khuyên bạn nên không bao giờ làm điều đó. Nó rất khó để duy trì các biến betwee tách biệt luôn chứa các ký tự an toàn và những biến số mà don. Ngoài ra, chỉ có một số thẻ và bộ lọc nhất định là an toàn. Trong thời gian, cuối cùng bạn sẽ giới thiệu các lỗ hổng bảo mật.never do it. It’s too hard to maintain a separation betwee variables that always contain safe characters, and those which don’t. Also, only certain tags and filters are safe. In time, you’ll eventually introduce security holes.

Thay vào đó, sử dụng một trong hai kỹ thuật sau đây.

Sử dụng các thuộc tính dữ liệu cho các giá trị đơn giản

Để chuyển các giá trị đơn giản cho JavaScript của bạn, nó rất thuận tiện khi sử dụng các thuộc tính dữ liệu:

my_cool_js_function[some_param]{
    // do some cool stuff
}

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

Các tập tin tập lệnh riêng biệt

Bạn cũng có thể sử dụng

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

my_cool_js_function[some_param]{
    // do some cool stuff
}

… Đọc giống nhau:

my_cool_js_function[some_param]{
    // do some cool stuff
}

Simples!

Tôi khuyên bạn nên sử dụng các tệp tập lệnh riêng biệt càng nhiều càng tốt. Họ tốt hơn cho hiệu suất vì trình duyệt có thể lưu trữ mã. Ngoài ra, bạn có thể thiết lập Chính sách bảo mật nội dung [CSP] để không cho phép các thẻ tập lệnh nội tuyến, điều này ngăn chặn XSS Attacks, xem bài đăng tiêu đề bảo mật của tôi.]

Chuyển đổi trường hợp

Tài sản

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

var my_var_parsed = jQuery.parseJSON[my_var];

my_cool_js_function[some_param]{
    // do some cool stuff
}

Bạn có thể đọc nó trong JavaScript là

var my_var_parsed = jQuery.parseJSON[my_var];

my_cool_js_function[some_param]{
    // do some cool stuff
}

HTML kebab trở thành lạc đà javascript.

Các loại không chuỗi

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

my_cool_js_function[some_param]{
    // do some cool stuff
}

Bạn có thể muốn

var my_var_parsed = jQuery.parseJSON[my_var];

// some html code

my_cool_js_function[{{param}}]

Right-o.

Không có giới hạn

A

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

// some html code

my_cool_js_function[{{param}}]

Nhưng đến một lúc nào đó, điều này có thể cảm thấy khá khó sử dụng. Ngoài ra, nó không thuận tiện để vượt qua các loại phức tạp như dicts hoặc danh sách trong các thuộc tính. Điều đó dẫn chúng ta đến cửa số hai!

Sử dụng

   var my_var = '{{ python_object|escapejs }}';

8 cho các giá trị phức tạp

Nếu bạn cần chuyển một dict hoặc danh sách cho JavaScript, hãy sử dụng bộ lọc Django từ ____38. Ví dụ, hãy tưởng tượng quan điểm của bạn đã vượt qua biến này trong bối cảnh:

// some html code

my_cool_js_function[{{param}}]

Bạn có thể chuyển biến này cho bộ lọc

   var my_var = '{{ python_object|escapejs }}';

// some html code

my_cool_js_function[{{param}}]

Django sẽ hiển thị thẻ

{{ mydata|json_script:"mydata" }}

// some html code

my_cool_js_function[{{param}}]

Kịch bản sau đó có thể tìm dữ liệu

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

import jsonpickle

context['python_object'] = jsonpickle.encode[python_object]

{{ mydata|json_script:"mydata" }}

{{ mydata|json_script:"mydata" }}

// some html code

my_cool_js_function[{{param}}]

Sweet.

Django