docs: improved security notes

README.md

@@ -4,18 +4,28 @@
 
 View the Public Gateway Checker on GitHub Pages: https://ipfs.github.io/public-gateway-checker/
 
-[![Screenshot of Public Gateway Checker](https://gateway.ipfs.io/ipfs/QmZBvMaV3EBtuUB4yGD5gGJwmEyePpk2sWjvPEoLJKcH5D)](https://ipfs.github.io/public-gateway-checker/)
+[![Screenshot of Public Gateway Checker](https://user-images.githubusercontent.com/157609/121263486-f7fb2800-c8b5-11eb-9061-0b6f586a6f25.png)](https://ipfs.github.io/public-gateway-checker/)
+
+
+## SECURITY NOTES
+
+- The list contains gateways operated by various parties, coordinated by loose mutual consensus, without a central governing authority. Protocol Labs operates and is responsible for only two of the listed gateways: `ipfs.io` and `dweb.link`.
+- Gateways without origin isolation will be marked with ⚠️, indicating they are not safe for use cases that require private local storage of data or credentials. [Learn more](https://github.com/ipfs/public-gateway-checker/issues/150).
+>>>>>>> 3cd5478 (docs: improved security notes)
 
-**NOTE:** With the exception of `ipfs.io` and `dweb.link`, all gateways listed are hosted by third parties and should be treated as such.
 
 ## Adding a new public gateway
 
+
 If you'd like to add a new public gateway, please edit `gateways.json`:
 1. Add the gateway's address to the bottom of the list
 2. Make sure the final item in the list does **not** have a comma at the end, but all preceding items do
+3. If you care about security of websites loaded via your gateway, make sure it is set up as a [subdomain gateway](https://docs.ipfs.io/how-to/address-ipfs-on-web/#subdomain-gateway). See [config docs](https://github.com/ipfs/go-ipfs/blob/master/docs/config.md#gatewaypublicgateways) and  [recipes](https://github.com/ipfs/go-ipfs/blob/master/docs/config.md#gateway-recipes) for go-ipfs, and [learn more here](https://github.com/ipfs/public-gateway-checker/issues/150).
 
 Then, submit a pull request for this change. Be sure to follow all the directions in the pull request template so your PR can be triaged as quickly as possible.
 
+
+
 ## Testing locally
 
 ```console

index.html

@@ -35,9 +35,18 @@ <h1 class='f3 fw2 montserrat aqua ttu ma0'>Public Gateways</h1>
 	</header>
 
 	<div class="ph4-l pt4-l">
-      <div id="origin-warning" class="f5 pb2">
-        <strong>Security disclaimer:</strong> avoid storing sensitive data (or providing credentials) on websites loaded via gateways marked with <big>⚠️ </big><br/>
-        These are legacy gateways for fetching standalone data, not designed to serve dapps/websites (<strong>they do not provide <a href="https://docs.ipfs.io/how-to/address-ipfs-on-web/#path-gateway">origin isolation</a></strong>).
+        <div id="origin-warning" class="f5 pa2 tl">
+          <p>SECURITY NOTES</p>
+          <ul class="pl3">
+            <li>Avoid storing sensitive data (or providing credentials) on websites loaded via gateways marked with <big>⚠️ </big><br/>
+              These are legacy gateways for fetching standalone data, not designed to serve dapps/websites.<br/>
+              <strong>They do not provide <a href="https://docs.ipfs.io/how-to/address-ipfs-on-web/#path-gateway">origin isolation</a></strong>.
+            </li>
+            <li class="pt2">
+              The list contains gateways operated by various parties, coordinated by loose mutual consensus, <strong>without a central governing authority</strong>.<br/>
+              Protocol Labs operates and is responsible for only two of the listed gateways: <code>ipfs.io</code> and <code>dweb.link</code>.
+            </li>
+          </ul>
         </div>
 		<div id="checker.stats" class="Stats monospace f6"></div>
 		<div id="checker.results" class="Results monospace f6">

styles.css

@@ -97,3 +97,21 @@ div.Node.origin div.Link::after {
 div.Node:not(.online):not(:first-child) {
   opacity: .5
 }
+
+div#origin-warning {
+  padding: .1rem 1.5rem;
+  border-left: 4px solid #e7c000;
+  background-color: #fff7d2;
+  color: #34373f;
+}
+
+div#origin-warning p {
+  letter-spacing: .5px;
+  color: #b29400;
+  font-weight: 600;
+  margin-bottom: -.4rem;
+}
+
+div#origin-warning ol, div#origin-warning p, div#origin-warning ul {
+    line-height: 1.7;
+}