What Are the Integrity and Crossorigin Attributes

I have a red line under the script tag when linking to jquery

How to include jQuery from jQuery CDN: https://code.jquery.com/

Latest jQuery 3 version:

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>

The integrity and crossorigin attributes are used for Subresource
Integrity (SRI) checking. This allows browsers to ensure that
resources hosted on third-party servers have not been tampered with.
Use of SRI is recommended as a best-practice, whenever libraries are
loaded from a third-party source.

I think all is said shortly and clearly and there's no need to add something else.

About integrity attribute of the minified version 3.3.1

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Inserting link tag with integrity and crossorigin attribute issue

Change crossorigin (not a valid HTMLLinkElement attribute) to crossOrigin (note the capital "O"). Remember that HTML element properties are generally spelled in camel case (first word lower case with all subsequent words having their first letter capitalized) in Javascript.

var link = document.createElement('link');link.rel = 'stylesheet';link.href = 'https://use.fontawesome.com/releases/v5.2.0/css/all.css';link.integrity = 'sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ';link.crossOrigin = 'anonymous';document.head.appendChild(link);

What is the purpose of the integrity attribute in HTML?

check this :

https://developer.mozilla.org/en/docs/Web/HTML/Element/script

Using Content Delivery Networks (CDNs) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. However, using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.
The Subresource Integrity feature enables you to mitigate the risk of attacks such as this, by ensuring that the files your Web application or Web document fetches (from a CDN or anywhere) have been delivered without a third-party having injected any additional content into those files — and without any other changes of any kind at all having been made to those files.

Are SRI's integrity and crossorigin values kept in package.json or elsewhere?

Since the value isn't easily accessible from the package.json or elsewhere in a package's directory, I use the ssri npm module.

More work, but doesn't look like there's a better way.

Why do we need the crossorigin attribute when preloading font files?

The HTML attribute crossorigin defines how to handle crossorigin requests. Setting the crossorigin attribute (equivalent to crossorigin="anonymous") will switch the request to a CORS request using the same-origin policy. It is required on the rel="preload" as font requests require same-origin policy.

The same-origin policy is required on almost all new resource types, such as fetch(), <script type="module"> or fonts. It doesn't apply to legacy resource types (images, scripts, css, video, audio) because of backwards-compatibility issues. <link rel="preload"> is a special case because it is a modern feature which needs to support legacy resource types, such as preloading an image.

the ideal is, from now on, you always SOR by default when you
introduce a new type of linking. It's just the right thing to do,
because it lets us avoid having to care about a whole annoying class
of security issues. Source

This requirement was then added to the W3C draft for CSS fonts.

For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [FETCH] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. Source

I have also come across repeated comments that it was requested by the font foundries to prevent font piracy, but I cannot substantiate that with evidence.