<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/Umbraco-CSP-manager/assets/css/just-the-docs-default.css"> <link rel="stylesheet" href="/Umbraco-CSP-manager/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet"> <style id="jtd-nav-activation"> .site-nav ul li a { background-image: none; } </style> <script src="/Umbraco-CSP-manager/assets/js/vendor/lunr.min.js"></script> <script src="/Umbraco-CSP-manager/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Begin Jekyll SEO tag v2.8.0 --> <title>CSP Manager for Umbraco | A comprehensive Content Security Policy management package for Umbraco CMS</title> <meta name="generator" content="Jekyll v4.4.1" /> <meta property="og:title" content="CSP Manager for Umbraco" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="A comprehensive Content Security Policy management package for Umbraco CMS" /> <meta property="og:description" content="A comprehensive Content Security Policy management package for Umbraco CMS" /> <link rel="canonical" href="https://matthew-wise.github.io/Umbraco-CSP-manager/assets/css/just-the-docs-head-nav.css" /> <meta property="og:url" content="https://matthew-wise.github.io/Umbraco-CSP-manager/assets/css/just-the-docs-head-nav.css" /> <meta property="og:site_name" content="CSP Manager for Umbraco" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="CSP Manager for Umbraco" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"A comprehensive Content Security Policy management package for Umbraco CMS","headline":"CSP Manager for Umbraco","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://matthew-wise.github.io/Umbraco-CSP-manager/assets/images/icon.png"}},"url":"https://matthew-wise.github.io/Umbraco-CSP-manager/assets/css/just-the-docs-head-nav.css"}</script> <!-- End Jekyll SEO tag --> </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol> <!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE --> <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol> <!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md --> <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <header class="side-bar"> <div class="site-header"> <a href="/Umbraco-CSP-manager/" class="site-title lh-tight"> <div class="site-logo" role="img" aria-label="CSP Manager for Umbraco"></div> </a> <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </button> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/Umbraco-CSP-manager/" class="nav-list-link">Home</a></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/getting-started.html" class="nav-list-link">Getting Started</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="User Guide submenu" aria-expanded="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/Umbraco-CSP-manager/guide/" class="nav-list-link">User Guide</a><ul class="nav-list"><li class="nav-list-item"><a href="/Umbraco-CSP-manager/guide/policy-management.html" class="nav-list-link">Policy Management</a></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/guide/policy-settings.html" class="nav-list-link">Policy Settings</a></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/guide/evaluation.html" class="nav-list-link">Evaluation Tool</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Features submenu" aria-expanded="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/Umbraco-CSP-manager/features/" class="nav-list-link">Features</a><ul class="nav-list"><li class="nav-list-item"><a href="/Umbraco-CSP-manager/features/nonce-tag-helper.html" class="nav-list-link">Nonce Tag Helper</a></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/features/configuration.html" class="nav-list-link">Configuration</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Advanced submenu" aria-expanded="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/Umbraco-CSP-manager/advanced/" class="nav-list-link">Advanced</a><ul class="nav-list"><li class="nav-list-item"><a href="/Umbraco-CSP-manager/advanced/notification-events.html" class="nav-list-link">Notification Events</a></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/advanced/caching.html" class="nav-list-link">Caching & Nonces</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Integrations submenu" aria-expanded="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/Umbraco-CSP-manager/integrations/" class="nav-list-link">Integrations</a><ul class="nav-list"><li class="nav-list-item"><a href="/Umbraco-CSP-manager/integrations/usync.html" class="nav-list-link">uSync</a></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/integrations/usync-complete.html" class="nav-list-link">uSync Complete (Publisher)</a></li></ul></li><li class="nav-list-item"><a href="/Umbraco-CSP-manager/troubleshooting.html" class="nav-list-link">Troubleshooting</a></li></ul> </nav> <div class="d-md-block d-none site-footer"> <style> .theme-toggle-wrap { padding: 1rem 1rem 0.5rem; border-top: 1px solid var(--border-color, #e3e5eb); margin-top: 0.5rem; } .theme-toggle { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--border-color, #e3e5eb); border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.25rem; cursor: pointer; font-size: 0.72rem; font-family: inherit; color: inherit; width: 100%; transition: border-color 0.2s ease, background 0.2s ease; position: relative; } .theme-toggle:hover { border-color: #283a97; background: rgba(40, 58, 151, 0.05); } .theme-toggle__track { width: 28px; height: 16px; background: #e3e5eb; border-radius: 999px; position: relative; flex-shrink: 0; transition: background 0.25s ease; } .theme-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #283a97; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-toggle[data-theme="dark"] .theme-toggle__track { background: #283a97; } .theme-toggle[data-theme="dark"] .theme-toggle__track::after { transform: translateX(12px); background: #ffffff; } .theme-toggle__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; opacity: 1; transition: opacity 0.2s ease; } .theme-toggle__icon--sun { display: flex; } .theme-toggle__icon--moon { display: none; } .theme-toggle[data-theme="dark"] .theme-toggle__icon--sun { display: none; } .theme-toggle[data-theme="dark"] .theme-toggle__icon--moon { display: flex; } .theme-toggle__label { flex: 1; text-align: left; letter-spacing: 0.01em; opacity: 0.8; } </style> <div class="theme-toggle-wrap"> <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode"> <span class="theme-toggle__track"></span> <span class="theme-toggle__icon theme-toggle__icon--sun" aria-hidden="true"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"/> <line x1="12" y1="1" x2="12" y2="3"/> <line x1="12" y1="21" x2="12" y2="23"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> <line x1="1" y1="12" x2="3" y2="12"/> <line x1="21" y1="12" x2="23" y2="12"/> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> </svg> </span> <span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> </svg> </span> <span class="theme-toggle__label">Light mode</span> </button> </div> <script> (function () { if (window.__jtdThemeReady) { return; } window.__jtdThemeReady = true; const STORAGE_KEY = 'jtd-theme'; const systemDark = window.matchMedia('(prefers-color-scheme: dark)'); const initialTheme = localStorage.getItem(STORAGE_KEY) || (systemDark.matches ? 'dark' : 'light'); function syncButtons(theme) { document.querySelectorAll('.theme-toggle').forEach(function (btn) { btn.setAttribute('data-theme', theme); btn.querySelector('.theme-toggle__label').textContent = theme === 'dark' ? 'Dark mode' : 'Light mode'; }); } function apply(theme) { window.__jtdCurrentTheme = theme; jtd.setTheme(theme); syncButtons(theme); } jtd.setTheme(initialTheme); window.__jtdCurrentTheme = initialTheme; document.addEventListener('DOMContentLoaded', function () { syncButtons(initialTheme); }); document.addEventListener('click', function (e) { const btn = e.target.closest('.theme-toggle'); if (!btn) { return; } const next = btn.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; localStorage.setItem(STORAGE_KEY, next); apply(next); }); systemDark.addEventListener('change', function (e) { if (!localStorage.getItem(STORAGE_KEY)) { apply(e.matches ? 'dark' : 'light'); } }); })(); </script> </div> </header> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search CSP Manager for Umbraco" autocomplete="off"> <label for="search-input" class="search-label"> <span class="sr-only">Search CSP Manager for Umbraco</span> <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg> </label> </div> <div id="search-results" class="search-results"></div> </div> </div> <div class="main-content-wrap"> <div id="main-content" class="main-content"> <main> <h.site-nav ul li a { background-image: linear-gradient(-90deg, #f5f6fa 0%, rgba(245, 246, 250, 0.8) 80%, rgba(245, 246, 250, 0) 100%); } </main> <hr> <footer> <div class="d-flex mt-2"> <p class="text-small mb-0"> <a href="https://github.com/Matthew-Wise/Umbraco-CSP-manager/edit/main/docs/assets/css/just-the-docs-head-nav.css" id="edit-this-page">Edit this page on GitHub</a> </p> </div> <div class="d-md-none mt-4 fs-2"> <style> .theme-toggle-wrap { padding: 1rem 1rem 0.5rem; border-top: 1px solid var(--border-color, #e3e5eb); margin-top: 0.5rem; } .theme-toggle { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--border-color, #e3e5eb); border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.25rem; cursor: pointer; font-size: 0.72rem; font-family: inherit; color: inherit; width: 100%; transition: border-color 0.2s ease, background 0.2s ease; position: relative; } .theme-toggle:hover { border-color: #283a97; background: rgba(40, 58, 151, 0.05); } .theme-toggle__track { width: 28px; height: 16px; background: #e3e5eb; border-radius: 999px; position: relative; flex-shrink: 0; transition: background 0.25s ease; } .theme-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #283a97; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-toggle[data-theme="dark"] .theme-toggle__track { background: #283a97; } .theme-toggle[data-theme="dark"] .theme-toggle__track::after { transform: translateX(12px); background: #ffffff; } .theme-toggle__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; opacity: 1; transition: opacity 0.2s ease; } .theme-toggle__icon--sun { display: flex; } .theme-toggle__icon--moon { display: none; } .theme-toggle[data-theme="dark"] .theme-toggle__icon--sun { display: none; } .theme-toggle[data-theme="dark"] .theme-toggle__icon--moon { display: flex; } .theme-toggle__label { flex: 1; text-align: left; letter-spacing: 0.01em; opacity: 0.8; } </style> <div class="theme-toggle-wrap"> <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode"> <span class="theme-toggle__track"></span> <span class="theme-toggle__icon theme-toggle__icon--sun" aria-hidden="true"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"/> <line x1="12" y1="1" x2="12" y2="3"/> <line x1="12" y1="21" x2="12" y2="23"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> <line x1="1" y1="12" x2="3" y2="12"/> <line x1="21" y1="12" x2="23" y2="12"/> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> </svg> </span> <span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> </svg> </span> <span class="theme-toggle__label">Light mode</span> </button> </div> <script> (function () { if (window.__jtdThemeReady) { return; } window.__jtdThemeReady = true; const STORAGE_KEY = 'jtd-theme'; const systemDark = window.matchMedia('(prefers-color-scheme: dark)'); const initialTheme = localStorage.getItem(STORAGE_KEY) || (systemDark.matches ? 'dark' : 'light'); function syncButtons(theme) { document.querySelectorAll('.theme-toggle').forEach(function (btn) { btn.setAttribute('data-theme', theme); btn.querySelector('.theme-toggle__label').textContent = theme === 'dark' ? 'Dark mode' : 'Light mode'; }); } function apply(theme) { window.__jtdCurrentTheme = theme; jtd.setTheme(theme); syncButtons(theme); } jtd.setTheme(initialTheme); window.__jtdCurrentTheme = initialTheme; document.addEventListener('DOMContentLoaded', function () { syncButtons(initialTheme); }); document.addEventListener('click', function (e) { const btn = e.target.closest('.theme-toggle'); if (!btn) { return; } const next = btn.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; localStorage.setItem(STORAGE_KEY, next); apply(next); }); systemDark.addEventListener('change', function (e) { if (!localStorage.getItem(STORAGE_KEY)) { apply(e.matches ? 'dark' : 'light'); } }); })(); </script> </div> </footer> </div> </div> <div class="search-overlay"></div> </div> </body> </html>
