Skip to content

Add external <script type=speculationrules> #11697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vickiez wants to merge 3 commits into
base: main
Choose a base branch
from
+86 −51
Open

Add external <script type=speculationrules> #11697

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
edf71dd
Add external <script type=speculationrules>
vickiez Sep 24, 2025
f2aea41
remove async attribute
vickiez Sep 24, 2025
59d995a
Fix vars and add algorithm
vickiez Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 86 additions & 51 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66070,11 +66070,12 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {

<p>The second core attribute is the <dfn for="script" element-attr><code
data-x="attr-script-src">src</code></dfn> attribute. It must only be specified for <span
data-x="classic script">classic scripts</span> and <span data-x="JavaScript module
script">JavaScript module scripts</span>, and denotes that instead of using the element's
<span>child text content</span> as the script content, the script will be fetched from the
specified <span>URL</span>. If <code data-x="attr-script-src">src</code> is specified, it must be
a <span>valid non-empty URL potentially surrounded by spaces</span>.</p>
data-x="classic script">classic scripts</span>, <span data-x="JavaScript module script">JavaScript
module scripts</span>, and <span data-x="speculation rule set">speculation rules</span>, and
denotes that instead of using the element's <span>child text content</span> as the script content,
the script will be fetched from the specified <span>URL</span>. If <code
data-x="attr-script-src">src</code> is specified, it must be a <span>valid non-empty URL
potentially surrounded by spaces</span>.</p>

<p>Which other attributes may be specified on a given <code>script</code> element is determined by
the following table:</p>
Expand Down Expand Up @@ -66143,7 +66144,17 @@ interface <dfn interface>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<tr>
<th>Speculation rules</th>
<th>External speculation rules</th>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="yes">Yes</td>
<td class="yes">Yes</td>
<td class="yes">Yes</td>
<td class="yes">Yes</td>
<tr>
<th>Inline speculation rules</th>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
<td class="no">&middot;</td>
Expand Down Expand Up @@ -67046,15 +67057,14 @@ document.body.append(script1, script2);
<ol>
<li>
<p>If <var>el</var>'s <span data-x="concept-script-type">type</span> is "<code
data-x="">importmap</code>" or "<code data-x="">speculationrules</code>", then <span>queue an
element task</span> on the <span>DOM manipulation task source</span> given <var>el</var> to
<span data-x="concept-event-fire">fire an event</span> named <code
data-x="event-error">error</code> at <var>el</var>, and return.</p>
data-x="">importmap</code>", then <span>queue an element task</span> on the <span>DOM
manipulation task source</span> given <var>el</var> to <span data-x="concept-event-fire">fire
an event</span> named <code data-x="event-error">error</code> at <var>el</var>, and
return.</p>

<p class="note">External import maps and speculation rules are not currently supported. See <a
href="https://github.com/WICG/import-maps/issues/235">WICG/import-maps issue #235</a> and <a
href="https://github.com/WICG/nav-speculation/issues/348">WICG/nav-speculation issue #348</a>
for discussions on adding support.</p>
<p class="note">External import maps are not currently supported. See <a
href="https://github.com/WICG/import-maps/issues/235">WICG/import-maps issue #235</a> for
discussions on adding support.</p>
</li>

<li><p>Let <var>src</var> be the value of <var>el</var>'s <code
Expand Down Expand Up @@ -67116,6 +67126,21 @@ document.body.append(script1, script2);
<p><span>Fetch an external module script graph</span> given <var>url</var>, <var>settings
object</var>, <var>options</var>, and <var>onComplete</var>.</p>
</dd>

<dt>"<code data-x="">speculationrules</code>"</dt>
<dd>
<ol>
<li><p>Let <var>speculationRulesText</var> be the result of <span data-x="fetch speculation
Copy link
Collaborator

@noamr noamr Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem right. You can't mix sync/async calls like this.

rules">fetching speculation rules</span> given <var>url</var> and <var>el</var>'s <span>node
document</span>.</p></li>

<li><p>Let <var>result</var> be the result of <span data-x="create a speculation rules parse
result">creating a speculation rules parse result</span> given
<var>speculationRulesText</var> and <var>el</var>'s <span>node document</span>.</p></li>

<li><p>Run <var>onComplete</var> given <var>result</var>.</p></li>
</ol>
</dd>
</dl>

<p>For performance reasons, user agents may start fetching the classic script or module graph
Expand Down Expand Up @@ -112625,7 +112650,7 @@ new PaymentRequest(&hellip;); // Allowed to use
are delivered as JSON documents, via either:</p>

<ul>
<li><p>inline <code>script</code> elements with their <code data-x="attr-script-type">type</code>
<li><p><code>script</code> elements with their <code data-x="attr-script-type">type</code>
attribute set to "<code data-x="">speculationrules</code>"; or</p></li>

<li><p>resources fetched from a URL specified in the `<code>Speculation-Rules</code>` HTTP
Expand Down Expand Up @@ -114366,45 +114391,19 @@ new PaymentRequest(&hellip;); // Allowed to use
steps:</p>

<ol>
<li><p>Let <var>request</var> be a new <span data-x="concept-request">request</span> whose
<span data-x="concept-request-url">URL</span> is <var>url</var>, <span
data-x="concept-request-destination">destination</span> is "<code
data-x="">speculationrules</code>", and <span data-x="concept-request-mode">mode</span> is
"<code data-x="">cors</code>".</p></li>
<li><p>Let <var>speculationRulesText</var> be the result of <span data-x="fetch
speculation rules">fetching speculation rules</span> given <var>url</var> and
<var>document</var>.</p></li>

<li>
<p><span data-x="concept-fetch">Fetch</span> <var>request</var> with the following <i
data-x="processResponseConsumeBody">processResponseConsumeBody</i> steps given <span
data-x="concept-response">response</span> <var>response</var> and null, failure, or a
<span>byte sequence</span> <var>bodyBytes</var>:</p>
<li><p>Let <var>ruleSet</var> be the result of <span data-x="parse a speculation rule set
string" >parsing a speculation rule set string</span> given
<var>speculationRulesText</var>, <var>document</var>, and <var>url</var>.</p></li>

<ol>
<li><p>If <var>bodyBytes</var> is null or failure, then abort these steps.</p></li>

<li><p>If <var>response</var>'s <span data-x="concept-response-status">status</span> is
not an <span>ok status</span>, then abort these steps.</p></li>

<li><p>If the result of <span data-x="extract a MIME type">extracting a MIME type</span>
from <var>response</var>'s <span data-x="concept-response-header-list">header list</span>
does not have an <span data-x="MIME type essence">essence</span> of
"<code>application/speculationrules+json</code>", then abort these steps.</p></li>

<li><p>Let <var>bodyText</var> be the result of <span data-x="UTF-8 decode">UTF-8
decoding</span> <var>bodyBytes</var>.</p></li>

<li><p>Let <var>ruleSet</var> be the result of <span data-x="parse a speculation rule set
string">parsing a speculation rule set string</span> given <var>bodyText</var>,
<var>document</var>, and <var>response</var>'s <span
data-x="concept-response-url">URL</span>. If this throws an exception, then abort these
steps.</p></li>

<li><p><span data-x="list append">Append</span> <var>ruleSet</var> to
<var>document</var>'s <span data-x="document-sr-sets">speculation rule
sets</span>.</p></li>
<li><p><span data-x="list append">Append</span> <var>ruleSet</var> to
<var>document</var>'s <span data-x="document-sr-sets">speculation rule
sets</span>.</p></li>

<li><p><span>Consider speculative loads</span> for <var>document</var>.</p></li>
</ol>
</li>
<li><p><span>Consider speculative loads</span> for <var>document</var>.</p></li>
</ol>
</li>
</ol>
Expand Down Expand Up @@ -117366,6 +117365,42 @@ document.querySelector("button").addEventListener("click", bound);
</ol>
</div>

<div algorithm="">
<p>To <dfn>fetch speculation rules</dfn>, given a <span>URL</span> <var>url</var> and
Copy link
Collaborator

@noamr noamr Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you probably need to pass an onComplete steps, rather than treat this like a synchronous algorithm.

<code>Document</code> <var>document</var>, run these steps.</p>

<ol>
<li><p>Let <var>request</var> be a new <span data-x="concept-request">request</span> whose <span
Copy link
Collaborator

@noamr noamr Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation here is wrong.

Copy link
Collaborator

@noamr noamr Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to deal with all the crossorigin/referrerpolicy attributes etc. See how module scripts are fetched.

data-x="concept-request-url">URL</span> is <var>url</var>, <span
data-x="concept-request-client">client</span> is <var>document</var>'s <span>relevant settings
object</span>, <span data-x="concept-request-destination">destination</span> is "<code
data-x="">speculationrules</code>", and <span data-x="concept-request-mode">mode</span> is
Copy link
Collaborator

@noamr noamr Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This destination needs to be defined in the fetch spec.

"<code data-x="">cors</code>".</p></li>

<li>
<p><span data-x="concept-fetch">Fetch</span> <var>request</var> with the following <i
data-x="processResponseConsumeBody">processResponseConsumeBody</i> steps given <span
data-x="concept-response">response</span> <var>response</var> and null, failure, or a
<span>byte sequence</span> <var>bodyBytes</var>:</p>

<ol>
<li><p>If <var>bodyBytes</var> is null or failure, then return the empty string.</p></li>

<li><p>If <var>response</var>'s <span data-x="concept-response-status">status</span> is not
an <span>ok status</span>, then return the empty string.</p></li>

<li><p>If the result of <span data-x="extract a MIME type">extracting a MIME type</span>
from <var>response</var>'s <span data-x="concept-response-header-list">header list</span>
does not have an <span data-x="MIME type essence">essence</span> of
"<code>application/speculationrules+json</code>", then return the empty string.</p></li>

<li><p>Return the result of <span data-x="UTF-8 decode">UTF-8 decoding</span>
<var>bodyBytes</var>.</p></li>
</ol>
</li>
</ol>
</div>

<h5 id="creating-scripts">Creating scripts</h5>

<div algorithm>
Expand Down