Clarify what gets percent-encoded in data URLs (#2856)

* Push the “fixable flaws” button

* Clarify what gets percent-encoded in data URLs

Also fixes #2840

files/en-us/web/http/basics_of_http/data_uris/index.html

@@ -25,13 +25,15 @@ <h2 id="Syntax">Syntax</h2>
 
 <p>The <code>mediatype</code> is a <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> string, such as <code>'image/jpeg'</code> for a JPEG image file. If omitted, defaults to <code>text/plain;charset=US-ASCII</code></p>
 
-<p>If the data is textual, you can embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify <code>base64</code> to embed base64-encoded binary data. You can find more info on MIME types <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">here</a> and <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">here</a>.</p>
+<p>If the data contains <a href="https://tools.ietf.org/html/rfc3986#section-2.2">characters defined in RFC 3986 as reserved characters</a>, or contains space characters, newline characters, or other non-printing characters, those characters must be <a href="/en-US/docs/Glossary/percent-encoding">percent-encoded</a> (<em>aka</em> “URL-encoded”).</p>
+
+<p>If the data is textual, you can embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify <code>base64</code> to embed base64-encoded binary data. You can find more info on MIME types <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">here</a> and <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">here</a>.</p>
 
 <p>A few examples:</p>
 
 <dl>
  <dt><code>data:,Hello%2C%20World!</code></dt>
- <dd>Simple text/plain data. Note the use of <a href="/en-US/docs/Glossary/percent-encoding">percent-encoding</a> (URL-encoding) for the quote and space characters. Also, for CSV data (MIME type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet.</dd>
+ <dd>The text/plain data <code>Hello, World!</code>. Note how the comma is  <a href="/en-US/docs/Glossary/percent-encoding">percent-encoded</a> as <code>%2C</code>, and the space character as <code>%20</code>.</dd>
  <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==</code></dt>
  <dd>base64-encoded version of the above</dd>
  <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
@@ -46,7 +48,7 @@ <h2 id="Encoding_data_into_base64_format">Encoding data into base64 format</h2>
 
 <h3 id="Encoding_in_Javascript">Encoding in Javascript</h3>
 
-<p>The Web APIs have native methods to encode or decode to base64: <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a>.</p>
+<p>The Web APIs have native methods to encode or decode to base64: <a href="/en-US/docs/Glossary/Base64">Base64 encoding and decoding</a>.</p>
 
 <h3 id="Encoding_on_a_Unix_system">Encoding on a Unix system</h3>
 
@@ -128,10 +130,10 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/Glossary/Base64">Base64 encoding and decoding</a></li>
  <li><a href="/en-US/docs/Glossary/percent-encoding">Percent encoding</a></li>
- <li>{{domxref("WindowBase64.atob","atob()")}}</li>
- <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
- <li><a href="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope/atob","atob()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope/btoa","btoa()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/url()">CSS <code>url()</code></a></li>
  <li><a href="/en-US/docs/Glossary/URI">URI</a></li>
 </ul>