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 12 commits into
base: main
Choose a base branch
from
Open

Add external <script type=speculationrules> #11697

Changes from 3 commits
Commits
Show all changes
12 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
404bd9b
fix indentation
vickiez Dec 18, 2025
bca624e
add onComplete algorithm to fetch spec rules
vickiez Dec 22, 2025
797370c
handle script attributes
vickiez Dec 24, 2025
bca62cf
handle crossorigin attr and rewrap
vickiez Dec 24, 2025
84cbdac
format and clean up
vickiez Dec 24, 2025
098b4d8
fix indentation
vickiez Dec 30, 2025
e31b081
fix indentation
vickiez Dec 30, 2025
5cb64e5
follow spec conventions for steps and request
vickiez Jan 20, 2026
f1262fa
remove initiator type and client
vickiez Jan 22, 2026
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
Comment thread
vickiez marked this conversation as resolved.
Outdated
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
Comment thread
vickiez marked this conversation as resolved.
Outdated
<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
Comment thread
vickiez marked this conversation as resolved.
Outdated
Comment thread
vickiez marked this conversation as resolved.
Outdated
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
Copy Markdown
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.

Copy link
Copy Markdown
Author

@vickiez vickiez Dec 30, 2025

Choose a reason for hiding this comment

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

There's a change in progress here: whatwg/fetch#1841. Happy to help with that one, is there a proper order for merging the changes across specs?

Copy link
Copy Markdown
Member

@domfarolino domfarolino Dec 30, 2025

Choose a reason for hiding this comment

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

Merging them as close together as possible provided they are both unblocked and generally agreed upon is fine. But regarding this PR: is there cross-browser interest in this feature overall? The PR template is pretty scant.

Copy link
Copy Markdown
Author

@vickiez vickiez Jan 26, 2026

Choose a reason for hiding this comment

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

Filled in the PR template with implementation bugs and just created position requests here:
Support external <script type=speculationrules> · Issue #1343 · mozilla/standards-positions
Support external <script type=speculationrules> · Issue #604 · WebKit/standards-positions

Copy link
Copy Markdown
Author

@vickiez vickiez Jan 30, 2026

Choose a reason for hiding this comment

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

Also for some context - this change was meant to be included in the base speculation rules spec change to achieve completeness. I was planning on merging it into Domenic's branch, but his change was merged into HTML first. See the comment here - #11123 (comment)

"<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>
Comment thread
vickiez marked this conversation as resolved.
Outdated
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