Protective Branding for M365

style.css

 /* Open https://portal.azure.com, select Entra ID > Company branding > Default sign-in > Edit > Layout > Custom CSS and upload this file */

.ext-sign-in-box {
  background-image: url("https://protective-branding.cloudgate.workers.dev/background.svg");
}

worker.js

// Deploy as CloudFlare Worker

const good = `<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
  <path d="M0,0h1v1H0" fill="#fff"/>
</svg>`;
const bad = `<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <text style="fill: #ff0000; font-size: 24px; font-weight: bold; text-anchor: middle;" x="250" y="240">Phishing detected!</text>
  <text style="fill: #ff0000; font-size: 24px; text-anchor: middle;" x="250" y="270">Do not enter your password!</text>
</svg>`;

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    if (request.method == 'GET' && url.pathname == '/background.svg') {
      const referer = await request.headers.get('Referer');
      return new Response(referer?.startsWith('https://login.microsoftonline.com/') ? good : bad, {headers: {'Content-Type': 'image/svg+xml'}});
    } else {
      return new Response('', {status: 404});
    }
  },
};