前端 link 标签

link rel=modulepreload

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload

Details

The modulepreload keyword, for the rel attribute of the <link> element, provides a declarative way to preemptively fetch a module script, parse and compile it, and store it in the document's module map for later execution.

Preloading allows modules and their dependencies to be downloaded early, and can also significantly reduce the overall download and processing time. This is because it allows pages to fetch modules in parallel, instead of sequentially as each module is processed and its dependencies are discovered. Note however that you can't just preload everything! What you choose to preload must be balanced against other operations that might then be starved, adversely affecting user experience.

Links with rel="modulepreload" are similar to those with rel="preload". The main difference is that preload just downloads the file and stores it in the cache, while modulepreload gets the module, parses and compiles it, and puts the results into the module map so that it is ready to execute.

When using modulepreload the fetch request mode is always cors, and the crossorigin property is used to determine the request credential mode. If crossorigin is set to anonymous or "" (default), then the credentials mode is same-origin, and user credentials such as cookies and authentication are only sent for requests with the same-origin. If crossorigin is set to use-credentials then the credentials mode is include, and user credentials for both single- and cross-origin requests.

The as attribute is optional for links with rel="modulepreload", and defaults to "script". It can be set to "script" or any script-like destination, such as "audioworklet", "paintworklet", "serviceworker", "sharedworker", or "worker". An Event named "error" is fired on the element if any other destination is used.

A browser may additionally also choose to automatically fetch any dependencies of the module resource. Note however that this is a browser-specific optimization — the only approach to ensure that all browsers will try to preload a module's dependencies is to individually specify them! Further, the events named load or error fire immediately following success or failure of loading the specified resources. If dependencies are automatically fetched, no additional events are fired in the main thread (although you might monitor additional requests in a service worker or on the server).

rel="modulepreload" 关键字用于 <link> 元素的 rel 属性，提供了一种声明式的方式来预先获取一个模块脚本，对其进行解析和编译，并将其存储在文档的模块映射中以供后续执行。

预加载允许模块及其依赖项提前下载，并且也可以显著减少总体的下载和处理时间。这是因为它允许页面并行地获取模块，而不是在处理每个模块及其发现的依赖项时按顺序进行。但请注意，你不能仅仅预加载所有东西！你选择预加载的内容必须与可能因此饥饿的其他操作保持平衡，以免负面影响用户体验。

带有 rel="modulepreload" 的链接与带有 rel="preload" 的链接类似。主要区别在于，preload 仅下载文件并将其存储在缓存中，而 modulepreload 则获取模块，解析并编译它，然后将结果放入模块映射中，以便准备执行。

使用 modulepreload 时，获取请求的模式始终是 cors，并使用 crossorigin 属性来确定请求凭证模式。如果 crossorigin 设置为 anonymous 或 ""（默认），则凭证模式是 same-origin，并且仅对同源请求发送用户凭证，如 cookies 和身份验证信息。如果 crossorigin 设置为 use-credentials，则凭证模式是 include，用于单源和跨源请求的用户凭证。

对于带有 rel="modulepreload" 的链接，as 属性是可选的，默认值为 "script"。它可以设置为 "script" 或任何类脚本目的地，如 "audioworklet"、"paintworklet"、"serviceworker"、"sharedworker" 或 "worker"。如果使用了其他目的地，则在元素上触发名为 "error" 的事件。

浏览器可能还会选择自动获取模块资源的任何依赖项。但请注意，这是一种浏览器特定的优化——确保所有浏览器尝试预加载模块依赖项的唯一方法是分别指定它们！此外，名为 load 或 error 的事件在指定资源成功加载或失败后立即触发。如果自动获取了依赖项，则在主线程中不会触发额外的事件（尽管你可能在服务工作器或服务器上监视额外的请求）。

img-src 应该怎么设置 才允许跨域和非跨域

要通过内容安全策略（Content Security Policy，CSP）的img-src指令同时允许加载跨域和非跨域的图片资源，你可以按照以下几个步骤进行设置：

1. 对于非跨域图片资源：通常，你可以使用self关键词来允许加载与网站同源的图片资源。self代表了与内容安全策略服务的同一域。

2. 对于跨域图片资源：你需要指定允许加载图片的外部域。这可以通过直接列出这些域的 URL 来完成。

综上所述，如果你想要在 CSP 中设置img-src指令以同时允许加载跨域和非跨域的图片资源，你可以这样做：

Content-Security-Policy: img-src 'self' https://example.com https://cdn.example.com;

在这个例子中：

• 'self'表示允许加载与网站同源的图片。
• https://example.com 和 https://cdn.example.com 是示例域，表示你同意从这些指定的外部来源加载图片。

注意点：

• 确保你列出的所有域都是你需要加载图片资源的可信来源。
• 为了提高安全性，尽可能限制和精确指定允许的域，避免使用过于宽泛的规则，如使用星号（*）允许来自所有域的图片，这可能会降低安全策略的有效性。
• 如果你的图片资源位于多个域上，需要将它们都列在img-src指令中。
• 对于复杂的情况，例如使用 CDN 服务或第三方服务提供的图片，确保将这些服务的域也包括在内。

通过这种方式，你就可以灵活地控制哪些图片资源是被允许加载的，同时维持网站的安全性。

link 中 crossorigin 的值的区别

在 HTML 的<link>元素中使用crossorigin属性可以指定如何处理跨源资源的请求。这个属性主要用于控制与跨域请求相关的凭据（如 cookies 和 HTTP 认证信息）的发送，以及新的安全特性如 Subresource Integrity（SRI）。crossorigin属性可以有以下几个值：

1. anonymous

• 使用此值时，会对跨源请求设置Origin头，但不会发送凭据（cookies、HTTP 认证等）。
• 如果服务器不返回允许跨源资源共享（CORS）的响应头，浏览器将不加载资源。
• 这是一个安全的默认选项，因为它不会泄露用户的认证信息。

2. use-credentials

• 当设置为use-credentials时，跨源请求会包括凭据。
• 同样，如果服务器不返回一个允许凭据的 CORS 响应头，资源不会被加载。
• 这适用于那些需要用户凭证才能访问的资源。

3. 未设置

• 如果不设置crossorigin属性，跨源请求将以"同源"策略发出，不会包含Origin头。这意味着请求看起来不是跨源的，服务器也就不会进行 CORS 响应。
• 对于需要 CORS 的资源（比如带有 Subresource Integrity 的跨源脚本），这可能会导致资源加载失败。

选择哪个值？

• 安全性：默认不包括crossorigin属性或使用anonymous是最安全的，因为它们不会泄露用户的凭证。
• 功能性：如果资源（如字体、脚本等）需要用户的凭证才能访问，那么使用use-credentials是必要的。
• 在实践中，你应该根据资源的类型和需要访问的跨源策略来选择合适的crossorigin值。例如，使用带有 SRI 的第三方库时，通常会设置anonymous，以确保安全地加载资源，而不泄露用户信息。