HTMLScriptElement: thuộc tính src

Giá trị

Lấy thuộc tính trả về một chuỗi chứa URI tập lệnh của phần tử.

Đặt thuộc tính chấp nhận một đối tượng TrustedScriptURL hoặc một chuỗi.

Ngoại lệ

TypeError

Ném ra nếu thuộc tính được đặt bằng chuỗi khi Trusted Types được thực thi bởi CSP và không có chính sách mặc định nào được xác định. Ngoại lệ này cũng được ném nếu URL được tìm nạp không thể phân tích thành công theo kiểu đã chỉ định, chẳng hạn như module hoặc importmap.

Mô tả

Thuộc tính src biểu diễn URL của tập lệnh ngoài. Nếu được đặt, các tập lệnh được cung cấp qua các thuộc tính văn bản text, textContent, hoặc innerText, sẽ bị bỏ qua.

Các cân nhắc về bảo mật

Thuộc tính src được dùng để tải và chạy các tập lệnh ngoài. Tập lệnh được tìm nạp chạy trong ngữ cảnh của trang hiện tại, và do đó có thể làm bất cứ điều gì mà mã của trang web của bạn có thể làm (ngay cả khi URL không cùng origin với trang của bạn). Nếu đầu vào được cung cấp bởi người dùng, đây là vector có thể dẫn đến tấn công cross-site scripting (XSS).

Việc chấp nhận và thực thi các URL tùy ý từ các nguồn không đáng tin là cực kỳ rủi ro. Một trang web nên kiểm soát những tập lệnh nào được phép chạy bằng cách sử dụng Content Security Policy (CSP) với chỉ thị script-src (hoặc một dự phòng được xác định trong default-src). Điều này có thể hạn chế các tập lệnh với các tập lệnh từ origin hiện tại, hoặc một tập hợp cụ thể các origin, hoặc thậm chí các tệp cụ thể.

Nếu bạn đang sử dụng thuộc tính này và thực thi trusted types (sử dụng chỉ thị require-trusted-types-for CSP), bạn sẽ cần luôn gán các đối tượng TrustedScriptURL thay vì chuỗi. Điều này đảm bảo rằng đầu vào được truyền qua hàm chuyển đổi, có cơ hội từ chối hoặc sửa đổi URL trước khi nó được chèn vào.

Ngay cả khi tài nguyên được trang web của bạn tin tưởng, nó vẫn có thể bị xâm phạm trong cuộc tấn công chuỗi cung ứng. Để giảm thiểu loại tấn công này, bạn nên sử dụng tính năng subresource integrity.

Ví dụ

Sử dụng TrustedScriptURL

Để giảm thiểu rủi ro XSS, chúng ta nên luôn gán các thể hiện TrustedScriptURL cho thuộc tính src. Chúng ta cũng cần làm điều này nếu chúng ta đang thực thi trusted types vì những lý do khác và muốn cho phép một số nguồn tập lệnh đã được phép (bởi CSP: script-src).

Trusted types chưa được hỗ trợ trên tất cả trình duyệt, vì vậy trước tiên chúng ta định nghĩa trusted types tinyfill. Điều này hoạt động như một thay thế minh bạch cho Trusted Types JavaScript API:

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Tiếp theo chúng ta tạo TrustedTypePolicy xác định phương thức createScriptURL() để chuyển đổi chuỗi đầu vào thành các thể hiện TrustedScriptURL.

Với mục đích của ví dụ này, chúng ta sẽ giả định rằng chúng ta muốn cho phép một tập hợp URL được xác định trước trong mảng scriptAllowList và ghi lại bất kỳ tập lệnh nào khác.

const scriptAllowList = [
  // Một số danh sách URL được phép
];
const policy = trustedTypes.createPolicy("script-url-policy", {
  createScriptURL(input) {
    if (scriptAllowList.includes(input)) {
      return input; // cho phép tập lệnh
    }
    console.log(`Script not in scriptAllowList: ${input}`);
    return ""; // Chặn tập lệnh
  },
});

Tiếp theo chúng ta sẽ tạo phần tử tập lệnh để gán giá trị và lấy tham chiếu đến phần tử.

<script id="el"></script>

// Lấy phần tử tập lệnh mà chúng ta đang chèn mã vào
const el = document.getElementById("el");

Sau đó chúng ta sử dụng đối tượng policy để tạo thể hiện trustedScriptURL từ chuỗi đầu vào có thể không an toàn, và gán kết quả cho phần tử:

// Chuỗi có khả năng độc hại
// Chúng ta sẽ không bao gồm untrustedScriptURL trong mảng scriptAllowList
const untrustedScriptURL = "https://evil.example.com/naughty.js";

// Tạo thể hiện TrustedScriptURL bằng policy
const trustedScriptURL = policy.createScriptURL(untrustedScriptURL);

// Chèn TrustedScriptURL (chứa URL đáng tin)
el.src = trustedScriptURL;

Đọc thuộc tính src

Ví dụ này cho thấy cách bạn có thể đọc thuộc tính src cho hai phần tử tập lệnh bên dưới, giả sử URL trang là https://example.com.

<script id="script-with-src" type="module" src="/main.js"></script>
<script id="script-without-src" type="module"></script>

Mã đọc từng phần tử tập lệnh và ghi ra kết quả của thuộc tính src.

const scriptWithSrc = document.getElementById("script-with-src");
console.log(scriptWithSrc.src); // Kết quả: "https://example.com/main.js"
const scriptWithoutSrc = document.getElementById("script-without-src");
console.log(scriptWithoutSrc.src); // Kết quả: ""

Thông số kỹ thuật

Tương thích trình duyệt