mdn · teoli2003 · Aug 23, 2022 · Aug 23, 2022
@@ -57,19 +57,22 @@ Django's template system protects you against the majority of XSS attacks by [es
 2. Open the site in your local browser and login to your superuser account.
 3. Navigate to the author-creation page (which should be at URL: `http://127.0.0.1:8000/catalog/author/create/`).
 4. Enter names and date details for a new user, and then append the following text to the Last Name field:
-    `<script>alert('Test alert');</script>`.
-    ![Author Form XSS test](author_create_form_alert_xss.png)
+   `<script>alert('Test alert');</script>`.
+   ![Author Form XSS test](author_create_form_alert_xss.png)
 
-    > **Note:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
+   > **Note:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
 
 5. Press **Submit** to save the record.
 6. When you save the author it will be displayed as shown below. Because of the XSS protections the `alert()` should not be run. Instead the script is displayed as plain text.
-    ![Author detail view XSS test](author_detail_alert_xss.png)
+   ![Author detail view XSS test](author_detail_alert_xss.png)
 
 If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (for example, `>` is now `&gt;`)
 
 ```html
-<h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1>
+<h1>
+  Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David
+  (Boonie)
+</h1>
 ```
 
 Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the `help_text` in a form field is usually not user-supplied, so Django doesn't escape those values).
@@ -86,20 +89,38 @@ In order to do this, they might create an HTML file like the one below, which co
 They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.
 
 ```html
-<html>
-<body onload='document.EvilForm.submit()'>
-
-<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'>
-  <table>
-    <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required></td></tr>
-    <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required></td></tr>
-    <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text"></td></tr>
-    <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016"></td></tr>
-  </table>
-  <input type="submit" value="Submit">
-</form>
-
-</body>
+<html lang="en">
+  <body onload="document.EvilForm.submit()">
+    <form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name="EvilForm">
+      <table>
+        <tr>
+          <th><label for="id_first_name">First name:</label></th>
+          <td>
+            <input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required>
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_last_name">Last name:</label></th>
+          <td>
+            <input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required>
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_date_of_birth">Date of birth:</label></th>
+          <td>
+            <input id="id_date_of_birth" name="date_of_birth" type="text" />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_date_of_death">Died:</label></th>
+          <td>
+            <input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016">
+          </td>
+        </tr>
+      </table>
+      <input type="submit" value="Submit">
+    </form>
+  </body>
 </html>
 ```
 
@@ -108,7 +129,7 @@ Run the development web server, and log in with your superuser account. Copy the
 The way the protection is enabled is that you include the `{% csrf_token %}` template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.
 
 ```html
-<input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW'>
+<input type="hidden" name="csrfmiddlewaretoken" value="0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW">
 ```
 
 Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.

@@ -24,7 +24,6 @@ First, create a new directory, "button", and create a file called "manifest.json
 
 ```json
 {
-
   "description": "Demonstrating toolbar buttons",
   "manifest_version": 2,
   "name": "button-demo",
@@ -40,7 +39,6 @@ First, create a new directory, "button", and create a file called "manifest.json
       "32": "icons/page-32.png"
     }
   }
-
 }
 ```
 
@@ -95,7 +93,6 @@ Let's try adding a popup to the button. Replace manifest.json with this:
 
 ```json
 {
-
   "description": "Demonstrating toolbar buttons",
   "manifest_version": 2,
   "name": "button-demo",
@@ -109,7 +106,6 @@ Let's try adding a popup to the button. Replace manifest.json with this:
       "32": "icons/page-32.png"
     }
   }
-
 }
 ```
 
@@ -123,20 +119,17 @@ So now we need to create that popup. Create a directory called "popup" then crea
 
 ```html
 <!DOCTYPE html>
-
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="choose_page.css"/>
   </head>
-
-<body>
-  <div class="page-choice">developer.mozilla.org</div>
-  <div class="page-choice">support.mozilla.org</div>
-  <div class="page-choice">addons.mozilla.org</div>
-  <script src="choose_page.js"></script>
-</body>
-
+  <body>
+    <div class="page-choice">developer.mozilla.org</div>
+    <div class="page-choice">support.mozilla.org</div>
+    <div class="page-choice">addons.mozilla.org</div>
+    <script src="choose_page.js"></script>
+  </body>
 </html>
 ```
 
@@ -145,7 +138,8 @@ You can see that this is a normal HTML page containing three {{htmlelement("div"
 Create a file called "choose_page.css" inside the "popup" directory, and give it these contents:
 
 ```css
-html, body {
+html,
+body {
   width: 300px;
 }
 

@@ -14,16 +14,12 @@ Like websites, extensions can load content from different sources. For example,
 
 ```html
 <!DOCTYPE html>
-
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
   </head>
-
   <body>
-
     <!--Some HTML content here-->
-
     <!--
       Include a third-party script.
       See also https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity.
@@ -37,7 +33,6 @@ Like websites, extensions can load content from different sources. For example,
     <!-- Include my popup's own script-->
     <script src="popup.js"></script>
   </body>
-
 </html>
 ```
 
@@ -66,7 +61,7 @@ These policies are applied to any extension that has not explicitly set its own
 Under the default CSP you may only load [\<script>](/en-US/docs/Web/HTML/Element/script) and [\<object>](/en-US/docs/Web/HTML/Element/object) resources that are local to the extension. For example, consider a line like this in an extension's document:
 
 ```html
- <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 ```
 
 This doesn't load the requested resource: it fails silently, and any object that you expect to be present from the resource is not found. There are two main solutions to this:
@@ -95,7 +90,9 @@ const f = new Function("console.log('foo');");
 Under the default CSP, inline JavaScript is not executed. This disallows both JavaScript placed directly in `<script>` tags and inline event handlers, meaning that the following are not permitted:
 
 ```html
-<script>console.log("foo");</script>
+<script>
+  console.log("foo");
+</script>
 ```
 
 ```html

@@ -28,7 +28,6 @@ Create a new directory called `settings`, then create a file called `manifest.js
 
 ```json
 {
-
   "manifest_version": 2,
   "name": "Settings example",
   "version": "1.0",
@@ -39,7 +38,6 @@ Create a new directory called `settings`, then create a file called `manifest.js
       "js": ["borderify.js"]
     }
   ]
-
 }
 ```
 
@@ -63,7 +61,6 @@ First, update `manifest.json` so it has these contents:
 
 ```json
 {
-
   "manifest_version": 2,
   "name": "Settings example",
   "version": "1.0",
@@ -86,7 +83,6 @@ First, update `manifest.json` so it has these contents:
       "id": "addon@example.com"
     }
   }
-
 }
 ```
 
@@ -103,23 +99,19 @@ Next, because we've promised to provide `options.html`, let's create it. Create
 
 ```html
 <!DOCTYPE html>
-
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
   </head>
 
   <body>
-
     <form>
-        <label>Border color <input type="text" id="color" name="color"></label>
-        <button type="submit">Save</button>
+      <label>Border color <input type="text" id="color" name="color"></label>
+      <button type="submit">Save</button>
     </form>
 
     <script src="options.js"></script>
-
   </body>
-
 </html>
 ```
 
@@ -136,7 +128,6 @@ function saveOptions(e) {
 }
 
 function restoreOptions() {
-
   function setCurrentChoice(result) {
     document.querySelector("#color").value = result.color || "blue";
   }

@@ -23,7 +23,7 @@ To create an options page, write an HTML file defining the page. This page can i
 ```html
 <!DOCTYPE html>
 
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8"/>
   </head>

@@ -95,7 +95,7 @@ To see how {{WebExtAPIRef("tabs.query()")}} and {{WebExtAPIRef("tabs.Tab")}} are
 
     ```html
     <!DOCTYPE html>
-    <html>
+    <html lang="en">
       <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="tabs.css" />

@@ -196,7 +196,7 @@ Consider using metadata such as `<meta name="robots" content="noindex, nofollow"
 By not indexing the page, the likelihood that users will stumble upon it via search will be reduced.
 
 ```html
-<html>
+<html lang="en">
   <head>
     <title>…</title>
     <meta name="robots" content="noindex, nofollow">
@@ -266,8 +266,10 @@ To ensure that a video has controls that a user can access, ensure that you add
 <video controls>
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.webm" type="video/webm">
-  <p>Your browser doesn't support HTML video. Here is
-     a <a href="myVideo.mp4">link to the video</a> instead.</p>
+  <p>
+    Your browser doesn't support HTML video. Here is a
+    <a href="myVideo.mp4">link to the video</a> instead.
+  </p>
 </video>
 ```
 
@@ -332,11 +334,9 @@ JavaScript is often used to control {{HTMLElement('canvas')}} elements and SVGs.
 [document.getAnimations()](/en-US/docs/Web/API/Document/getAnimations) is an experimental technology, and includes [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations), [CSS Transitions](/en-US/docs/Web/CSS/CSS_Transitions), and [Web Animations](/en-US/docs/Web/API/Web_Animations_API). The MDN page on [Document.getAnimations()](/en-US/docs/Web/API/Document/getAnimations) provides the following code sample of how to slow down all animations on a page to half speed:
 
 ```js
-document.getAnimations().forEach(
-  function (animation) {
-    animation.playbackRate *= .5;
-  }
-);
+document.getAnimations().forEach((animation) => {
+  animation.playbackRate *= 0.5;
+});
 ```
 
 **Image sources for animation**
@@ -490,7 +490,7 @@ This can be useful if the ambient light API is not available. Support is emergin
 
 ```css
 @media (prefers-color-scheme: dark) {
-    /* adjust styles for dark mode */
+  /* adjust styles for dark mode */
 }
 ```
 
@@ -511,10 +511,11 @@ Eric Bailey, of CSS-Tricks, found an innovative use the update feature which, us
 
 ```css
 @media screen and (prefers-reduced-motion: reduce), (update: slow) {
-  * { animation-duration: 0.001ms !important;
-      animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700170) */
-      transition-duration: 0.001ms !important;
-    }
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion/#comment-1700170) */
+    transition-duration: 0.001ms !important;
+  }
 }
 ```
-Original file line number
+Diff line change
@@ Expand Up @@
     ```html
     <!DOCTYPE html>
-    <html>
+    <html lang="en">
       <head>
         <meta charset="utf-8"/>
       </head>
@@ Expand Down @@