Thesrc property of theHTMLScriptElement interface is a string representing the URL of an external script; this can be used as an alternative to embedding a script directly within a document.

It reflects thesrc attribute of the<script> element.

Value

Getting the property returns a string containing the element's script URI.

Setting the property accepts either aTrustedScriptURL object or a string.

Exceptions

TypeError

Thrown if the property is set with a string whenTrusted Types areenforced by a CSP and no default policy is defined.This is also thrown if the fetched URL cannot be successfully parsed as its indicated type, such as a module or importmap.

Description

Thesrc property represents the URL of an external script.If set, scripts provided via the text propertiestext,textContent, orinnerText, are ignored.

Security considerations

Thesrc property is used to load and run external scripts.The fetched script is run in the context of the current page, and can hence do anything that your own website code can do (even if the URL is not same-origin with your site).If the input is provided by a user, this is a possible vector forcross-site scripting (XSS) attacks.

It is extremely risky to accept and execute arbitrary URLs from untrusted origins.A website should control what scripts that are allowed to run using aContent Security Policy (CSP) with thescript-src directive (or a fallback defined indefault-src).This can restrict scripts to those from the current origin, or a specific set of origins, or even particular files.

If you're using this property andenforcing trusted types (using therequire-trusted-types-for CSP directive), you will need to always assignTrustedScriptURL objects instead of strings.This ensures that the input is passed through a transformation function, which has the chance to reject or modify the URL before it is injected.

Even if the resource is trusted by your website, it may still be compromised in asupply chain attack.To mitigate against this kind of attack you should use thesubresource integrity feature.

Examples

Using TrustedScriptURL

To mitigate the risk of XSS, we should always assignTrustedScriptURL instances to thesrc property.We also need to do this if we're enforcing trusted types for other reasons and we want to allow some script sources that have been permitted (byCSP: script-src).

Trusted types are not yet supported on all browsers, so first we define thetrusted types tinyfill.This acts as a transparent replacement for the trusted types JavaScript API:

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

Next we create aTrustedTypePolicy that defines acreateScriptURL() method for transforming input strings intoTrustedScriptURL instances.

For the purpose of this example we'll assume that we want to allow a predefined set of URLs in thescriptAllowList array and log any other scripts.

const scriptAllowList = [  // Some list of allowed URLs];const policy = trustedTypes.createPolicy("script-url-policy", {  createScriptURL(input) {    if (scriptAllowList.includes(input)) {      return input; // allow the script    }    console.log(`Script not in scriptAllowList: ${input}`);    return ""; // Block the script  },});

Next we'll create the script element to which we will assign the value and get a handle to the element.

<script></script>

// Get the script element we're injecting the code intoconst el = document.getElementById("el");

Then we use thepolicy object to create atrustedScript object from the potentially unsafe input string, and assign the result to the element:

// The potentially malicious string// We won't be including untrustedScript in our scriptAllowList arrayconst untrustedScript = "https://evil.example.com/naughty.js";// Create a TrustedScriptURL instance using the policyconst trustedScriptURL = policy.createScriptURL(untrustedScript);// Inject the TrustedScriptURL (which contains a trusted URL)el.src = trustedScriptURL;

Reading thesrc property

This example shows how you can read thesrc property for the two script elements below, assuming page URL ishttps://example.com.

<script type="module" src="/main.js"></script><script type="module"></script>

The code reads each of the script elements and logs the output of thesrc property.

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

Specifications

Browser compatibility