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
+117 −43
Open

Add external <script type=speculationrules> #11697

Changes from 10 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
163 changes: 120 additions & 43 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,24 @@ 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>
<p><span data-x="fetch speculation rules">Fetch speculation rules</span> given
<var>url</var>, <var>el</var>'s <span>node document</span>, <span
Comment thread
vickiez marked this conversation as resolved.
Outdated
data-x="concept-request-initiator-type">initiator type</span> "<code
data-x="">script</code>", <var>options</var>, and an algorithm
<var>speculationRulesOnComplete</var> that performs the following steps given
<span>string</span> <var>speculationRulesText</var>:</p>

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

<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 +112653,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,37 +114394,18 @@ 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><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>
<p><span data-x="fetch speculation rules">Fetch speculation rules</span> given
<var>url</var>, <var>document</var>, <span
data-x="concept-request-initiator-type">initiator type</span> "<code
data-x="">other</code>", and an algorithm <var>speculationRulesOnComplete</var> that
performs the following steps given <span>string</span>
<var>speculationRulesText</var>:</p>
Comment thread
vickiez marked this conversation as resolved.
Outdated

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

<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
Expand Down Expand Up @@ -117366,6 +117375,74 @@ document.querySelector("button").addEventListener("click", bound);
</ol>
</div>

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)

<div algorithm="">
<p>To <dfn>fetch speculation rules</dfn>, given a <span>URL</span> <var>url</var>,
<code>Document</code> <var>document</var>, an <span
data-x="concept-request-initiator-type">initiator type</span> <var>initiatorType</var>, an
optional <span>script fetch options</span>-or-null <var>options</var> (default null), and an
algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm
accepting a <span>string</span>.</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-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>", <span data-x="concept-request-mode">mode</span> is "<code
data-x="">cors</code>", and <span data-x="concept-request-initiator-type">initiator type</span>
is <var>initiatorType</var>.</p></li>
Comment thread
vickiez marked this conversation as resolved.
Outdated
Comment thread
vickiez marked this conversation as resolved.
Outdated

<li>
<p>If <var>options</var> is not null and <var>initiator</var> is "<code
data-x="">script</code>", then:</p>
Comment thread
vickiez marked this conversation as resolved.
Outdated

<ol>
<li><p>Set <var>request</var>'s <span data-x="concept-request-credentials-mode">credentials
mode</span> to <var>options</var>'s <span
data-x="concept-script-fetch-options-credentials">credentials mode</span>.</p></li>

<li><p>Set <var>request</var>'s <span data-x="concept-request-integrity-metadata">integrity
metadata</span> to <var>options</var>'s <span
data-x="concept-script-fetch-options-integrity">integrity metadata</span>.</p></li>

<li><p>Set <var>request</var>'s <span data-x="concept-request-referrer-policy">referrer
policy</span> to <var>options</var>'s <span
data-x="concept-script-fetch-options-referrer-policy">referrer policy</span>.</p></li>

<li><p>Set <var>request</var>'s <span data-x="concept-request-priority">priority</span> to
<var>options</var>'s <span data-x="concept-script-fetch-options-fetch-priority">fetch
priority</span>.</p></li>
</ol>
</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>
Comment thread
vickiez marked this conversation as resolved.
Outdated

<ol>
<li><p>If <var>bodyBytes</var> is null or failure, then run <var>onComplete</var> given the
empty string, and return.</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 run <var>onComplete</var> given the empty string, and
return.</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 run <var>onComplete</var> given the
empty string, and return.</p></li>

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

<li><p>Run <var>onComplete</var> given <var>speculationRulesText</var>.</p></li>
</ol>
</li>
</ol>
</div>

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

<div algorithm>
Expand Down