Skip to content

Add nonces to the HTML creation so client side components can call it #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DK09876 merged 1 commit into from
Nov 11, 2025
Merged

Add nonces to the HTML creation so client side components can call it #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vectorize-io/vectorize-connect",
"version": "0.4.0",
"version": "0.4.1",
"description": "A simple package for Google Drive authorization and file selection",
"main": "dist/index.js",
"module": "dist/index.mjs",
Expand Down
5 changes: 3 additions & 2 deletions src/baseOAuth/ui/picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,8 @@ export abstract class BasePicker {
styles: string = '',
head: string = '',
body: string,
scripts: string
scripts: string,
nonce?: string
): string {
return `
<!DOCTYPE html>
Expand Down Expand Up @@ -283,7 +284,7 @@ export abstract class BasePicker {
${body}
</div>
</div>
<script>
<script${nonce ? ` nonce="${nonce}"` : ''}>
${scripts}
</script>
</body>
Expand Down
7 changes: 4 additions & 3 deletions src/dropBoxOAuth/core/oauth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ export class DropboxOAuth extends BaseOAuth {
public static override async createCallbackResponse(
code: string,
config: DropboxOAuthConfig,
error?: string | OAuthError
error?: string | OAuthError,
nonce?: string
): Promise<Response> {
if (error) {
const errorObj = typeof error === 'string' ? new OAuthError(error, 'CALLBACK_ERROR') : error;
Expand All @@ -107,8 +108,8 @@ export class DropboxOAuth extends BaseOAuth {
);

// Use the Dropbox picker template
const htmlContent = DropboxPicker.createPickerHTML(tokens, config, tokens.refresh_token);
const htmlContent = DropboxPicker.createPickerHTML(tokens, config, tokens.refresh_token, undefined, nonce);

return new Response(htmlContent, { headers: { 'Content-Type': 'text/html' } });
} catch (error) {
return this.createErrorResponse(
Expand Down
23 changes: 13 additions & 10 deletions src/dropBoxOAuth/ui/picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ export class DropboxPicker extends BasePicker {
* @returns HTML string for the Dropbox picker interface
*/
createPickerHTML(
tokens: OAuthResponse,
config: DropboxOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>
tokens: OAuthResponse,
config: DropboxOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>,
nonce?: string
): string {
const ui = this.getCommonUIElements();

Expand Down Expand Up @@ -218,20 +219,22 @@ export class DropboxPicker extends BasePicker {
${ui.fileListContainer}
${ui.submitButtonContainer}
`,
dropboxScripts
dropboxScripts,
nonce
);
}

/**
* Create a static instance for backward compatibility
*/
static createPickerHTML(
tokens: OAuthResponse,
config: DropboxOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>
tokens: OAuthResponse,
config: DropboxOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>,
nonce?: string
): string {
const picker = new DropboxPicker();
return picker.createPickerHTML(tokens, config, refreshToken, preSelectedFiles);
return picker.createPickerHTML(tokens, config, refreshToken, preSelectedFiles, nonce);
}
}
7 changes: 4 additions & 3 deletions src/googleDriveOAuth/core/oauth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ export class GoogleDriveOAuth extends BaseOAuth {
public static override async createCallbackResponse(
code: string,
config: GoogleDriveOAuthConfig,
error?: string | OAuthError
error?: string | OAuthError,
nonce?: string
): Promise<Response> {
if (error) {
const errorObj = typeof error === 'string' ? new OAuthError(error, 'CALLBACK_ERROR') : error;
Expand All @@ -112,8 +113,8 @@ export class GoogleDriveOAuth extends BaseOAuth {
);

// Use the Google Drive picker template
const htmlContent = GoogleDrivePicker.createPickerHTML(tokens, config, tokens.refresh_token);
const htmlContent = GoogleDrivePicker.createPickerHTML(tokens, config, tokens.refresh_token, undefined, nonce);

return new Response(htmlContent, { headers: { 'Content-Type': 'text/html' } });
} catch (error) {
return this.createErrorResponse(
Expand Down
23 changes: 13 additions & 10 deletions src/googleDriveOAuth/ui/picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ export class GoogleDrivePicker extends BasePicker {
* @returns HTML string for the Google Drive picker interface
*/
createPickerHTML(
tokens: OAuthResponse,
config: GoogleDriveOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>
tokens: OAuthResponse,
config: GoogleDriveOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>,
nonce?: string
): string {
const ui = this.getCommonUIElements();

Expand Down Expand Up @@ -155,20 +156,22 @@ export class GoogleDrivePicker extends BasePicker {
${ui.fileListContainer}
${ui.submitButtonContainer}
`,
googleDriveScripts
googleDriveScripts,
nonce
);
}

/**
* Create a static instance for backward compatibility
*/
static createPickerHTML(
tokens: OAuthResponse,
config: GoogleDriveOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>
tokens: OAuthResponse,
config: GoogleDriveOAuthConfig,
refreshToken: string,
preSelectedFiles?: Record<string, { name: string; mimeType: string }>,
nonce?: string
): string {
const picker = new GoogleDrivePicker();
return picker.createPickerHTML(tokens, config, refreshToken, preSelectedFiles);
return picker.createPickerHTML(tokens, config, refreshToken, preSelectedFiles, nonce);
}
}
5 changes: 3 additions & 2 deletions src/googleDriveOAuth/utils/validation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { OAuthConfig, OAuthError, ConfigurationError } from '../types';
import { OAuthError, ConfigurationError } from '../../baseOAuth/types';
import { GoogleDriveOAuthConfig } from '../types';

/**
* Validates the OAuth configuration
* @param config The OAuth configuration to validate
* @throws ConfigurationError if the configuration is invalid
*/
export function validateConfig(config: OAuthConfig): void {
export function validateConfig(config: GoogleDriveOAuthConfig): void {
if (!config.clientId) {
throw new ConfigurationError('Client ID is required');
}
Expand Down
5 changes: 3 additions & 2 deletions src/notionOAuth/ui/picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ export class NotionPicker {
tokens: any,
config: NotionOAuthConfig,
accessToken: string,
existingSelection?: Record<string, { title: string; pageId: string; parentType?: string }>
existingSelection?: Record<string, { title: string; pageId: string; parentType?: string }>,
nonce?: string
): string {
// Convert existing selection to JSON string for embedding in the HTML
const existingSelectionStr = existingSelection
Expand Down Expand Up @@ -412,7 +413,7 @@ export class NotionPicker {
</div>
</div>

<script>
<script${nonce ? ` nonce="${nonce}"` : ''}>
// Store selected items
const selectedItems = ${existingSelectionStr};
let dataLoaded = false;
Expand Down