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

• 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 #}
<script>
    const username = "{{ username }}";
script>

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 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

// 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 <4.1

Hình thức trên của

import jsonpickle

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

{{ mydata|json_script:"mydata" }}

// some html code

my_cool_js_function({{param}})

… Kết xuất như:

// some html code

my_cool_js_function({{param}})

JavaScript ở trên vẫn sẽ hoạt động, vì nó chỉ sử dụng cấu trúc DOM để tìm dữ liệu

import jsonpickle

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

Alrighty sau đó.

Với một id

Bạn cũng có thể chuyển ID cho

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)

import jsonpickle

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

// some html code

my_cool_js_function({{param}})

Django làm cho điều này như:

// some html code

my_cool_js_function({{param}})

Sau đó, bạn có thể sử dụng

import jsonpickle

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

{{ mydata|json_script:"mydata" }}

Đây là kỹ thuật được đề xuất trong tài liệu

Neat!

Các kỹ thuật không được khuyến khích khác

Dưới đây là một vài lựa chọn khác mà bạn đã thấy, mà tôi không đề xuất.

Sử dụng không an toàn bộ lọc 8

Bạn có thể đã thấy JavaScript được tạo ra sử dụng bộ lọc

const mydata = JSON.parse(document.getElementById('mydata').textContent);

Điều này mở ra kịch bản lên rộng để tấn công mặc dù. Hãy tưởng tượng

import jsonpickle

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

Sau đó, HTML được kết xuất sẽ là:

Trình duyệt phân tích cú pháp HTML mà không có bất kỳ nhận thức nào về cú pháp JavaScript, dẫn đến:

1. Một

   import jsonpickle
   
   context['python_object'] = jsonpickle.encode(python_object)
   

   0 đầu tiên, đóng cửa sau

   const mydata = JSON.parse(document.getElementById('mydata').textContent);
   

   4. Trình duyệt sẽ chạy JavaScript này, sẽ gặp sự cố với một lỗi về chuỗi chưa được giải thích.
2. Thẻ

   import jsonpickle
   
   context['python_object'] = jsonpickle.encode(python_object)
   

   0 được tiêm lần thứ hai, tải

   const mydata = JSON.parse(document.getElementById('mydata').textContent);
   

   6.
3. Một nút văn bản có nội dung

   const mydata = JSON.parse(document.getElementById('mydata').textContent);
   

   7

4. const mydata = JSON.parse(document.getElementById('mydata').textContent);
   

   8 cuối cùng bị bỏ qua, vì nó không phù hợp với

   import jsonpickle
   
   context['python_object'] = jsonpickle.encode(python_object)
   

   0.

Một lần nữa,

const mydata = JSON.parse(document.getElementById('mydata').textContent);

Vì vậy, sử dụng

Còn {# DON’T DO THIS #} 2 thì sao?

Có thể mẫu JavaScript với bộ lọc

{# DON’T DO THIS #}
<script>
    const username = "{{ username }}";
script>

Điều này có một số sự tinh tế mặc dù, như các tài liệu hiện đang nói:

Điều này không làm cho chuỗi an toàn để sử dụng trong các mẫu HTML hoặc JavaScript

.

Tuy nhiên, có một PR mở để cải thiện các tài liệu. Có vẻ như

{# DON’T DO THIS #}
<script>
    const username = "{{ username }}";
script>

Tuy nhiên, tôi khuyên bạn nên sử dụng các thuộc tính dữ liệu vì:

1. JavaScript khuôn mẫu vẫn không an toàn: bạn có thể sử dụng các thẻ hoặc bộ lọc khác mà không có rủi ro.

2. Thuộc tính dữ liệu hoạt động với cả tập lệnh nội tuyến và các tệp tập lệnh riêng biệt. Bạn không cần phải tái cấu trúc bất cứ điều gì nếu bạn chuyển từ tập lệnh nội tuyến sang một tệp riêng.

   (Và sử dụng các tệp tập lệnh riêng biệt là tốt cho các lý do khác, như đã lưu ý trước đây.)

3. Hiện tại, các tài liệu vẫn nói

   {# DON’T DO THIS #}
   <script>
       const username = "{{ username }}";
   script>
   

   2 không an toàn. Vẫn chưa được sự chấp thuận từ đội an ninh Django hoặc các nghiên cứu sinh.

Vây

Có thể dữ liệu của bạn luôn chuyển nhanh và an toàn cho JavaScript của bạn,

—Adam

Làm cho sự phát triển của bạn dễ chịu hơn với Boost Django DX của bạn.

Một email tóm tắt một tuần, không spam, tôi pinky hứa.

Bài viết liên quan:

• Cách thiết lập bản đồ nguồn với Django
• Cách thêm favicon vào trang web Django của bạn

Tags: Django django