Problem loading external scripts like jQuery

Quick Fix: To load external scripts like jQuery, inside the HTML head, check if window.trustedTypes and createPolicy exist and create a new policy with createPolicy. Refer Google Issue Tracker for more details.

The Problem:

An issue has arisen when attempting to load external scripts, such as jQuery, within web applications created using Google Apps Script. This issue prevents the external scripts from loading correctly within the HTML code, causing errors in the console and disrupting the functionality of the web application. Despite the scripts previously functioning without issues, they are no longer loading as expected, and no recent changes have been made to justify this issue. This problem affects web applications deployed with Apps Script, which include both a code file and an HTML file. The objective is to overcome this problem and enable the external scripts to load successfully within the web application.

The Solutions:

Solution 1: Use Trusted Types Policy

To resolve the issue of external scripts like jQuery not loading, add the following code to the very top of your HTML <head> tag:

<script>
  if (window.trustedTypes && window.trustedTypes.createPolicy) {
    window.trustedTypes.createPolicy('default', {
      createHTML: string => string,
      createScriptURL: string => string,
      createScript: string => string,
    });
  }
</script>

This code creates a Trusted Types policy. Trusted Types is a security mechanism that allows you to control the types of content that can be loaded into a document.

By creating a Trusted Types policy, you can specify which domains are allowed to load scripts into your document. This helps to prevent malicious scripts from being loaded and executed.

Solution 2: Trusted Types Policy Workaround

In the <head> section of your HTML, add the following script:

<script>
  if (window.trustedTypes &amp;&amp; window.trustedTypes.createPolicy) {
    window.trustedTypes.createPolicy('default', {
      createHTML: string =&gt; string,
      createScriptURL: string =&gt; string,
      createScript: string =&gt; string,
    });
  }
</script>

This workaround effectively creates a Trusted Types policy named “default” and assigns it the necessary functions to handle HTML, script URLs, and scripts. By implementing this policy, you’re explicitly allowing the browser to trust the external scripts, including jQuery, within the specified policy.

With this workaround in place, you should be able to successfully load and use jQuery in your AppScript projects on Chromium-based browsers like Chrome and Edge, resolving the issue arising from the recent changes in the Content Security Policy (CSP).

Solution 3: Create a policy for URL security.

You can create a policy for URL security to resolve this issue. Here’s how you can do it:

Check for Trusted Types Support:
First, you need to verify if your browser supports Trusted Types. You can use the following code:

if (typeof trustedTypes === "undefined") {
  alert("Trusted types are not supported");
} else {
  alert("Trusted types are supported");
}

Create a Policy:
If your browser supports Trusted Types, you can create a policy for URL security, like this:

const myEscapePolicy = trustedTypes.createPolicy("myEscapePolicy", {
  createHTML: (string) => string.replace(/</g, "&lt;"),
});

Use the Policy in Your Code:
Once you have created the policy, you can use it in your code to escape HTML strings, like this:
```
let escaped = myEscapePolicy.createHTML("Hello, world!");
```

This should solve the problem with loading external scripts like jQuery from the HTML side.

Solution 4: CSP in App Script

The issue with loading external scripts like jQuery in App Script is related to Content Security Policy (CSP). CSP is a security measure that helps protect web applications from cross-site scripting (XSS) attacks. In App Script, CSP can restrict the loading of external scripts from certain domains.

To resolve this issue, you can update the Content Security Policy (CSP) in your App Script project to allow loading of external scripts from the desired domain. Here’s how you can do it:

Open your App Script project in the Google Apps Script editor.
Click on the “View” menu and select “Project Properties.”
In the “Project properties” dialog box, select the “Advanced” tab.
In the “Content security policy” section, you will see a text field with the current CSP policy. By default, it is set to “script-src ‘self’; object-src ‘self’.”
To allow loading of external scripts from a specific domain, such as the jQuery CDN, add the following line to the CSP policy:
“`
script-src ‘self’ https://ajax.googleapis.com;
“`
Click “Save” to save the changes to the CSP policy.

After updating the CSP policy, you should be able to load external scripts like jQuery in your App Script HTML pages without encountering the CSP error.

Q&A

What is the reason behind the problem loading external scripts like jQuery?

—

Changes in Content Security Policy (CSP) by Google impacted jQuery in AppScript.

Video Explanation:

The following video, titled "How To Configure Perfmatters: A setting-by-setting walkthrough with ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

... jQuery Migrate* 12:40 Hide WP Version 13:53 Remove wlwmanifest Link ... Loading Images 1:19:10 Laxy Loading Videos & iFrames 1:21:17 ...

Problem loading external scripts like jQuery – Jquery