ideas-generator/SECURITY_COMPONENTS.md

Security Components to Temporarily Disable for Local Development

Authentication Components to Comment Out

1. Microsoft MSAL Authentication (index.html)

Lines to comment out:

Block 1: MSAL Library Import (lines 11-18)

<!-- DISABLE FOR LOCAL DEV
<script src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
<style>
    #protected-content {
        display: none;
    }
</style>
-->

Block 2: Login/Logout Buttons (lines 27-32)

<!-- DISABLE FOR LOCAL DEV
<div style="text-align: left;">
    <button id="logout-button" onclick="signOut()" style="display:none;">Log Out</button>
    <button id="login-button" onclick="signIn()" style="display:none;">Log In</button>
</div>
-->

Block 3: Protected Content Wrapper (line 51)

Change from:

<div class="page" id="protected-content">

To:

<div class="page" id="protected-content" style="display: flex;">

Block 4: MSAL Configuration & Functions (lines 68-127)

<!-- DISABLE FOR LOCAL DEV
<script>
    const msalConfig = {
        auth: {
            clientId: "9079054c-9620-4757-a256-23413042f1ef",
            authority: "https://login.microsoftonline.com/e519c2e6-bc6d-4fdf-8d9c-923c2f002385",
            redirectUri: "https://ai-sandbox.oliver.solutions/ideas-sparkplug/index.html"
        },
        cache: {
            cacheLocation: "sessionStorage",
            storeAuthStateInCookie: true,
        }
    };

    const loginRequest = {
        scopes: ["user.read"]
    };

    const myMSALObj = new msal.PublicClientApplication(msalConfig);

    signIn();

    function signIn() {
        myMSALObj.loginPopup(loginRequest)
            .then(loginResponse => {
                console.log("User logged in:", loginResponse.account.username);
                thisUser = loginResponse.account.username;
                sessionStorage.setItem('accessToken', loginResponse.accessToken);
                showProtectedContent();
                onAuthenticated();
            }).catch(error => {
                console.error("Error during login:", error);
            });
    }

    function signOut() {
        sessionStorage.removeItem('accessToken');
        console.log("User logged out.");
        document.getElementById('protected-content').style.display = 'none';
        document.getElementById('logout-button').style.display = 'none';
        document.getElementById('login-button').style.display = 'flex';
    }

    function showProtectedContent() {
        const accessToken = sessionStorage.getItem('accessToken');
        if (accessToken) {
            document.getElementById('protected-content').style.display = 'flex';
            document.getElementById('logout-button').style.display = 'flex';
            document.getElementById('login-button').style.display = 'none';
        }
    }

    window.addEventListener('load', showProtectedContent);
</script>
-->

2. JavaScript Authentication Logic (script.js)

Update thisUser Variable (line 13)

Change from:

var thisUser = "";

To:

var thisUser = "dev@local.dev"; // Default development user

Update gcp_fetch Function (lines 46-61)

Replace authentication headers:

async function gcp_fetch(url) {
    console.log("running gcp_fetch");
    return await fetch(url, {
        method: "POST",
        mode: "cors",
        headers: { 
            "Content-type": "application/json"
            // Remove authenticateduser header for local dev
        },
        body: JSON.stringify({
            // Remove authenticateduser from body for local dev
        })
    });
}

Update onAuthenticated Function (lines 397-402)

Replace with direct initialization:

const onAuthenticated = () => {
    goToCreateNewConversationsPage();
    getConversations();
    getAssistants();
    getTOVs();
};

// Call directly on page load for development
document.addEventListener('DOMContentLoaded', onAuthenticated);

3. Backend Authentication (GCF/index.js)

For local development, this entire Google Cloud Function can be ignored since we'll be creating a local backend.

Components that handle authentication:

• Lines 44-52: Cookie-based auth token extraction
• Lines 58-63: Token handling and cookie setting

4. Privacy Policy Link (index.html)

Optional - Comment out for cleaner dev environment (lines 45-47):

<!-- DISABLE FOR LOCAL DEV
<div style="color: rgb(255, 255, 255); text-decoration: none; font-weight: 200; position: absolute; bottom: 0; right: 1px; height: 50px; width: 250px; background-color: black; z-index: 2000;">
    <a href="privacy/" style="color: rgb(255, 255, 255); text-decoration: none; font-weight: 200; position: absolute; bottom: 15px; right: 30px;">View our privacy policy here</a>
</div>
-->

Development Setup Steps

Step 1: Create Development Flag

Add to js/variables.js:

// Development configuration
const isDevelopment = true;
const developmentUser = "dev@local.dev";

Step 2: Conditional Authentication

Wrap authentication calls in development checks:

if (!isDevelopment) {
    // Original authentication code
} else {
    // Skip authentication, set default user
    thisUser = developmentUser;
    document.getElementById('protected-content').style.display = 'flex';
    onAuthenticated();
}

Step 3: Update CSS for Development

Ensure protected content is visible:

#protected-content {
    display: flex !important; /* Override for development */
}

Security Components to Keep Active

1. Data Sanitization (script.js)

Keep Active: maskUKBankDetails() function (lines 27-43)

• UK banking detail masking
• Cybersecurity term filtering
• These provide valuable data protection even in development

2. CORS Configuration

Keep Active: Basic CORS handling in local backend

• Configure appropriate origins for development
• Maintain security headers

3. Content Validation

Keep Active: Basic input validation and sanitization

• Message length limits
• Content type validation
• XSS prevention

Re-enabling Authentication Checklist

When ready to re-enable authentication:

1. Uncomment all MSAL authentication blocks
2. Update redirect URI to production domain
3. Restore authenticateduser headers in API calls
4. Update CORS origins to production domains
5. Test Microsoft AD login flow
6. Verify session management
7. Test logout functionality
8. Update environment variables for production

Notes

• Keep a backup of the original files before making changes
• Use feature flags to easily toggle between development and production
• Consider creating separate HTML files for development vs production
• All security features should be thoroughly tested before production deployment
• The transition approach allows gradual re-enabling of security features