Create css-cloned-site-token.md (#50)

* Create css-cloned-site-token.md Add CSS token docs based on @thinkst-cs draft * Update docs/guide/css-cloned-site-token.md Co-authored-by: Sara Tavares <[email protected]> --------- Co-authored-by: Sara Tavares <[email protected]>
thinkst · Feb 13, 2024 · 5cbd2df · 5cbd2df
1 parent 35c3af4
commit 5cbd2df
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/docs/guide/css-cloned-site-token.md b/docs/guide/css-cloned-site-token.md
@@ -0,0 +1,26 @@
+# CSS Cloned Website Token
+
+## What is a CSS Cloned Website Token
+
+This Canarytoken is placed within either the CSS of your site, or inside a 3rd party site, where you may not be able to add JavaScript and notifies you if someone clones your site and hosts it on another domain. This can alert on targeted or Adversary-in-the-Middle (AitM) phishing attacks.
+
+## Creating a CSS Cloned Website Token
+
+Create a token by choosing "CSS Cloned Website" from the dropdown list.
+
+Leave a reasonable comment to remind yourself where you will deploy the token. Then, supply the domain that you want to protect (this is the domain where the site is deployed that you will insert your tokenized css into).
+
+You'll get a CSS Snippet similar to:
+
+```
+body {
+    background: url('https://dakg4cmpuclai.cloudfront.net/<TOKEN>/<URLENCODEDSTRING>/img.gif') !important;
+}
+```
+
+Upon a client making the request, our CloudFront infrastructure will validate the HTTP Referer header to ensure it is expected. You get an alert if the domain doesn't match the expected domain used during the creation of the token.
+
+Ideas for use:
+
+ - Only the `url()` portion is required, you can change the selector and add `opacity: 0` or `display: hidden` if you want to style an invisible element. 
+ - Use this CSS to style 3rd party authentication pages, such as a [LogTo](https://logto.io) page, or an [AWS Cognito login](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-ui-customization.html)