Skip to content
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

Adds TrustedHTML, TrustedScript, TrustedScriptURL #2978

Merged
merged 5 commits into from
Mar 22, 2021
Merged

Adds TrustedHTML, TrustedScript, TrustedScriptURL #2978

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
10c21f8
Adds TrustedHTML, TrustedScript, TrustedScriptURL
rachelandrew Mar 9, 2021
0feaeb9
Update files/en-us/web/api/trustedhtml/index.html
rachelandrew Mar 10, 2021
5811766
Update files/en-us/web/api/trustedhtml/index.html
rachelandrew Mar 10, 2021
68d5edf
fixes
rachelandrew Mar 10, 2021
6a99b1f
fixes from PR review
rachelandrew Mar 18, 2021
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
66 changes: 66 additions & 0 deletions files/en-us/web/api/trustedhtml/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
title: TrustedHTML
slug: Web/API/TrustedHTML
tags:
- API
- Interface
- Reference
- TrustedHTML
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>TrustedHTML</code></strong> interface of the {{domxref('Trusted Types API')}} represents a string that a developer can insert into an <a href="/en-US/docs/Web/API/Trusted_Types_API#injection_sinks">injection sink</a> that will render it as HTML. These objects are created via {{domxref("TrustedTypePolicy.createHTML")}} and therefore have no constructor.</p>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved

<p>A <strong>TrustedHTML</strong> object has a <code>[[Data]]</code> internal slot which stores a {{domxref("DOMString")}}. The value is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.</p>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved

<h2 id="Methods">Methods</h2>

<dl>
<dt>{{domxref("TrustedHTML.toJSON()")}}</dt>
<dd>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</dd>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved
<dt>{{domxref("TrustedHTML.toString()")}}</dt>
<dd>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</dd>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved
</dl>

<h2 id="Examples">Examples</h2>
rachelandrew marked this conversation as resolved.
Show resolved Hide resolved

<pre class="brush: html">&lt;div id="myDiv"&gt;&lt;/div&gt;</pre>

<pre class="brush: js">const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
createHTML: (string) =&gt; string.replace(/\&gt;/g, "&lt;")
});

let el = document.getElementById("myDiv");
const escaped = escapeHTMLPolicy.createHTML("&lt;img src=x onerror=alert(1)&gt;");
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = escaped;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#trusted-html','TrustedHTML')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedHTML")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://web.dev/trusted-types/">Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types</a></li>
</ul>
54 changes: 54 additions & 0 deletions files/en-us/web/api/trustedhtml/tojson/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
title: TrustedHTML.toJSON()
slug: Web/API/TrustedHTML/toJSON
tags:
- API
- Method
- Reference
- toJSON
- TrustedHTML
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>toJSON()</code></strong> method of the {{domxref("TrustedHTML")}} interface returns a string which may safely inserted into an injection sink.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">var <var>json</var> = <var>TrustedHTML</var>.toJSON();</pre>
Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry to poke an old PR, but this was linked from mdn/browser-compat-data#11063 and I wanted to bring attention to #3487.

https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML/toJSON now has var json = TrustedHTML.toJSON() in the syntax block, but TrustedHTML.toJSON() is not a piece of code that works. TrustedHTML would need to be some plausible name for an instance of TrustedHTML, so perhaps escaped.toJSON()?


<h3 id="Returns">Return value</h3>

<p>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
createHTML: (string) =&gt; string.replace(/\&gt;/g, "&lt;")
});

const escaped = escapeHTMLPolicy.createHTML("&lt;img src=x onerror=alert(1)&gt;");
console.log(escaped.toJSON());
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#dom-trustedhtml-tojson','TrustedHTML.toJSON()')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedHTML.toJSON")}}</p>
54 changes: 54 additions & 0 deletions files/en-us/web/api/trustedhtml/tostring/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
title: TrustedHTML.toString()
slug: Web/API/TrustedHTML/toString
tags:
- API
- Method
- Reference
- toString
- TrustedHTML
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>toString()</code></strong> method of the {{domxref("TrustedHTML")}} interface returns a string which may safely inserted into an injection sink.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">var <var>str</var> = <var>TrustedHTML</var>.toString();</pre>

<h3 id="Returns">Return value</h3>

<p>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
createHTML: (string) =&gt; string.replace(/\&gt;/g, "&lt;")
});

const escaped = escapeHTMLPolicy.createHTML("&lt;img src=x onerror=alert(1)&gt;");
console.log(escaped.toString());
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#trustedhtml-stringification-behavior','TrustedHTML.toString()')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedHTML.toString")}}</p>
58 changes: 58 additions & 0 deletions files/en-us/web/api/trustedscript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: TrustedScript
slug: Web/API/TrustedScript
tags:
- API
- Interface
- Reference
- TrustedScript
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>TrustedScript</code></strong> interface of the {{domxref('Trusted Types API')}} represents a string with an uncompiled script body that a developer can insert into an <a href="/en-US/docs/Web/API/Trusted_Types_API#injection_sinks">injection sink</a> that might execute the script. These objects are created via {{domxref("TrustedTypePolicy.createScript")}} and therefore have no constructor.</p>

<p>A <strong>trustedScript</strong> object has a <code>[[Data]]</code> internal slot which stores a {{domxref("DOMString")}}. The value is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.</p>

<h2 id="Methods">Methods</h2>

<dl>
<dt>{{domxref("TrustedScript.toJSON()")}}</dt>
<dd>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</dd>
<dt>{{domxref("TrustedScript.toString()")}}</dt>
<dd>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized;) /* a TrustedScript object */
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#trusted-script','TrustedScript')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedScript")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://web.dev/trusted-types/">Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types</a></li>
</ul>
50 changes: 50 additions & 0 deletions files/en-us/web/api/trustedscript/tojson/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
title: TrustedScript.toJSON()
slug: Web/API/TrustedScript/toJSON
tags:
- API
- Method
- Reference
- toJSON
- TrustedScript
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>toJSON()</code></strong> method of the {{domxref("TrustedScript")}} interface returns a string which may safely inserted into an <a href="/en-US/docs/Web/API/Trusted_Types_API#injection_sinks">injection sink</a>.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">var <var>json</var> = <var>TrustedScript</var>.toJSON();</pre>

<h3 id="Returns">Return value</h3>

<p>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized.toJSON());
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#dom-trustedscript-tojson','TrustedScript.toJSON()')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedScript.toJSON")}}</p>
50 changes: 50 additions & 0 deletions files/en-us/web/api/trustedscript/tostring/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
title: TrustedScript.toString()
slug: Web/API/TrustedScript/toString
tags:
- API
- Method
- Reference
- toString
- TrustedScript
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>toString()</code></strong> method of the {{domxref("TrustedScript")}} interface returns a string which may safely inserted into an <a href="/en-US/docs/Web/API/Trusted_Types_API#injection_sinks">injection sink</a>.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">var <var>str</var> = <var>TrustedScript</var>.toString();</pre>

<h3 id="Returns">Return value</h3>

<p>A {{domxref("DOMString")}} containing the value of the <code>[[Data]]</code> internal slot.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized.toString());
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#trustedscript-stringification-behavior','TrustedScript.toString()')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedScript.toString")}}</p>
58 changes: 58 additions & 0 deletions files/en-us/web/api/trustedscripturl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: TrustedScriptURL
slug: Web/API/TrustedScriptURL
tags:
- API
- Interface
- Reference
- TrustedScriptURL
---
<div>{{DefaultAPISidebar("Trusted Types API")}}</div>

<p class="summary">The <strong><code>TrustedScriptURL</code></strong> interface of the {{domxref('Trusted Types API')}} represents a string that a developer can insert into an <a href="/en-US/docs/Web/API/Trusted_Types_API#injection_sinks">injection sink</a> that will parse it as a URL of an external script. These objects are created via {{domxref("TrustedTypePolicy.createScriptURL")}} and therefore have no constructor.</p>

<p>A <strong>TrustedScriptURL</strong> object has a <code>[[Data]]</code> internal slot which stores a {{domxref("USVString")}}. The value is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.</p>

<h2 id="Methods">Methods</h2>

<dl>
<dt>{{domxref("TrustedScriptURL.toJSON()")}}</dt>
<dd>A {{domxref("USVString")}} containing the value of the <code>[[Data]]</code> internal slot.</dd>
<dt>{{domxref("TrustedScriptURL.toString()")}}</dt>
<dd>A {{domxref("USVString")}} containing the value of the <code>[[Data]]</code> internal slot.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">const sanitized = scriptPolicy.createScriptURL("https://example.com/my-script.js");
console.log(sanitized;) /* a TrustedScriptURL object */
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Trusted Types','#trused-script-url','TrustedScriptURL')}}</td>
<td>{{Spec2('Trusted Types')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("api.TrustedScriptURL")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="https://web.dev/trusted-types/">Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types</a></li>
</ul>
Loading