How to Inject Javascript on a webpage with custom attributes in script tag

Inserting a script with some attributes is a common requirement. Sometimes you need to use boolean attributes like defer for external scripts to instruct the browser to download the script but execute it after the page loads. Similarly, there are other attributes with specific purposes like async, nomodule, crossorigin, integrity, referrerpolicy, data-*, etc. that solves different purposes. Requestly comes equipped with a way to modify these rules while inserting scripts into a page.

Below are the steps to define attributes:

1. Create new rule – Insert Script Rule
2. Define source condition as required.
3. Select the Code Source as Code or URL.
4. In the case of URL – Enter the URL of the file given and add attributes in the field where <script> tag is shown.
5. In case of Code – Enter your custom code in the provided space and edit the <script> to add attributes.

Use Cases of Attributes

Defer — Used with external scripts to instruct the browser to download the script in parallel, but execute it after the page loads.

1. When an external script depends on an internal script load.
2. When features are to be loaded after the website loads completely, like third-party widgets etc.
3. To avoid the race condition with internal scripts.

Async — Complimentary to Defer, it instructs the browser to download the script in parallel and execute it as it becomes available. This rule is also applicable only to external scripts.

1. When the external script is independent of internal scripts.
2. When features are crucial for web pages like traffic monitoring scripts.

Integrity — Provides a script file hash to prevent the script load if it’s tempered.

• Distributing public libraries critical for web pages like jQuery.

Crossorigin — Defines the CORS mode of the request.

• crossorigin=anonymous – It will set the mode to cross-origin allowing the resource loading from different domains.
• crossorigin=use-credentials – It will also set the mode to cross-origin but it will send the credentials as well like – cooking, Basic auth or a certificate, etc.

ID — Is used to identify the HTML element uniquely.

class — Defines the classification of the element that CSS or JS can use to identify a class of elements for changing their style or behavior.

data-* — Custom attributes are generally used for different purposes like

• Passing configuration data like data-api-key, data-user-id
• Identification like data-widget-id, data-module-type
• Storing metadata like data-version, data-last-updated
• State management like data-autoplay
• Feature toggle like data-enhanced-tracking, data-widget-theme

type="module" — This has a crucial role in modern JavaScript development

• It signals the browser to treat the script as a JavaScript module, enabling the use of import and export keywords for modular code organization.
• JS Code within modules automatically runs in “strict mode”.
• Each module has its top-level scope, preventing variables and functions inside a module from polluting the global scope.
• Module scripts are loaded in parallel but executed after the HTML is parsed, ensuring the DOM is ready when module code runs.

References

1. Documentation – Link
2. Detailed Guide – Link
3. Case Studies:
   • Requestly enables AdToniq, an AdTech company, to test, deploy & demo their product on customer’s websites – Link
   • 15Gifts uses Requestly to test JS tags on external websites – Link
   • How Requestly helps Joyned to test local JS SDK changes directly on customer’s production sites – Link
4. Main Blog Post – Link
5. Stackoverflow Question, that inspired this feature. – Link