Refine _blank implicit noopener (#2236)

* <a target="_blank"> has implicit noopener as per spec.
See: whatwg/html#4330

Removed the wordings that could imply the behavior is vendor-specific.
Added links to Browser compatibility for easy reference.

* <a>: Merged the two similar notes, added more links.

* <area> <form>: Applied the same from 517d127 and c531fc3.
Should follow up when browser-compat-data for form is revised.

* <a> <area> <form>: Applied the new note box style.

Author: kiding

files/en-us/web/api/window/opener/index.html

@@ -47,7 +47,7 @@ <h3 id="Value">Value</h3>
     <code>{{htmlattrxref("rel", "a")}}=noopener</code> on a link, or passing
     <code>noopener</code> in the {{domxref("Window.open", "windowFeatures")}} parameter.
   </li>
-  <li>From Firefox 79, windows opened because of links with a {{htmlattrxref("target",
+  <li>Windows opened because of links with a {{htmlattrxref("target",
     "a")}} of <code>_blank</code> don't get an <code>opener</code>, unless explicitly
     requested with <code>{{htmlattrxref("rel", "a")}}=opener</code>.</li>
   <li>Having a {{HTTPHeader("Cross-Origin-Opener-Policy")}} header with a value of

files/en-us/web/html/element/a/index.html

@@ -41,12 +41,13 @@ <h2 id="Attributes">Attributes</h2>
   <li>Defining a value suggests it as the filename. <code>/</code> and <code>\</code> characters are converted to underscores (<code>_</code>). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.</li>
  </ul>
 
- <div class="note"><strong>Notes:</strong>
+ <div class="notecard note">
+ <h4>Notes</h4>
 
  <ul>
   <li><code>download</code> only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>, or the <code>blob:</code> and <code>data:</code> schemes.</li>
   <li>
-   <p>Note: if the <code>Content-Disposition</code> header has different information from the <code>download</code> attribute, resulting behavior may differ:</p>
+   <p>If the <code>Content-Disposition</code> header has different information from the <code>download</code> attribute, resulting behavior may differ:</p>
 
    <ul>
     <li>
@@ -89,12 +90,9 @@ <h2 id="Attributes">Attributes</h2>
   <li><code>_top</code>: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as <code>_self</code>.</li>
  </ul>
 
- <div class="note">
- <p><strong>Note:</strong> When using <code>target</code>, add <code>rel="noreferrer noopener"</code> to avoid exploitation of the <code>window.opener</code> API.</p>
- </div>
-
- <div class="note">
- <p><strong>Note:</strong> In newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> on <code>&lt;a&gt;</code> elements implicitly provides the same <code>rel</code> behavior as setting <code>rel="noopener"</code>.</p>
+ <div class="notecard note">
+ <h4>Note</h4>
+ <p>Setting <code>target="_blank"</code> on <code>&lt;a&gt;</code> elements implicitly provides the same <code>rel</code> behavior as setting <code><a href="/en-US/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> which does not set <code>window.opener</code>. See <a href="#browser_compatibility">browser compatibility</a> for support status.</p>
  </div>
  </dd>
  <dt id="type">{{HTMLAttrDef("type")}}</dt>
@@ -106,23 +104,28 @@ <h3 id="Obsolete_attributes">Obsolete attributes</h3>
 <dl>
  <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt>
  <dd>Hinted at the {{Glossary("character encoding")}} of the linked URL.
- <div class="note">
- <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.</p>
+ <div class="notecard note">
+ <h4>Note</h4>
+ <p>This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.</p>
  </div>
  </dd>
  <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt>
  <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd>
  <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt>
  <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code>&lt;a&gt;</code>, as long as they had identical values.
- <div class="note">
- <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p>
+ <div class="notecard note">
+ <h4>Note</h4>
+ <p>Use the global attribute {{HTMLAttrxRef("id")}} instead.</p>
  </div>
  </dd>
  <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt>
  <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd>
  <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt>
  <dd>The shape of the hyperlink’s region in an image map.
- <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div>
+ <div class="notecard note">
+ <h4>Note</h4>
+ <p>Use the {{HTMLElement("area")}} element for image maps instead.</p>
+ </div>
  </dd>
 </dl>
 
@@ -227,7 +230,8 @@ <h3 id="Linking_to_an_element_on_the_same_page">Linking to an element on the sam
 </pre>
 
 <div class="notecard note">
-<p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">as defined in the HTML specification</a>.</p>
+<h4>Note</h4>
+<p>You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">as defined in the HTML specification</a>.</p>
 </div>
 
 <h3 id="Linking_to_an_email_address">Linking to an email address</h3>
@@ -319,7 +323,7 @@ <h2 id="Security_and_privacy">Security and privacy</h2>
 
 <p><code>&lt;a&gt;</code> elements can have consequences for users’ security and privacy. See <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header: privacy and security concerns</a> for information.</p>
 
-<p>Using <code>target="_blank"</code> without <code>rel="noreferrer"</code> and <code>rel="noopener"</code> makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>), although note that, in newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> implicitly provides the same protection as setting <code>rel="noopener"</code>.</p>
+<p>Using <code>target="_blank"</code> without <code><a href="/en-US/docs/Web/HTML/Link_types/noreferrer">rel="noreferrer"</a></code> and <code><a href="/en-US/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>), although note that, in newer browser versions setting <code>target="_blank"</code> implicitly provides the same protection as setting <code>rel="noopener"</code>. See <a href="#browser_compatibility">browser compatibility</a> for details.</p>
 
 <h2 id="Accessibility">Accessibility</h2>
 

files/en-us/web/html/element/area/index.html

@@ -107,8 +107,9 @@ <h2 id="Attributes">Attributes</h2>
  </ul>
  </dd>
  <dd>Use this attribute only if the {{htmlattrxref("href", "area")}} attribute is present.
- <div class="note">
- <p><strong>Note:</strong> In newer browser versions (e.g. Firefox 79+) setting <code>target="_blank"</code> on <code>&lt;area&gt;</code> elements implicitly provides the same <code>rel</code> behavior as setting <code>rel="noopener"</code>.</p>
+ <div class="notecard note">
+ <h4>Note</h4> 
+ <p>Setting <code>target="_blank"</code> on <code>&lt;area&gt;</code> elements implicitly provides the same <code>rel</code> behavior as setting <code><a href="/en-US/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> which does not set <code>window.opener</code>. See <a href="#browser_compatibility">browser compatibility</a> for support status.</p>
  </div>
  </dd>
 </dl>
@@ -120,8 +121,9 @@ <h3 id="Deprecated_attributes">Deprecated attributes</h3>
  <dd>Define a names for the clickable area so that it can be scripted by older browsers.</dd>
  <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt>
  <dd>Indicates that no hyperlink exists for the associated area.
- <div class="note">
- <p><strong>Note:</strong> Since HTML5, omitting the <code>href</code> attribute is sufficient.</p>
+ <div class="notecard note">
+ <h4>Note</h4>
+ <p>Since HTML5, omitting the <code>href</code> attribute is sufficient.</p>
  </div>
  </dd>
  <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt>

files/en-us/web/html/element/form/index.html

@@ -59,9 +59,12 @@ <h2 id="Attributes">Attributes</h2>
 <p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
 
 <dl>
- <dt>{{htmlattrdef("accept")}} {{obsolete_inline}}</dt>
+ <dt>{{htmlattrdef("accept")}} {{obsolete_inline("html5")}}</dt>
  <dd>Comma-separated <a href="/en-US/docs/Web/SVG/Content_type">content types</a> the server accepts.
- <div class="note"><strong>This attribute was removed in HTML5 and should not be used.</strong> Instead, use the {{htmlattrxref("accept", "input")}} attribute on <code>&lt;input type=file&gt;</code> elements.</div>
+ <div class="notecard note">
+ <h4>Note</h4>
+ <p><strong>This attribute was removed in HTML5 and should not be used.</strong> Instead, use the {{htmlattrxref("accept", "input")}} attribute on <code>&lt;input type=file&gt;</code> elements.</p>
+ </div>
  </dd>
  <dt>{{htmlattrdef("accept-charset")}}</dt>
  <dd>Space-separated <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">character encodings</a> the server accepts. The browser uses them in the order in which they are listed. The default value means <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">the same encoding as the page</a>.<br>
@@ -127,6 +130,10 @@ <h3 id="Attributes_for_form_submission">Attributes for form submission</h3>
  </ul>
 
  <p>This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> element.</p>
+ <div class="notecard note">
+ <h4>Note</h4> 
+ <p>Setting <code>target="_blank"</code> on <code>&lt;form&gt;</code> elements implicitly provides the same <code>rel</code> behavior as setting <code><a href="/en-US/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> which does not set <code>window.opener</code>.</p>
+ </div>
  </dd>
 </dl>